/* ==========================================================================
   Orthol Intel — design tokens
   --------------------------------------------------------------------------
   Every value here comes from the 2026 brand guidelines, v1.0. Nothing in the
   rest of the stylesheet may hard-code a colour or a type size.

   Palette ratio is 60 Paper · 30 Ink · 10 Red. Red is not a decorative colour:
   the guide reserves it for data — charts, scan overlays, live states and links
   on dark — and it never touches the wordmark. Section labels and eyebrows are
   therefore Ink or Slate, not red.
   ========================================================================== */

:root {
  /* --- brand ----------------------------------------------------------- */
  --ink:            #0f172a;  /* Ink — wordmark, headlines, dark surfaces */
  --paper:          #ffffff;  /* Paper — the default ground               */
  --accent:         #e11d2e;  /* Scan Red — data only, never the wordmark */

  /* --- slate ramp ------------------------------------------------------- */
  --slate-600:      #475569;  /* body copy                               */
  --slate-400:      #94a3b8;  /* captions, labels, meta                  */
  --slate-200:      #e2e8f0;  /* borders                                 */
  --slate-50:       #f8fafc;  /* panels                                  */

  /* Semantic aliases, so components read as intent rather than as swatches. */
  --ink-body:       var(--slate-600);
  --ink-muted:      var(--slate-400);
  --ink-faint:      #cbd5e1;  /* text on Ink surfaces                    */

  /* --- accent variants -------------------------------------------------- */
  --accent-bright:  #ff3244;  /* overlay annotations on imaging          */
  --accent-soft:    #fca5ad;  /* accent text on Ink                      */
  --accent-deep:    #a3121f;  /* accent text on tinted surfaces          */

  /* --- clinical status -------------------------------------------------- */
  --status-review:  var(--accent);
  --status-mild:    #b45309;
  --status-ok:      #047857;
  --status-info:    var(--slate-600);

  /* --- surfaces --------------------------------------------------------- */
  --wash:           var(--slate-50);
  --panel:          var(--slate-50);
  --imaging:        #060a14;  /* radiograph viewport                     */
  --tint-alert:     #fef2f3;
  --tint-info:      #f1f5f9;

  /* --- lines ------------------------------------------------------------ */
  --line:           var(--slate-200);
  --line-strong:    #cbd5e1;
  --line-soft:      #eef2f7;
  --line-alert:     #fbcdd2;
  --line-info:      var(--slate-200);
  --line-control:   #cbd5e1;

  /* --- type -------------------------------------------------------------
     Poppins for display, the wordmark and numbers that lead.
     Instrument Sans for body copy, UI labels, tables and captions.
     The guide specifies no monospace, so labels that used one are now Poppins
     Bold caps and data uses tabular figures instead. */
  --font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label:   'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* Tracking, from the guide: H1 −2%, labels +30%. */
  --track-display: -.02em;
  --track-label:   .3em;

  /* Fluid display scale. min = 360px viewport, max = 1440px viewport. */
  --t-hero:    clamp(2.5rem,  1.10rem + 6.20vw, 5rem);     /* 40 → 80  */
  --t-display: clamp(2.25rem, 1.36rem + 3.95vw, 3.75rem);  /* 36 → 60  */
  --t-title:   clamp(1.95rem, 1.45rem + 2.20vw, 2.875rem); /* 31 → 46  */
  --t-section: clamp(1.75rem, 1.36rem + 1.75vw, 2.75rem);  /* 28 → 44  */
  --t-card:    clamp(1.25rem, 1.13rem + 0.53vw, 1.5rem);   /* 20 → 24  */
  --t-sub:     1.1875rem;                                   /* 19       */

  --t-lead:    clamp(0.95rem, 0.90rem + 0.22vw, 1.0625rem); /* 15 → 17 */
  --t-body:    0.875rem;
  --t-meta:    0.8125rem;
  --t-fine:    0.75rem;
  --t-eyebrow: 0.71875rem;

  /* --- rhythm ----------------------------------------------------------- */
  /* Page inset. Wider than the old 56px ceiling: on a large monitor the eye
     should land on a column in the middle of the screen, not track edge to
     edge. 20px on a phone, 72px from ~1440px up. */
  --gutter:  clamp(1.25rem, 0.17rem + 4.81vw, 4.5rem);  /* 20 → 72 page inset */
  --band:    clamp(3rem,   1.66rem + 5.92vw, 5.5rem);   /* 48 → 88 band pad   */
  --band-sm: clamp(2.5rem, 1.61rem + 3.95vw, 5rem);     /* 40 → 80            */

  --header-h: 64px;
  --shell:    1320px;   /* measured line length, not screen width */

  /* --- elevation --------------------------------------------------------- */
  /* Shadows tinted with Ink rather than a warm black, so they read as the same
     family as the surfaces they sit on. */
  --lift-card:  0 2px 8px rgba(15, 23, 42, .07);
  --lift-panel: 0 24px 60px rgba(15, 23, 42, .10);
  --lift-app:   0 24px 70px rgba(15, 23, 42, .12);

  /* --- motion ------------------------------------------------------------ */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  260ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01ms; }
}