/* ============================================================================
   Project 118 — design tokens
   Direction 1a "Studio": warm bone + Lincoln green
   Schibsted Grotesk 500 / -3.5% track  ·  IBM Plex Mono 400 / +16% labels
   ========================================================================= */

@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/schibsted-grotesk-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('../fonts/schibsted-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  /* ---- palette, exactly as specified ---- */
  --studio:      #F7F5F2;   /* the white studio ground */
  --sheet:       #FFFFFF;   /* panels and record sheets */
  --secondary:   #6B6963;   /* secondary type */
  --ink:         #1B1A18;   /* primary type */
  --ink-soft:    #4A4844;   /* tertiary type, captions */
  --green:       #24402C;   /* Lincoln green — identity mark + active state ONLY */

  /* derived neutrals, kept within the warm cast */
  --rule:        #E4E1DB;
  --rule-soft:   #EDEAE5;
  --fill:        #F0EEE9;
  --shadow:      rgba(27,26,24,.08);

  /* ---- status accents: OKLCH(0.58 0.09 H) at 25 / 70 / 148 / 258 ---- */
  --a-replace:   oklch(0.58 0.09 25);
  --a-repair:    oklch(0.58 0.09 70);
  --a-complete:  oklch(0.58 0.09 148);
  --a-reference: oklch(0.58 0.09 258);
  /* hex fallbacks for engines without oklch() */
  --a-replace-x:   #9B5A52;
  --a-repair-x:    #8A6B3C;
  --a-complete-x:  #4C7256;
  --a-reference-x: #566A8C;

  /* ---- type ---- */
  --sans: 'Schibsted Grotesk', ui-sans-serif, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Montserrat', 'Schibsted Grotesk', ui-sans-serif, Arial, sans-serif;

  --track-display: -0.035em;   /* -3.5% */
  --track-label:    0.16em;    /* +16% */

  --t-display: 500 clamp(38px, 5.2vw, 62px)/0.88 var(--sans);
  --t-h1:      500 clamp(22px, 2.4vw, 30px)/1.12 var(--sans);
  --t-h2:      500 17px/1.2 var(--sans);
  --t-body:    400 14px/1.55 var(--sans);
  --t-small:   400 12.5px/1.5 var(--sans);
  --t-label:   500 9.5px/1 var(--mono);
  --t-mono:    400 11.5px/1.45 var(--mono);

  /* ---- motion: UI 300-700ms, vehicle 700-1400ms, ease in/out, no bounce ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-ui: 420ms;
  --t-veh: 1000ms;

  /* ---- layout ---- */
  --gut: 34px;
  --sheet-w: 380px;
  --radius: 2px;
}

@media (max-width: 820px){
  :root{ --gut: 20px; --sheet-w: 100%; }
}

@media (prefers-reduced-motion: reduce){
  :root{ --t-ui: 1ms; --t-veh: 1ms; }
  *,*::before,*::after{ animation-duration:1ms !important; transition-duration:120ms !important }
}

/* status ladder colour assignment — colour only in status context */
/* Colour follows the DECISION, which is the axis a person is actually tracking.
   The old classes mixed decisions and workflow stages in one list — RETAIN,
   REPAIR, REPLACE, IN PROGRESS, COMPLETE — which meant a part could not be both
   'replace' and 'in progress' and be coloured for either. */
.st-retain      { --st: var(--a-reference); --st-x: var(--a-reference-x) }
.st-repair      { --st: var(--a-repair);    --st-x: var(--a-repair-x) }
.st-replace     { --st: var(--a-replace);   --st-x: var(--a-replace-x) }
.st-upgrade     { --st: var(--a-repair);    --st-x: var(--a-repair-x) }
.st-undecided   { --st: var(--secondary);   --st-x: var(--secondary) }
/* kept so anything still emitting the old names does not fall through to black */
.st-RETAIN      { --st: var(--a-reference); --st-x: var(--a-reference-x) }
.st-REPAIR      { --st: var(--a-repair);    --st-x: var(--a-repair-x) }
.st-REPLACE     { --st: var(--a-replace);   --st-x: var(--a-replace-x) }
.st-COMPLETE    { --st: var(--a-complete);  --st-x: var(--a-complete-x) }