/* ==========================================================================
   TELIUM HEALTH — DESIGN TOKENS  (W0 · source of truth for W1–W3)
   Generated from tokens.dtcg.json · see DESIGN_TELIUM.md
   Consume on every surface. No hard-coded hex. No off-scale spacing.
   ========================================================================== */

:root {
  /* ---- BRAND · navy (locked anchor #0c2740) ---------------------------- */
  --navy-900: #081b2e;
  --navy-800: #0c2740;   /* THE brand navy */
  --navy-700: #103a66;
  --navy-600: #1a4d80;
  --navy-500: #2a6699;

  /* ---- BRAND · teal (locked anchor #0f7c6c — MUTED, never cyan) -------- */
  --teal-700: #0a5a4e;
  --teal-600: #0f7c6c;   /* THE accent */
  --teal-500: #149384;
  --teal-300: #5cae9e;   /* muted teal for SMALL text/marks on navy (AA >=4.5; not cyan) */
  --teal-100: #d6ece8;

  /* ---- NEUTRALS · editorial (warm — marketing + deck) ----------------- */
  --paper:     #ffffff;
  --canvas:    #f7f4ef;  /* warm institutional paper — the signature */
  --canvas-2:  #efe9df;
  --line-warm: #e3dccf;

  /* ---- NEUTRALS · cool (data/app — the demo) -------------------------- */
  --bg:    #f6f8fb;
  --bg-2:  #eef3f8;
  --line:  #e3e8ef;
  --line-2:#cfd8e3;

  /* ---- INK ------------------------------------------------------------ */
  --ink:           #16202c;
  --ink-2:         #283443;
  --ink-muted:     #5a6675;
  --on-navy:       #eaf1f8;
  --on-navy-muted: #9fc0dd;

  /* ---- DATA + SEMANTIC ------------------------------------------------ */
  --data-clay:        #b07d2b;  /* the data accent */
  --data-clay-bright: #c4860a;
  --warn-ink:         #8a5e08;  /* darker amber for SMALL warn text (AA >=4.5 on warn wash) */
  --chart-1: #103a66;
  --chart-2: #0f7c6c;
  --chart-3: #b07d2b;
  --chart-4: #1a4d80;
  --positive: #0f7c6c;
  --risk:     #a23b3b;
  --warn:     #c4860a;

  /* ---- TYPE · families ----------------------------------------------- */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* ---- TYPE · modular scale (ratio ≈ 1.25 · base 17px) --------------- */
  --fs-2xs:  0.75rem;     /* 12 — mono labels, footnotes, citations */
  --fs-xs:   0.875rem;    /* 14 — captions, table cells */
  --fs-sm:   0.9375rem;   /* 15 — secondary body */
  --fs-base: 1.0625rem;   /* 17 — body */
  --fs-md:   1.1875rem;   /* 19 — lead-in */
  --fs-lg:   1.4375rem;   /* 23 — h4 / large lead */
  --fs-xl:   1.8125rem;   /* 29 — h3 */
  --fs-2xl:  2.375rem;    /* 38 — h2 */
  --fs-3xl:  3.125rem;    /* 50 — section display */
  --fs-4xl:  3.9375rem;   /* 63 — hero h1 */
  --fs-5xl:  4.75rem;     /* 76 — XL hero */

  /* fluid display heads */
  --fs-hero: clamp(2.9rem, 1.7rem + 5vw, 4.9rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4.2vw, 3.9375rem);
  --fs-h2: clamp(1.9rem, 1.45rem + 2.1vw, 2.375rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 1vw, 1.8125rem);

  /* ---- TYPE · weights / leading / tracking --------------------------- */
  --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;
  --lh-tight: 1.1;
  --lh-snug:  1.16;
  --lh-body:  1.62;
  --lh-label: 1.3;
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-label:   0.16em;
  --measure: 68ch;
  --measure-lead: 46ch;

  /* ---- SPACING (4px base · non-uniform rhythm) ----------------------- */
  --sp-0: 0;
  --sp-1: 0.25rem;   /* 4  */
  --sp-2: 0.5rem;    /* 8  */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */
  --sp-9: 6rem;      /* 96 */
  --sp-10: 8rem;     /* 128 */
  --sp-11: 10rem;    /* 160 */

  /* ---- LAYOUT -------------------------------------------------------- */
  --container:        1200px;
  --container-doc:    1000px;
  --container-narrow: 760px;
  --gutter:    clamp(1.5rem, 5vw, 4.5rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* ---- RADII (restrained) ------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- ELEVATION (hairline-first) ----------------------------------- */
  --shadow-1: 0 1px 2px rgba(8,27,46,.06), 0 1px 3px rgba(8,27,46,.04);
  --shadow-2: 0 4px 16px rgba(8,27,46,.10);
  --shadow-page: 0 1px 60px rgba(12,39,46,.08);
  --border-hair: 1px;
  --rule-accent: 2px;

  /* ---- MOTION (out-restrain the tier) ------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);  /* family reveal/spring easing */

  /* ---- SURFACE ROLES (semantic aliases) ----------------------------- */
  --surface-page:    var(--canvas);   /* default editorial light section */
  --surface-raised:  var(--paper);    /* cards, documents */
  --surface-inverse: var(--navy-800); /* dark proof sections, footer */
  --surface-app:     var(--bg);       /* the W3 demo */
  --text-default:    var(--ink);
  --text-body:       var(--ink-2);
  --text-muted:      var(--ink-muted);
  --accent:          var(--teal-600);
  --accent-strong:   var(--teal-700);
  --rule:            var(--line-warm);
  --rule-cool:       var(--line);
  --focus-ring:      0 0 0 3px rgba(15,124,108,.45);
}

/* ==========================================================================
   ACCESSIBILITY — motion + focus (gate-required)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}