/* LUMEN tokens v1.0 (+ extended primitives for the HTML template) — primitives → semantic → component.
   Themes: [data-theme="light"] (default, Clinical Light), [data-theme="dark"] (OR Dark).
   Brand theming: override the 8 --brand-* tokens only (see [data-brand="pulse"]). */

:root {
  /* ── Primitives: graphite ── */
  --graphite-0: #FFFFFF;
  --graphite-25: #FAFBF9;
  --graphite-50: #F5F6F3;
  --graphite-100: #ECEEEA;
  --graphite-150: #E1E4E0;
  --graphite-200: #D0D5D1;
  --graphite-300: #AEB6B3;
  --graphite-400: #87918F;
  --graphite-500: #5C666B;
  --graphite-600: #3A4449;
  --graphite-700: #263035;
  --graphite-800: #172024;
  --graphite-850: #121B1F;
  --graphite-900: #0A1216;
  --graphite-950: #0B1215;
  --graphite-mist: #E8ECEA;

  /* ── Primitives: extended neutrals (used by kit + demo pages) ── */
  --graphite-750: #1E2A2F;   /* strong body copy on light canvas */
  --graphite-650: #6B7774;
  --mist-200: #C9D1CE;       /* secondary text on dark surfaces */
  --mist-300: #B4BEBB;
  --mist-400: #9AA6A3;       /* tertiary text / labels on dark */

  /* ── Primitives: sage (illustration hatching, device drawings) ── */
  --sage-100: #E6EBE8;
  --sage-150: #DDE4E0;
  --sage-200: #D5E2DC;
  --sage-250: #CAD9D2;
  --sage-300: #BFD1C8;
  --sage-800: #2C4A40;

  /* ── Primitives: sand (warm patient-facing surfaces, D08) ── */
  --sand-25: #FBFAF7;
  --sand-50: #F6F4EF;
  --sand-100: #EFE9E1;
  --sand-200: #E7E0D6;
  --sand-700: #5A4A38;
  --sand-800: #3A2F24;
  --sand-900: #2B2520;
  --sand-950: #1F1A14;

  /* ── Alpha lines: ink = graphite-900 on light, mist = graphite-mist on dark ── */
  --ink-a04: rgba(10,18,22,.045);
  --ink-a07: rgba(10,18,22,.07);
  --ink-a08: rgba(10,18,22,.08);
  --ink-a10: rgba(10,18,22,.1);
  --ink-a12: rgba(10,18,22,.12);
  --ink-a14: rgba(10,18,22,.14);
  --ink-a16: rgba(10,18,22,.16);
  --ink-a20: rgba(10,18,22,.2);
  --ink-a24: rgba(10,18,22,.24);
  --ink-a30: rgba(10,18,22,.3);
  --ink-a50: rgba(10,18,22,.5);
  --mist-a06: rgba(232,236,234,.06);
  --mist-a10: rgba(232,236,234,.1);
  --mist-a12: rgba(232,236,234,.12);
  --mist-a20: rgba(232,236,234,.2);
  --mist-a30: rgba(232,236,234,.3);

  /* ── Primitives: scrub ── */
  --scrub-50: #E8F5F0;
  --scrub-100: #CDEBDF;
  --scrub-200: #9DD8C2;
  --scrub-300: #52E0A8; /* Scrub Glow */
  --scrub-400: #22B886;
  --scrub-500: #0E9470;
  --scrub-600: #0A7A5F; /* Scrub (text-safe) */
  --scrub-700: #086650;
  --scrub-800: #07503F;
  --scrub-900: #053A2E;

  /* ── Primitives: clinical alarm (IEC 60601-1-8 inspired) + success ── */
  --red-50: #FCEBE9;   --red-500: #D93A2F;    --red-600: #B8261C;    --red-300: #FF7A6E;
  --yellow-50: #FFF5D6; --yellow-400: #F2B705; --yellow-700: #7A5200; --yellow-300: #FFD34D;
  --cyan-50: #E4F4FA;  --cyan-400: #3BB7D9;   --cyan-700: #0A6280;   --cyan-300: #6FD2EE;
  --leaf-50: #EEF6E6;  --leaf-500: #4E8F22;   --leaf-700: #3B6E17;   --leaf-300: #9ED672;

  /* ── Primitives: indigo (Veyra Pulse brand demo) ── */
  --indigo-300: #9AA8FF;
  --indigo-600: #3D4FD1;
  --indigo-700: #2F3FB3;

  /* ── Data viz (colorblind-safe, Okabe–Ito derived) ── */
  --viz-1: #1F6FB2; --viz-2: #E08A00; --viz-3: #3FA7D6; --viz-4: #117A65;
  --viz-5: #C9B200; --viz-6: #C3531A; --viz-7: #B0628F; --viz-8: #4A5358;
  --viz-seq-1: #E8F5F0; --viz-seq-2: #BFE3D4; --viz-seq-3: #8FCDB5; --viz-seq-4: #5AB393;
  --viz-seq-5: #2A9373; --viz-seq-6: #0A7A5F; --viz-seq-7: #053A2E;
  --viz-div-neg-3: #1F5E99; --viz-div-neg-2: #5B93C7; --viz-div-neg-1: #A9C8E3; --viz-div-0: #EEEFEC;
  --viz-div-pos-1: #F2C68C; --viz-div-pos-2: #E0923A; --viz-div-pos-3: #B0600F;

  /* ── Type ── */
  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --text-display-xxl: clamp(56px, 1.5rem + 8.4vw, 148px);
  --text-display-xl: clamp(48px, 1.4rem + 6vw, 112px);
  --text-display-l: clamp(40px, 1.4rem + 4vw, 84px);
  --text-h1: clamp(34px, 1.5rem + 2.6vw, 60px);
  --text-h2: clamp(28px, 1.35rem + 1.5vw, 44px);
  --text-h3: clamp(22px, 1.1rem + .9vw, 32px);
  --text-h4: clamp(19px, 1rem + .45vw, 24px);
  --text-lead: clamp(18px, 1rem + .35vw, 22px);
  --text-body-patient: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12px;

  /* ── Space (4-pt) ── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-30: 120px; --space-40: 160px;
  --section-tight: var(--space-16); --section: var(--space-24); --section-loose: var(--space-40);

  /* ── Radius, lines, elevation ── */
  --radius-s: 4px; --radius-m: 8px; --radius-l: 16px; --radius-pill: 999px;
  --hairline: 1px;
  --elevation-1: 0 1px 2px rgba(10,18,22,.05);
  --elevation-2: 0 8px 24px -12px rgba(10,18,22,.16);
  --elevation-3: 0 18px 40px -16px rgba(10,18,22,.22);

  /* ── Motion (resting pulse 60–72 bpm) ── */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 560ms; --dur-5: 830ms;
  --ease-systole: cubic-bezier(.3, 0, .1, 1);
  --ease-diastole: cubic-bezier(.16, 1, .3, 1);
}

