/* Tokens copied verbatim from src/styles/theme.css (app repo, master 29d16b4) on 2026-10-17.
   Do not edit the copied blocks; site additions are at the end. Re-copy if the app's palette changes. */

:root {
  /* Backgrounds — charcoal, readable contrast */
  --gutter: #0f0f0f;
  --bg-void: #171717;
  --bg-primary: #222222;
  --bg-surface: #2e2e2e;
  --bg-elevated: #3b3b3b;
  --bg-hover: #4a4a4a;

  /* Layout grid */
  --col-left: 320px;
  --col-grid: 380px;
  --col-right: 200px;
  --col-canvas: 480px;
  --row-header: 48px;
  --row-middle: 100px;
  --gap: 8px;
  --panel-radius: 6px;
  --radius-panel: 6px;
  --radius-ctrl: 4px;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Component spacing */
  --panel-padding: var(--space-3);
  --panel-padding-sm: var(--space-2);
  --card-padding: var(--space-2);
  --card-padding-sm: var(--space-1);
  --sidebar-width: 36px;
  --header-height: 32px;
  --control-height: 24px;

  /* Element gaps */
  --gap-xs: var(--space-1);
  --gap-sm: var(--space-2);
  --gap-md: var(--space-3);
  --gap-lg: var(--space-4);

  /* Line grid — replaces dot matrix */
  --grid-dot: #2e2e2e;
  --grid-size: 20px;
  --dot-size: 1px;

  /* Borders — visible edges for panel separation */
  --border: #444444;
  --border-emphasis: #575757;
  --border-light: #4a4a4a;

  /* Text — high contrast on charcoal */
  --text-primary: #F4F4F4;
  --text-secondary: #d6d4cf;
  --text-muted: #aeaca7;
  --text-ghost: #aeaca7;

  /* Global Colors palette: Ripe (REC only), Ozone (modulation), Wretched (live, playheads), Albino (selection) */
  --rec: #FF175D;
  --mod: #13FADE;
  --live: #C4FA13;
  --sel: #F4F4F4;

  /* Accent — white base (effect colors provide the only color) */
  --accent: #FFFFFF;
  --accent-dim: #888888;
  --accent-hover: #FFFFFF;
  --accent-glow: rgba(255, 255, 255, 0.15);
  --accent-subtle: rgba(255, 255, 255, 0.04);

  /* Accent aliases — all collapse to white */
  --accent-lime: #FFFFFF;
  --accent-lime-dim: #888888;
  --accent-lime-hover: #FFFFFF;
  --accent-lime-glow: rgba(255, 255, 255, 0.15);
  --accent-lime-subtle: rgba(255, 255, 255, 0.04);

  --accent-purple: #FFFFFF;
  --accent-purple-dim: #888888;
  --accent-purple-hover: #FFFFFF;
  --accent-purple-glow: rgba(255, 255, 255, 0.15);
  --accent-purple-subtle: rgba(255, 255, 255, 0.04);

  --seq-accent: #FFFFFF;
  --seq-accent-dim: #888888;
  --seq-accent-glow: rgba(255, 255, 255, 0.15);

  /* Shadows — floating card depth */
  --shadow-panel: none;
  --shadow-panel-lg: none;
  --shadow-button: none;
  --shadow-button-hover: none;
  --shadow-knob: none;
  --shadow-knob-hover: none;
  --shadow-inset: none;

  /* Knob surface */
  --knob-body: #2e2e2e;
  --knob-body-highlight: #3b3b3b;
  --knob-rim: #3b3b3b;
  --knob-rim-highlight: #4a4a4a;

  /* Surface highlights — removed */
  --border-top-highlight: none;
  --surface-highlight: transparent;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-normal: 150ms ease;
  --transition-slow: 250ms ease;

  /* Typography: Plex Sans for UI, Plex Mono for values */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --text-micro: 10px;
  --text-tiny: 11px;
  --text-small: 12px;
  --text-base: 13px;
  --text-medium: 14px;
  --text-large: 16px;
  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.12em;
}

:root {
  /* Easing — mechanical snap + overshoot for physical control feel */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);   /* spring settle */
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);

  /* Durations */
  --dur-instant: 80ms;
  --dur-quick: 140ms;
  --dur-settle: 320ms;
  --dur-breathe: 4.5s;
}

/* ── Site additions (D12) ── */
:root {
  --warp: #FFF618;   /* Bergamot: Time warp, master line (app: layout.css, not theme.css) */
  --degen: #FFA9F1;  /* effect colour */
  --uv: #EE30FF;     /* effect colour: dots/lines only on --bg-surface */
}
/* Site type (D48): VCTR Mono for all text, overriding the app's Plex pair copied above */
:root {
  --font-sans: 'VCTR Mono', ui-monospace, Menlo, monospace;
  --font-mono: 'VCTR Mono', ui-monospace, Menlo, monospace;
}
/* Site background (D49): one step darker than the app's Charred scale (user, 2026-10-19) */
:root {
  --bg-primary: #141414;
  --bg-void: #0c0c0c;
  --gutter: #080808;
  --bg-surface: #1e1e1e;
}