/* ===========================================================================
   CueMachine — Design Tokens
   Acid Variant theme (dark canvas, acid lime accent).
   Source of truth: src/CueMachine.swift (CM enum) + design/copy.md
   =========================================================================== */

/* ── FONTS ── */
@font-face {
  font-family: 'Isolation Grotesque';
  src: url('fonts/IsolationGrotesque-Regular.woff2') format('woff2'),
       url('fonts/IsolationGrotesque-Regular.woff')  format('woff'),
       url('fonts/IsolationGrotesque-Regular.otf')   format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ─────────────────────────────────────────
     PALETTE — Neutrals (Acid Variant)
     One-to-one with the CM enum in CueMachine.swift.
  ───────────────────────────────────────── */
  --cm-bg:            #07090a;  /* Canvas — window background */
  --cm-titlebar:      #07090a;  /* Window chrome */
  --cm-sidebar:       #0c0f0d;  /* Sidebar panel */
  --cm-surface-0:     #0c0f0d;  /* Recessed surfaces — footers, inputs */
  --cm-surface-1:     #101610;  /* Primary panel background */
  --cm-surface-2:     #182018;  /* Header / lifted strip */
  --cm-surface-3:     #1c2418;  /* Control / hover background */
  --cm-border:        #293820;  /* Primary 1px border */
  --cm-border-subtle: #1c2814;  /* Hairline divider */

  --cm-text-1:        #dff0d0;  /* Primary text (off-white, green tint) */
  --cm-text-2:        #b8d8a8;  /* Secondary text */
  --cm-text-3:        #8db87a;  /* Muted / label text */

  /* ─────────────────────────────────────────
     PALETTE — Accent (Acid Lime) + Status
  ───────────────────────────────────────── */
  --cm-accent:        #c0f060;  /* Acid lime — primary accent, chips, CTAs */
  --cm-accent-dim:    #6a8a28;  /* Dim lime — hover borders, hard shadows */
  --cm-accent-glow:   rgba(192,240,96,0.18); /* Drop zone hover tint */
  --cm-on-accent:     #07090a;  /* Text on lime backgrounds */

  --cm-green:         #a3e055;  /* Signal-present / success */
  --cm-blue:          #3db8cc;  /* Info / timecode (legacy cyan) */
  --cm-orange:        #e8a13a;  /* Legacy warning amber — prefer --cm-amber */
  --cm-red:           #e8503a;  /* Error / destructive */

  /* Extended palette — oklch-sourced pairings */
  --cm-amber:         #f0b840;  /* User-editable text + warning / highlight */
  --cm-cobalt:        #5a8cff;  /* Selection highlights, info, new-name preview */
  --cm-coral:         #ff5544;  /* Neon coral — alt destructive */
  --cm-slate:         #586474;  /* Disabled / secondary */
  --cm-violet:        #8858b8;  /* Tags / badges (MIDI) */

  /* ─────────────────────────────────────────
     BRAND — used by lockups, marketing surfaces.
     Sourced from brand-assets-v1a (Ramp Tone).
  ───────────────────────────────────────── */
  --brand-ink:        #14201a;  /* Mossy ink — linework on lime; fg on light */
  --brand-lime:       #c0f060;  /* Stamp fill on dark */
  --brand-lime-deep:  #7ba818;  /* Stamp fill on light */
  --brand-cream:      #f4f3ec;  /* Light canvas */
  --brand-cream-text: #dff0d0;  /* Mono mark / wordmark on dark */

  /* ─────────────────────────────────────────
     SEMANTIC COLOR ASSIGNMENTS
     What each token means in the app.
  ───────────────────────────────────────── */
  --color-success:           var(--cm-green);
  --color-warning:           var(--cm-amber);
  --color-error:             var(--cm-red);
  --color-info:              var(--cm-cobalt);
  --color-editable:          var(--cm-amber);   /* user-typed text */
  --color-selection:         var(--cm-cobalt);  /* Table row selection */
  --color-rename-preview:    var(--cm-cobalt);  /* "Will rename" → new name */
  --color-tag-midi:          var(--cm-violet);  /* MIDI badge */
  --color-disabled:          var(--cm-slate);

  /* ─────────────────────────────────────────
     TYPOGRAPHY — Three families, locked.
     IsoGro display + headers + buttons + editable.
     IBM Plex Sans body / labels / captions.
     JetBrains Mono filenames + numeric data.
  ───────────────────────────────────────── */
  --font-display: 'Isolation Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale (per the SwiftUI font extensions) */
  --t-hero:   56px;   /* cmDisplayHero — Tap Tempo BPM, marketing */
  --t-h1:     40px;   /* cmH1 */
  --t-h2:     28px;   /* cmH2 */
  --t-disp-l: 20px;   /* cmDisplayLg */
  --t-disp-m: 17px;   /* cmDisplayMd — section titles */
  --t-disp-s: 15px;   /* cmDisplaySm — buttons, dropdowns */
  --t-body:   15px;   /* cmBody */
  --t-small:  13px;   /* cmSmall — list rows */
  --t-label:  12px;   /* cmLabel */
  --t-cap:    11px;   /* cmCaption — table cells, action bars */
  --t-mono:   12px;   /* cmMono — filenames, table data */
  --t-eye:    10px;   /* cmEyebrow — uppercase eyebrows */
  --t-micro:  10px;   /* cmMicro — micro labels */

  /* Weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.5;

  /* Tracking — uppercase eyebrows in IsoGro use a moderate +letter-spacing.
     (Mono is still used for shortcut chips + filenames at 0.14em.) */
  --track-tight:    -0.01em;
  --track-normal:    0;
  --track-wide:      0.04em;
  --track-eyebrow:   0.08em;   /* 10pt IsoGro uppercase eyebrow */
  --track-eyebrow-mono: 0.14em; /* 10pt mono — shortcut hints, ID columns */
  --track-button:    0.04em;

  /* ─────────────────────────────────────────
     SPACING (4-px base unit — brutalist density)
  ───────────────────────────────────────── */
  --s-1:   2px;
  --s-2:   4px;
  --s-3:   6px;
  --s-4:   8px;
  --s-5:  10px;
  --s-6:  12px;
  --s-8:  16px;
  --s-10: 20px;
  --s-12: 24px;
  --s-16: 32px;
  --s-20: 40px;
  --s-24: 48px;
  --s-32: 64px;

  /* ─────────────────────────────────────────
     BORDER + RADIUS
     No rounded corners. Everything is square.
  ───────────────────────────────────────── */
  --radius: 0px;
  --border-w: 1px;

  /* ─────────────────────────────────────────
     SHADOW SYSTEM — Hard offset, never floaty.
     The signature CMHardShadow is a 3×3 dim-lime offset that
     animates on hover; no blur, no opacity falloff.
  ───────────────────────────────────────── */
  --shadow-hard:        3px 3px 0 var(--cm-accent-dim);
  --shadow-hard-lg:     6px 6px 0 var(--cm-accent-dim);
  --shadow-hard-border: 3px 3px 0 var(--cm-border);    /* on ghost buttons */
  --shadow-glow:        0 0 16px var(--cm-accent-glow);
  --shadow-glow-soft:   0 0 8px  var(--cm-accent-glow);

  /* ─────────────────────────────────────────
     ELEVATION TINTS (no blurred shadows ever)
     Stack flat surfaces by stepping --cm-surface-* up.
  ───────────────────────────────────────── */
  --elev-recessed: var(--cm-surface-0);
  --elev-panel:    var(--cm-surface-1);
  --elev-header:   var(--cm-surface-2);
  --elev-hover:    var(--cm-surface-3);

  /* ─────────────────────────────────────────
     MOTION
     Fast, mechanical, no overshoot. 80–120ms is canon.
  ───────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:     cubic-bezier(0.2, 0.9, 0.3, 1);
  --dur-fast:      80ms;
  --dur-normal:    120ms;
  --dur-slow:      240ms;

  /* ─────────────────────────────────────────
     LAYOUT — App chrome dimensions
  ───────────────────────────────────────── */
  --sidebar-w:        220px;
  --recent-outputs-w: 480px;
  --titlebar-h:        38px;
  --row-h:             24px;
  --button-h:          28px;
  --section-pad:       16px;
}