/* ── Semantic: Clinical Light (default) ── */
:root, [data-theme="light"] {
  --brand-action: var(--scrub-600);
  --brand-action-hover: var(--scrub-700);
  --brand-action-fg: var(--graphite-0);
  --brand-glow: var(--scrub-300);
  --brand-focus: var(--graphite-900);
  --brand-selected: var(--scrub-600);
  --brand-link: var(--scrub-600);
  --brand-data-primary: var(--scrub-600);

  --color-canvas: var(--graphite-50);
  --color-surface: var(--graphite-0);
  --color-surface-sunken: var(--graphite-25);
  --color-text: var(--graphite-900);
  --color-text-secondary: var(--graphite-600);
  --color-text-tertiary: var(--graphite-500);
  --color-hairline: rgba(10,18,22,.12);
  --color-hairline-strong: rgba(10,18,22,.24);
  --color-overlay: rgba(245,246,243,.72); /* sterile glass, with backdrop-filter: blur(20px) */

  --color-action: var(--brand-action);
  --color-action-hover: var(--brand-action-hover);
  --color-action-fg: var(--brand-action-fg);
  --color-focus: var(--brand-focus);
  --color-link: var(--brand-link);

  --status-high-fg: var(--red-600);    --status-high-bg: var(--red-50);    --status-high-fill: var(--red-500);
  --status-medium-fg: var(--yellow-700); --status-medium-bg: var(--yellow-50); --status-medium-fill: var(--yellow-400);
  --status-low-fg: var(--cyan-700);    --status-low-bg: var(--cyan-50);    --status-low-fill: var(--cyan-400);
  --status-success-fg: var(--leaf-700); --status-success-bg: var(--leaf-50); --status-success-fill: var(--leaf-500);
}

