/*
 * CODER Motion tokens. Three tiers (SOP section 8):
 *   Tier 1 primitive  raw values        --cm-*, --space-*, --radius-*, --type-*
 *   Tier 2 semantic   roles             --surface-*, --text-*, --line-*, --status-*
 *   Tier 3 component  parts             --button-*, --panel-*, --tag-*, --field-*
 * Names match the Figma "Foundations" file and the design bundle one to one.
 * Change brand values at Tier 1 only. No raw hex in components or templates.
 */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-var.woff2") format("woff2")}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/jetbrains-mono-var.woff2") format("woff2")}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600 700;font-display:swap;src:url("../fonts/montserrat-bold.woff2") format("woff2")}

/* ---------- Tier 1: primitives ---------- */
:root{
  /* Colour. Motion Black ~70%, Broadcast Mint ~18%, text ~6%, Signal Orange ~8%. */
  --cm-black:#151816;
  --cm-black-900:#0F1210;
  --cm-black-800:#1B1F1C;
  --cm-black-700:#222723;
  --cm-grey-800:#2B302B;
  --cm-grey-600:#6F776F;
  --cm-grey-400:#8A948A;
  --cm-white:#E7EDE5;
  --cm-mint:#C4D6C5;
  --cm-mint-600:#B2C6B4;
  --cm-mint-300:#D6E3D6;
  --cm-mint-ink:#4A564B;
  --cm-orange:#FF5A1F;
  --cm-orange-600:#E84A12;
  --cm-orange-700:#C93F0E;
  --cm-orange-800:#9A2F06;   /* orange text on mint. Not in the Figma file: orange-700 is 3.27:1 on mint, this is 5.7:1 */
  --cm-live:#3FE07A;
  --cm-screen:#050605;     /* dead LED screen */
  --cm-ridge:rgba(231,237,229,.04);
  --cm-scanline:rgba(196,214,197,.05);
  --cm-wall:#3A2A22;      /* brick wall sections in the screens diagram */
  --cm-wall-line:#4A362B;

  /* Space, 4px base */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;

  /* Shape. Square by default, radius is the exception. */
  --radius-0:0;--radius-1:2px;--radius-2:4px;--radius-pill:999px;
  --border-hair:1px;--border-strong:2px;

  /* Type families */
  --font-display:'Archivo','Arial Narrow',sans-serif;
  --font-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-logo:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --stretch-display:80%;
  --stretch-numeral:75%;

  /* Type scale. Display is sentence case, heavy, tight. Uppercase is for mono labels only. */
  --type-numeral:clamp(160px,22vw,360px);
  --type-display-xl:clamp(52px,7.4vw,124px);
  --type-display-page:clamp(52px,7vw,116px);   /* inner-page h1 */
  --type-display-l:clamp(40px,5vw,80px);
  --type-display-m:clamp(32px,3.4vw,52px);
  --type-display-s:30px;
  --type-display-xs:22px;
  --leading-display:.9;
  --tracking-display:-.025em;
  --weight-display:800;
  --type-body-l:20px;
  --type-body:16px;
  --type-body-s:14px;
  --leading-body:1.5;
  --weight-body:400;
  --weight-ui:500;
  --weight-strong:600;
  --type-label-l:13px;
  --type-label:12px;
  --type-label-s:11px;
  --type-label-xs:10px;
  --type-label-xl:14px;
  --tracking-label:.08em;
  --leading-label:1.3;

  /* Layout */
  --grid-columns:12;
  --grid-gutter:24px;
  --grid-margin:clamp(16px,4vw,56px);
  --grid-max:1920px;
  --container-max:1440px;   /* boxed sections: change here to resize them all */
  --container-pad:50px;     /* side padding around the boxed container; 32px tablet, 16px mobile below */
  --section-y:clamp(64px,10vw,144px);
  --section-pad:96px;       /* top/bottom padding of every section; 60px tablet, 48px mobile below */
  --section-gap:48px;       /* space between blocks inside a section; 40px tablet, 32px mobile below */
  --page-margin:max(clamp(16px,4vw,48px),50% - 672px);   /* content is 1344 max, centred */
  --header-h:72px;
  --grid-cell:80px;

  /* Motion. Linear for tickers and timelines, hard ease for mechanical UI. */
  --ease-mech:cubic-bezier(.7,0,.2,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --dur-snap:120ms;
  --dur-ui:200ms;
  --dur-slide:420ms;
  --dur-loop:15s;
  --dur-ticker:40s;
}

/* ---------- Tier 2: semantic ---------- */
:root{
  --surface-page:var(--cm-black);
  --surface-panel:var(--cm-black-800);
  --surface-panel-hover:var(--cm-black-700);
  --surface-well:var(--cm-black-900);
  --surface-data:var(--cm-mint);
  --surface-data-hover:var(--cm-mint-600);
  --surface-data-highlight:var(--cm-mint-300);
  --surface-signal:var(--cm-orange);
  --surface-signal-hover:var(--cm-orange-600);
  --surface-signal-pressed:var(--cm-orange-700);

  --text-primary:var(--cm-white);
  --text-secondary:var(--cm-grey-400);
  --text-disabled:var(--cm-grey-600);
  --text-on-data:var(--cm-black);
  --text-on-data-secondary:var(--cm-mint-ink);
  --text-on-signal:var(--cm-black);   /* never white on orange: it fails at 3.0:1 */
  --text-signal:var(--cm-orange);
  --text-signal-on-data:var(--cm-orange-800);

  --line-grid:var(--cm-grey-800);
  --line-strong:var(--cm-grey-600);
  --line-on-data:rgba(21,24,22,.22);
  --line-on-signal:rgba(21,24,22,.28);

  --status-live:var(--cm-orange);
  --status-available:var(--cm-mint);
  --status-booked:var(--cm-grey-600);
  --status-on-air:var(--cm-live);

  --focus-ring:0 0 0 2px var(--cm-black),0 0 0 4px var(--cm-orange);
  --shadow-panel:0 0 0 1px var(--cm-grey-800);
  --shadow-overlay:0 0 0 1px var(--cm-grey-800),0 24px 48px -16px rgba(0,0,0,.6);
  --glow-screen:0 0 0 1px rgba(231,237,229,.06),0 0 80px -10px rgba(196,214,197,.18);
  --glow-signal:0 0 40px -8px rgba(255,90,31,.55);
}

/* ---------- Tier 3: component ---------- */
:root{
  --button-radius:var(--radius-1);
  --button-pad-y:var(--space-4);
  --button-pad-x:var(--space-5);
  --button-primary-bg:var(--surface-signal);
  --button-primary-bg-hover:var(--surface-signal-hover);
  --button-primary-bg-pressed:var(--surface-signal-pressed);
  --button-primary-text:var(--text-on-signal);
  --button-ghost-border:var(--line-strong);
  --button-ghost-text:var(--text-primary);
  --button-h:48px;--button-h-sm:36px;--button-h-lg:60px;
  --button-pad-x-sm:14px;--button-pad-x-md:18px;
  --button-dark-bg:var(--cm-black);
  --button-dark-text:var(--text-primary);

  --panel-bg:var(--surface-panel);
  --panel-border:var(--line-grid);
  --panel-radius:var(--radius-0);
  --panel-pad:var(--space-5);

  --tag-radius:var(--radius-1);
  --tag-border:var(--line-grid);

  --field-bg:var(--surface-well);
  --field-border:var(--line-strong);
  --field-radius:var(--radius-1);
  --field-error:var(--cm-orange);

  --data-label:var(--text-on-data-secondary);
  --signal-label:var(--text-on-signal);
}

@media (max-width:1024px){:root{--container-pad:32px;--section-pad:60px;--section-gap:40px}}
@media (max-width:767px){:root{--container-pad:16px;--section-pad:48px;--section-gap:32px}}

@media (prefers-reduced-motion:reduce){
  :root{--dur-snap:0ms;--dur-ui:0ms;--dur-slide:0ms}
}