/* ===========================================================================
   BASE RESETS
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
  background: var(--cm-bg);
  color: var(--cm-text-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* ===========================================================================
   SEMANTIC TYPE TOKENS — wire up the heading scale.
   =========================================================================== */
h1, .cm-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--w-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--cm-text-1);
}
h2, .cm-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--cm-text-1);
}
h3, .cm-h3 {
  font-family: var(--font-display);
  font-size: var(--t-disp-l);
  font-weight: var(--w-regular);
  line-height: var(--lh-snug);
  color: var(--cm-text-1);
}
.cm-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: var(--w-regular);
  line-height: 1;
  letter-spacing: var(--track-tight);
}

p, .cm-body { font-size: var(--t-body); line-height: var(--lh-normal); }
.cm-small   { font-size: var(--t-small); }
.cm-label   { font-size: var(--t-label); }
.cm-caption { font-size: var(--t-cap); color: var(--cm-text-2); }

/* Mono — the workhorse for filenames, table data, timecodes */
code, pre, .cm-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: var(--w-regular);
}
.cm-mono-med {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: var(--w-medium);
}

/* Eyebrow — the all-caps brand voice. Now IsoGro (was JetBrains Mono).
   Used by section headers, button labels, sidebar tab labels, eyebrows
   on cards, dropdown trigger labels, drop-zone titles, field labels. */
.cm-eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-eye);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--cm-text-3);
}
.cm-eyebrow-accent {
  font-family: var(--font-display);
  font-size: var(--t-eye);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--cm-accent);
}
/* Mono-eyebrow — reserved for shortcut hints, ID columns, and other
   places where digits / glyphs need to align vertically. */
.cm-eyebrow-mono {
  font-family: var(--font-mono);
  font-size: var(--t-eye);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-eyebrow-mono);
  text-transform: uppercase;
  color: var(--cm-text-3);
}

/* Editable text — IsoGro + amber. Anywhere the user types. */
.cm-editable {
  font-family: var(--font-display);
  color: var(--cm-amber);
}

/* Foreground utilities */
.fg-1 { color: var(--cm-text-1); }
.fg-2 { color: var(--cm-text-2); }
.fg-3 { color: var(--cm-text-3); }
.fg-accent { color: var(--cm-accent); }
.fg-amber  { color: var(--cm-amber); }
.fg-cobalt { color: var(--cm-cobalt); }
.fg-green  { color: var(--cm-green); }
.fg-red    { color: var(--cm-red); }

/* Selection — global cobalt selection per the type-system rules */
::selection {
  background: var(--cm-cobalt);
  color: var(--cm-on-accent);
}