/* ── Semantic: OR Dark ── */
[data-theme="dark"] {
  --brand-action: var(--scrub-300);
  --brand-action-hover: #7BEBC0;
  --brand-action-fg: var(--graphite-900);
  --brand-focus: var(--scrub-300);
  --brand-selected: var(--scrub-300);
  --brand-link: var(--scrub-300);
  --brand-data-primary: var(--scrub-300);

  --color-canvas: var(--graphite-950);
  --color-surface: var(--graphite-850);
  --color-surface-sunken: var(--graphite-800);
  --color-text: var(--graphite-mist);
  --color-text-secondary: #B4BEBB;
  --color-text-tertiary: #9AA6A3;
  --color-hairline: rgba(232,236,234,.12);
  --color-hairline-strong: rgba(232,236,234,.28);
  --color-overlay: rgba(18,27,31,.72);

  --status-high-fg: var(--red-300);    --status-high-bg: rgba(255,122,110,.12);
  --status-medium-fg: var(--yellow-300); --status-medium-bg: rgba(255,211,77,.12);
  --status-low-fg: var(--cyan-300);    --status-low-bg: rgba(111,210,238,.12);
  --status-success-fg: var(--leaf-300); --status-success-bg: rgba(158,214,114,.12);
}

/* ── Brand override example: Veyra Pulse (8 tokens only) ── */
[data-brand="pulse"] {
  --brand-action: var(--indigo-600);
  --brand-action-hover: var(--indigo-700);
  --brand-action-fg: var(--graphite-0);
  --brand-glow: var(--indigo-300);
  --brand-focus: var(--graphite-900);
  --brand-selected: var(--indigo-600);
  --brand-link: var(--indigo-600);
  --brand-data-primary: var(--indigo-600);
}

/* ── Component tokens ── */
:root {
  --button-primary-bg: var(--color-action);
  --button-primary-bg-hover: var(--color-action-hover);
  --button-primary-fg: var(--color-action-fg);
  --button-height-s: 40px; --button-height-m: 48px; --button-height-l: 56px;
  --button-radius: var(--radius-pill);
  --input-height: 48px; --input-radius: var(--radius-m); --input-border: var(--color-hairline-strong);
  --card-radius: var(--radius-l); --card-border: var(--color-hairline);
  --citation-radius: var(--radius-s);
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
}

/* ── Re-resolve aliases where a theme or brand is switched ──
   Custom properties are resolved on the element that declares them, so
   aliases declared on :root would keep the root values below a
   [data-theme] / [data-brand] container. Re-declaring them here makes a
   theme or brand switch work on any element (<body>, a section, a card). */
[data-theme],
[data-brand] {
  --color-action: var(--brand-action);
  --color-action-hover: var(--brand-action-hover);
  --color-action-fg: var(--brand-action-fg);
  --color-focus: var(--brand-focus);
  --color-link: var(--brand-link);

  --button-primary-bg: var(--color-action);
  --button-primary-bg-hover: var(--color-action-hover);
  --button-primary-fg: var(--color-action-fg);
  --input-border: var(--color-hairline-strong);
  --card-border: var(--color-hairline);
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; }
}