/* VLPremier Pro · approved design system "Midnight Ice" on the Concept A layout.
   DESIGN PROTOTYPE ONLY, not production. Source of truth: ../../../DESIGN_APPROVAL_RECORD.md.
   Every ratio is measured in ../../DESIGN_SYSTEM.md. No orange, no cyan anywhere. */
:root {
  color-scheme: dark;

  /* ---- colour: approval record (exact) ---- */
  --bg: #090D17;            /* page */
  --surface: #111A2B;       /* cards, solid nav, sheets */
  --surface-2: #1A263D;     /* raised panels, Pro card, active toggle */
  --line: #26324A;          /* decorative hairlines only */
  --line-strong: #5C6B86;   /* control borders: 3.61 on bg, 3.23 on surface (not on surface-2: 2.81) */
  --text: #E6F0FF;
  --muted: #9AA8C0;
  --primary: #E6F0FF;       /* was --tally: primary buttons, ribbon, plan highlight, REC dot */
  --primary-hover: #FFFFFF;
  --primary-ink: #090D17;   /* text on --primary: 16.89 */
  --accent: #2D8CEB;        /* was --cyan: playhead, focus rings, links, timecode */
  --accent-bright: #4FA3F5; /* third headline line, large emphasis, accent text on surface-2 */
  --danger: #FF6B6B;
  --meter-clip: #FF5A52;    /* red top of loudness meters only */

  /* ---- colour: derived for status (not in the record; the app's own colours, measured as 10% chips) ---- */
  --ok: #29D698;
  --warn: #FFC020;
  --info: var(--accent-bright);

  /* ---- colour: the app's own UI colours, inside editor mockups only ---- */
  --clip-v: #729ACC;
  --clip-a: #29D698;
  --key: #FFC020;
  --panel: #1F1F1F;
  --panel-2: #2B2B2B;
  --panel-bar: #171717;
  --panel-line: #2F2F2F;
  --panel-text: #B9B9B9;
  --panel-dim: #8F8F8F;

  /* ---- colour: blue hour (illustrations, drawn footage) ---- */
  --sky-1: #0B1222;
  --sky-2: #1A263D;
  --sky-3: #3C6AA8;
  --sky-4: #9EC2EE;
  --light: #E6F0FF;
  --ridge-1: #2A3C5C;
  --ridge-2: #18253C;
  --ridge-3: #0A0F1A;

  /* ---- type ---- */
  --font-display: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;   /* 2026-10-29: was the stretched Archivo */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-hero: clamp(40px, 4.5vw, 66px);     /* hero h1, 116% width, 820 */
  --fs-h1: clamp(40px, 5vw, 72px);         /* page h1, 120% width */
  --fs-display: clamp(36px, 5.4vw, 80px);  /* final CTA, 125% width */
  --fs-h2: clamp(32px, 4.2vw, 56px);       /* section h2, 118% width */
  --fs-h3-lg: clamp(28px, 3vw, 40px);      /* feature h3 */
  --fs-h3: clamp(22px, 2.2vw, 28px);       /* card h3 */
  --fs-count: clamp(64px, 8vw, 112px);     /* big numbers, 125% width */
  --fs-lede: 19px;
  --fs-body: 17px;
  --fs-sm: 15px;
  --fs-label: 13px;   /* mono eyebrows, spec labels */
  --fs-meta: 12px;    /* mono chips, meta */
  --fs-micro: 11px;   /* functional floor: rulers, mockup UI */
  --lh-body: 1.6;
  --lh-tight: 1.04;

  /* ---- space: 4px base ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-18: 72px; --s-24: 96px; --s-34: 136px;
  --section-y: clamp(80px, 10vw, 136px);
  --feature-gap: clamp(96px, 11vw, 152px);
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --nav-h: 64px;
  --top-h: 64px;   /* account / admin top bar */
  --side: 248px;   /* account / admin sidebar */

  /* ---- shape ---- */
  --r-ctl: 6px;    /* buttons, inputs, chips, ribbon. No pills. */
  --r-panel: 10px; /* cards, panels, editor window, dialogs */
  --r-clip: 3px;   /* clip blocks inside mockups */

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-tap: 150ms;
  --t-fast: 200ms;
  --t-toggle: 220ms;
  --t-drawer: 240ms;
  --t-sheet: 280ms;
  --t-reveal: 500ms;
  --t-hero: 600ms;

  /* ---- layers (dialogs use the browser top layer and need no z-index) ---- */
  --z-sticky: 10;
  --z-nav: 60;
  --z-toast: 80;
  --z-skip: 100;
}
@media (max-width: 640px) {
  :root { --nav-h: 60px; --fs-lede: 17px; }
}