/* ============================================================
   PROOF — design tokens
   Palette values are the validated dataviz reference instance.
   Track hues = categorical slots 1-4, fixed order, never cycled.
   Validated on the adjacent pairlist, light + dark:
     light  worst CVD ΔE 9.1 · worst normal ΔE 22.9
     dark   worst CVD ΔE 8.4 · worst normal ΔE 19.8
   Light-mode aqua (2.74:1) and yellow (2.11:1) sit below 3:1 —
   the relief rule applies and is honoured by construction:
   every track swatch in this app ships a visible text label,
   and no track hue is ever used as text.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- surfaces ------------------------------------------ */
  --plane:            #f9f9f7;
  --surface:          #fcfcfb;
  --surface-raised:   #ffffff;
  --surface-sunken:   #f2f2ef;
  --surface-wash:     rgba(11, 11, 11, 0.035);
  --surface-wash-2:   rgba(11, 11, 11, 0.06);

  /* --- ink ----------------------------------------------- */
  --ink:              #0b0b0b;
  --ink-secondary:    #52514e;
  --ink-muted:        #898781;
  --ink-onfill:       #ffffff;

  /* --- structure ----------------------------------------- */
  --hairline:         #e1e0d9;
  --hairline-strong:  #c3c2b7;
  --ring:             rgba(11, 11, 11, 0.10);
  --shadow-rail:      0 0 0 1px var(--ring), -18px 0 46px -22px rgba(11,11,11,.28);
  --shadow-pop:       0 0 0 1px var(--ring), 0 12px 32px -12px rgba(11,11,11,.30);

  /* --- track hues (categorical slots 1-4) ---------------- */
  --t1: #2a78d6;   /* blue    — Jakafi XR        */
  --t2: #eb6834;   /* orange  — Opzelura EU AD   */
  --t3: #1baf7a;   /* aqua    — Monjuvi 1L DLBCL */
  --t4: #eda100;   /* yellow  — Povorcitinib HS  */

  --t1-wash: rgba(42, 120, 214, 0.10);
  --t2-wash: rgba(235, 104, 52, 0.10);
  --t3-wash: rgba(27, 175, 122, 0.10);
  --t4-wash: rgba(237, 161, 0, 0.10);

  /* --- status (fixed, never themed) ---------------------- */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --good-text:     #006300;
  --critical-text: #b02b2b;

  --good-wash:     rgba(12, 163, 12, 0.10);
  --warning-wash:  rgba(250, 178, 25, 0.14);
  --serious-wash:  rgba(236, 131, 90, 0.13);
  --critical-wash: rgba(208, 59, 59, 0.10);

  /* --- sequential ramp (blue, light→dark) ---------------- */
  --seq-100: #cde2fb; --seq-200: #9ec5f4; --seq-300: #6da7ec;
  --seq-400: #3987e5; --seq-500: #256abf; --seq-600: #184f95;
  --seq-700: #0d366b;

  /* --- claim (a number carrying provenance) -------------- */
  --claim-active: rgba(42, 120, 214, 0.13);

  /* --- ghost / prior state ------------------------------- */
  --ghost:      #b9b8b0;
  --ghost-wash: rgba(137, 135, 129, 0.16);

  /* --- the wall (Medical ↔ Commercial boundary) ---------- */
  --wall-ink:  #8a8880;
  --wall-line: rgba(11, 11, 11, 0.16);

  /* --- type ---------------------------------------------- */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-micro: 10.5px;
  --fs-xs:    11.5px;
  --fs-sm:    12.5px;
  --fs-base:  13.5px;
  --fs-md:    15px;
  --fs-lg:    18px;
  --fs-xl:    24px;
  --fs-hero:  48px;

  /* --- metrics ------------------------------------------- */
  --rail-w:      232px;
  --trust-w:     396px;
  --topbar-h:    52px;
  --spine-h:     64px;
  --r-sm: 3px; --r-md: 5px; --r-lg: 8px;

  /* --- motion -------------------------------------------- */
  --t-fast: 130ms;
  --t-base: 300ms;   /* recompute */
  --t-slow: 600ms;   /* trace reveal */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============ dark mode ============ */
/* Selected, not flipped: track hues are the same eight hues
   re-stepped for the dark surface. */

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { color-scheme: dark;
    --plane:          #0d0d0d;
    --surface:        #1a1a19;
    --surface-raised: #222221;
    --surface-sunken: #131312;
    --surface-wash:   rgba(255, 255, 255, 0.045);
    --surface-wash-2: rgba(255, 255, 255, 0.08);

    --ink:            #ffffff;
    --ink-secondary:  #c3c2b7;
    --ink-muted:      #898781;
    --ink-onfill:     #0b0b0b;

    --hairline:        #2c2c2a;
    --hairline-strong: #383835;
    --ring:            rgba(255, 255, 255, 0.10);
    --shadow-rail:     0 0 0 1px var(--ring), -18px 0 46px -22px rgba(0,0,0,.7);
    --shadow-pop:      0 0 0 1px var(--ring), 0 12px 32px -12px rgba(0,0,0,.75);

    --t1: #3987e5; --t2: #d95926; --t3: #199e70; --t4: #c98500;
    --t1-wash: rgba(57, 135, 229, 0.16);
    --t2-wash: rgba(217, 89, 38, 0.16);
    --t3-wash: rgba(25, 158, 112, 0.16);
    --t4-wash: rgba(201, 133, 0, 0.16);

    --good-text:     #0ca30c;
    --critical-text: #e46a6a;

    --claim-active: rgba(57, 135, 229, 0.20);
    --ghost:      #4e4e4a;
    --ghost-wash: rgba(137, 135, 129, 0.14);
    --wall-ink:   #7d7b74;
    --wall-line:  rgba(255, 255, 255, 0.16);
  }
}

:root[data-theme="dark"] { color-scheme: dark;
  --plane:          #0d0d0d;
  --surface:        #1a1a19;
  --surface-raised: #222221;
  --surface-sunken: #131312;
  --surface-wash:   rgba(255, 255, 255, 0.045);
  --surface-wash-2: rgba(255, 255, 255, 0.08);

  --ink:            #ffffff;
  --ink-secondary:  #c3c2b7;
  --ink-muted:      #898781;
  --ink-onfill:     #0b0b0b;

  --hairline:        #2c2c2a;
  --hairline-strong: #383835;
  --ring:            rgba(255, 255, 255, 0.10);
  --shadow-rail:     0 0 0 1px var(--ring), -18px 0 46px -22px rgba(0,0,0,.7);
  --shadow-pop:      0 0 0 1px var(--ring), 0 12px 32px -12px rgba(0,0,0,.75);

  --t1: #3987e5; --t2: #d95926; --t3: #199e70; --t4: #c98500;
  --t1-wash: rgba(57, 135, 229, 0.16);
  --t2-wash: rgba(217, 89, 38, 0.16);
  --t3-wash: rgba(25, 158, 112, 0.16);
  --t4-wash: rgba(201, 133, 0, 0.16);

  --good-text:     #0ca30c;
  --critical-text: #e46a6a;

  --claim-active: rgba(57, 135, 229, 0.20);
  --ghost:      #4e4e4a;
  --ghost-wash: rgba(137, 135, 129, 0.14);
  --wall-ink:   #7d7b74;
  --wall-line:  rgba(255, 255, 255, 0.16);
}