/* Hot Drop foundations. Imported by the web app and bundled with the recorder. */
:root {
  color-scheme: dark;
  --hd-font: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --hd-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
  --hd-bg: #16181d;
  --hd-surface: #1f2126;
  --hd-raised: #262930;
  --hd-hover: #2e323a;
  --hd-inset: #131519;
  --hd-text: #e6e5e2;
  --hd-secondary: #b0b3b9;
  --hd-muted: #969ba4;
  --hd-border: #34383f;
  --hd-divider: #2c2f35;
  --hd-control-border: #606873;
  --hd-border-strong: #3a3e46;
  --hd-media: #111318;
  --hd-table-head: #1b1d22;
  --hd-row-stripe: #1a1c21;
  --hd-row-hover: #23252b;
  --hd-accent: #ff541f;
  --hd-accent-hover: #ff754b;
  --hd-accent-pressed: #f6501d;
  --hd-selected: #36251f;
  --hd-focus: #ffc7b5;
  --hd-link: #8db4d8;
  --hd-success: #5eb663;
  --hd-success-bg: #1f2e22;
  --hd-warning: #d9a13b;
  --hd-warning-bg: #2f2919;
  --hd-danger: #ea6a68;
  --hd-danger-bg: #322022;
  --hd-gold: #f5c04a;
  --hd-space-1: 4px;
  --hd-space-2: 8px;
  --hd-space-3: 12px;
  --hd-space-4: 16px;
  --hd-space-5: 20px;
  --hd-space-6: 24px;
  --hd-space-8: 32px;
  --hd-text-micro: 11px;
  --hd-text-small: 12px;
  --hd-text-label: 13px;
  --hd-text-body: 14px;
  --hd-text-section: 16px;
  --hd-text-title: 26px;
  --hd-radius: 4px;
  --hd-control-height: 36px;
  --hd-touch-height: 44px;
  --hd-motion-fast: 120ms;
  --hd-motion-state: 180ms;
  --hd-motion-reveal: 220ms;
  --hd-ease: cubic-bezier(.16, 1, .3, 1);
}

::selection { background: var(--hd-selected); color: var(--hd-text); }
:focus-visible { outline: 2px solid var(--hd-focus); outline-offset: 3px; }
input, textarea { caret-color: var(--hd-accent); }
input::placeholder, textarea::placeholder { color: var(--hd-muted); opacity: 1; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--hd-accent); }

/* For ordinary actions; media handles and data points keep their own geometry. */
.hd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hd-space-2);
  min-height: var(--hd-control-height);
  padding: 7px var(--hd-space-3);
  border: 1px solid var(--hd-control-border);
  border-radius: var(--hd-radius);
  background: var(--hd-raised);
  color: var(--hd-text);
  font: 600 var(--hd-text-label)/1.45 var(--hd-font);
  text-decoration: none;
  cursor: pointer;
}
.hd-button:hover:not(:disabled) { background: var(--hd-hover); border-color: var(--hd-muted); }
.hd-button:active:not(:disabled) { background: var(--hd-surface); }
.hd-button:disabled { opacity: .45; cursor: default; }
@media (pointer: coarse), (max-width: 700px) {
  .hd-button { min-height: var(--hd-touch-height); }
}
@media (prefers-reduced-motion: no-preference) {
  .hd-button { transition: background-color var(--hd-motion-fast) var(--hd-ease), border-color var(--hd-motion-fast) var(--hd-ease); }
}