/* ============================================================
   HAPTO · CARE - DESIGN TOKENS  (doctor / clinic vertical)
   ============================================================
   Single source of truth for the design system.
   Two-tier token architecture:
     1. Primitives - raw values, theme-agnostic
     2. Semantics - role-based, theme-switchable
   Consumers should ONLY reference semantic tokens.
   Mirrors ../brand/design-tokens.json (DTCG format).

   Hapto (consumer) = playful coral/violet. Hapto for doctors is the
   CLINICAL sibling: calm, trustworthy, premium - but still warm and
   human, never sterile. LIGHT is the default (built for doctors and
   OPD staff working in bright clinics for long shifts).

   Direction (winner of 20 evals - see ../brand/brand.html):
     "Calm Clinic / Vital Teal"
     · Trust Teal       - primary. Calm clinical confidence.
     · Hapto Violet     - accent. Intelligence / the AI brain.
     · Care Coral       - human warmth (sparing, ≤8%). Never a primary
                          action: in clinical UIs red/coral = alert.
     · Vital Green      - outcomes / money & time saved / "good".
   Warm-cool neutrals with a whisper of mint so the canvas reads
   clean + calm, not cold. Soft, low, cool-tinted elevation.
   ============================================================ */

/* ---------- LAYER 1: PRIMITIVES --------------------------- */

:root {
  /* Brand · Trust Teal (primary actions, brand hue, active states) */
  --teal-50:  #E8FBF6;
  --teal-100: #C7F3E8;
  --teal-200: #91E6D4;
  --teal-300: #4FD3BB;
  --teal-400: #14BBA4;   /* ★ bright brand hue (gradients, glows, decoration) */
  --teal-500: #0E9E8E;   /* primary surfaces / fills */
  --teal-600: #0B8377;   /* ★ PRIMARY action - AA white-text safe (~4.6:1) */
  --teal-700: #0A6A60;
  --teal-800: #0A534B;
  --teal-900: #08403A;

  /* Accent · Hapto Violet (AI / intelligence, secondary accents, links) */
  --violet-50:  #F1EEFF;
  --violet-100: #DCD6FB;
  --violet-200: #BDB2F6;
  --violet-300: #998CF0;
  --violet-400: #6C5CE7;   /* ★ ACCENT hue - the "AI brain" */
  --violet-500: #5544D4;
  --violet-600: #4334B0;
  --violet-700: #33288A;
  --violet-800: #231C60;
  --violet-900: #16113C;

  /* Care · Coral (human warmth, empathy - sparing ≤8%, never a primary action) */
  --coral-50:  #FFF1F4;
  --coral-100: #FFD9E1;
  --coral-200: #FFB3C3;
  --coral-300: #FF87A0;
  --coral-400: #FF5C7A;   /* ★ CARE accent (softened from Hapto coral so it reads warm, not alarm) */
  --coral-500: #ED2E54;
  --coral-600: #C81E42;
  --coral-700: #9C1632;

  /* Vital · Green (outcomes, money/time saved, "good", growth) */
  --green-50:  #E7F8EF;
  --green-100: #C5EFD8;
  --green-200: #93E1B9;
  --green-300: #57CE96;
  --green-400: #22B877;   /* ★ vital hue (savings glow, growth) */
  --green-500: #15A06B;
  --green-600: #0E8255;   /* AA-safe ROI text on white */
  --green-700: #0C6644;
  --green-800: #0A5037;
  --green-900: #073C29;

  /* Neutrals - clean cool-slate with a whisper of mint (calm, premium, human) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F4F9F8;   /* warm-clean canvas */
  --neutral-100: #EAF2F1;
  --neutral-200: #DCE7E5;
  --neutral-300: #C3D2CF;
  --neutral-400: #93A5A2;
  --neutral-500: #647571;
  --neutral-600: #45524F;
  --neutral-700: #2C3735;
  --neutral-800: #1A2422;   /* raised dark surface */
  --neutral-900: #121A18;   /* dark surface */
  --neutral-950: #0C1413;   /* ink */
  --neutral-1000:#060B0A;

  /* Semantic hues, 5-tier each */
  /* Info (informational, calm) */
  --info-subtle:  #122446;
  --info-muted:   #2C5BC0;
  --info-default: #3B82F6;
  --info-strong:  #7DA9F8;
  --info-intense: #C5DBFB;

  /* OK (success, healthy, confirmed) - shares the vital-green family */
  --ok-subtle:    #08291C;
  --ok-muted:     #0E8255;
  --ok-default:   #15A06B;
  --ok-strong:    #57CE96;
  --ok-intense:   #AEEBCD;

  /* Warn (caution, due soon, review) */
  --warn-subtle:  #2E2206;
  --warn-muted:   #A6740F;
  --warn-default: #F5A623;
  --warn-strong:  #F8C167;
  --warn-intense: #FBDFA9;

  /* Crit (error, failed, urgent) - reserved; never a brand colour */
  --crit-subtle:  #2E0F12;
  --crit-muted:   #A1282C;
  --crit-default: #E5484D;
  --crit-strong:  #EF8488;
  --crit-intense: #F7BFC1;

  /* ---------- TYPOGRAPHY PRIMITIVES ------------------- */

  /* Display = Space Grotesk (kept from Hapto for brand cohesion - friendly
     geometric grotesk that still reads professional). Body = Inter, chosen
     for clinical legibility at small sizes and for older eyes in bright rooms. */
  --font-display:
    "Space Grotesk", "Clash Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --font-mono:
    "JetBrains Mono", "SF Mono", "Fira Code",
    ui-monospace, Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  /* Type scale: xs 12 · sm 14 · base 16 · lg 18 · xl 22 · 2xl 30 · 3xl 44 · 4xl 64 */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;   /* body default */
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  30px;
  --text-3xl:  44px;
  --text-4xl:  64px;

  /* Line heights, semantic */
  --leading-display: 1.04;
  --leading-heading: 1.18;
  --leading-body:    1.6;    /* slightly looser than consumer - calmer reading */
  --leading-dense:   1.35;
  --leading-mono:    1.5;

  /* Letter-spacing, semantic */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* ---------- SPACE, 4px base scale ------------------ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADIUS (rounded, but calmer than consumer) --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-pill: 999px;

  /* ---------- MOTION (smooth + confident, gentle delight) --- */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    360ms;
  --dur-ambient: 3200ms;

  --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1);    /* gentler overshoot than consumer */
  --ease-out-brand: cubic-bezier(0.22, 0.9, 0.32, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ---------- Z-INDEX --------------------------------- */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   100;
  --z-nav:      500;
  --z-overlay:  1000;
  --z-modal:    2000;
  --z-toast:    3000;
  --z-tooltip:  4000;

  /* ---------- LAYOUT ---------------------------------- */
  --container-sm:   720px;
  --container-md:   960px;
  --container-lg:   1200px;
  --container-xl:   1360px;
  --container-full: 100%;

  --gutter-page: var(--space-5);

  /* ---------- BRAND GRADIENTS (hero / marketing only) ---- */
  --gradient-brand: linear-gradient(135deg, var(--teal-500) 0%, var(--violet-400) 100%);
  --gradient-vital: linear-gradient(135deg, var(--teal-400) 0%, var(--green-400) 100%);
  --gradient-care:  linear-gradient(135deg, var(--violet-400) 0%, var(--coral-400) 100%);
  --gradient-mesh:
    radial-gradient(60% 60% at 12% 8%,  color-mix(in oklab, var(--teal-400) 18%, transparent) 0, transparent 60%),
    radial-gradient(55% 55% at 92% 4%,  color-mix(in oklab, var(--violet-400) 16%, transparent) 0, transparent 60%),
    radial-gradient(50% 50% at 80% 95%, color-mix(in oklab, var(--green-400) 12%, transparent) 0, transparent 60%);
}

/* ---------- LAYER 2: SEMANTIC TOKENS ---------------------- */
/* Defaults to LIGHT (clinical default). Dark overrides below. */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces - tone-led elevation */
  --surface-canvas:   var(--neutral-50);    /* airy page bg */
  --surface-raised:   var(--neutral-0);     /* section bands */
  --surface-overlay:  var(--neutral-0);     /* cards / panels */
  --surface-floating: var(--neutral-0);     /* modals / popovers */
  --surface-sunken:   var(--neutral-100);   /* wells / data rows */
  --surface-inverse:  var(--neutral-950);

  /* Text */
  --text-strong:    #0C1413;   /* headings (ink) */
  --text-default:   #26302E;   /* body */
  --text-subtle:    #566461;   /* secondary */
  --text-faint:     #7E8C89;   /* tertiary / timestamps */
  --text-disabled:  #AAB7B4;
  --text-on-accent: #FFFFFF;   /* white on teal/violet button */
  --text-on-care:   #FFFFFF;

  /* Borders */
  --border-subtle:  rgba(12, 32, 30, 0.07);
  --border-default: rgba(12, 32, 30, 0.12);
  --border-strong:  rgba(12, 32, 30, 0.20);
  --border-accent:  color-mix(in oklab, var(--teal-500) 45%, transparent);
  --border-focus:   var(--teal-600);

  /* Brand - semantic aliases */
  --brand-primary:        var(--teal-600);   /* button / fill (AA white-text safe) */
  --brand-primary-hover:  var(--teal-700);
  --brand-primary-active: var(--teal-800);
  --brand-primary-muted:  var(--teal-50);
  --brand-hue:            var(--teal-400);    /* bright decorative teal */
  --brand-accent:         var(--violet-400);  /* AI / intelligence */
  --brand-accent-hover:   var(--violet-500);
  --brand-accent-muted:   var(--violet-50);
  --brand-care:           var(--coral-400);   /* human warmth (sparing) */
  --brand-care-muted:     var(--coral-50);
  --brand-highlight:      var(--green-500);   /* outcomes / savings */
  --brand-highlight-text: var(--green-600);   /* AA-safe savings text on white */
  --brand-highlight-muted:var(--green-50);

  /* On-light readable brand text (eyebrows, links, inline accents) */
  --brand-primary-text:   var(--teal-600);
  --brand-accent-text:    var(--violet-500);

  /* State colors - subtle/strong pairs */
  --state-info-subtle:  #E8F1FE;
  --state-info-strong:  #2C5BC0;
  --state-ok-subtle:    #E3F7EC;
  --state-ok-strong:    #0E8255;
  --state-warn-subtle:  #FCF1DD;
  --state-warn-strong:  #9A6608;
  --state-crit-subtle:  #FCE6E7;
  --state-crit-strong:  #C32D32;

  /* Elevation - soft, diffuse, cool-slate tinted (calm, premium) */
  --elev-1: 0 1px 2px rgba(10, 40, 36, 0.05), 0 1px 3px rgba(10, 40, 36, 0.05);
  --elev-2: 0 8px 20px rgba(10, 40, 36, 0.07), 0 2px 6px rgba(10, 40, 36, 0.05);
  --elev-3: 0 22px 48px rgba(10, 40, 36, 0.10), 0 8px 16px rgba(10, 40, 36, 0.06);

  /* Brand glow - emphasis only */
  --glow-sm:     0 6px 22px color-mix(in oklab, var(--teal-400) 28%, transparent);
  --glow-md:     0 10px 38px color-mix(in oklab, var(--teal-400) 24%, transparent);
  --glow-accent: 0 10px 38px color-mix(in oklab, var(--violet-400) 26%, transparent);
  --glow-vital:  0 0 26px color-mix(in oklab, var(--green-400) 38%, transparent);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--teal-500) 45%, transparent);
}

/* ---------- DARK THEME ------------------------------------ */
/* Ships alongside (e.g. night-shift / casualty), but light leads. */

[data-theme="dark"] {
  color-scheme: dark;

  --surface-canvas:   var(--neutral-950);
  --surface-raised:   var(--neutral-900);
  --surface-overlay:  var(--neutral-900);
  --surface-floating: var(--neutral-800);
  --surface-sunken:   var(--neutral-1000);
  --surface-inverse:  var(--neutral-50);

  --text-strong:    #F2F8F6;
  --text-default:   #DCE7E4;
  --text-subtle:    #9DACA8;
  --text-faint:     #6F7E7B;
  --text-disabled:  #45524F;
  --text-on-accent: #FFFFFF;
  --text-on-care:   #FFFFFF;

  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.20);
  --border-accent:  color-mix(in oklab, var(--teal-400) 50%, transparent);
  --border-focus:   var(--teal-400);

  --brand-primary:        var(--teal-500);
  --brand-primary-hover:  var(--teal-400);
  --brand-primary-active: var(--teal-600);
  --brand-primary-muted:  color-mix(in oklab, var(--teal-400) 16%, var(--neutral-950));
  --brand-hue:            var(--teal-400);
  --brand-accent:         var(--violet-400);
  --brand-accent-hover:   var(--violet-300);
  --brand-accent-muted:   color-mix(in oklab, var(--violet-400) 18%, var(--neutral-950));
  --brand-care:           var(--coral-400);
  --brand-care-muted:     color-mix(in oklab, var(--coral-400) 16%, var(--neutral-950));
  --brand-highlight:      var(--green-400);
  --brand-highlight-text: var(--green-300);
  --brand-highlight-muted:color-mix(in oklab, var(--green-400) 16%, var(--neutral-950));

  --brand-primary-text:   var(--teal-300);
  --brand-accent-text:    var(--violet-300);

  --state-info-subtle:  var(--info-subtle);
  --state-info-strong:  var(--info-strong);
  --state-ok-subtle:    var(--ok-subtle);
  --state-ok-strong:    var(--ok-strong);
  --state-warn-subtle:  var(--warn-subtle);
  --state-warn-strong:  var(--warn-strong);
  --state-crit-subtle:  var(--crit-subtle);
  --state-crit-strong:  var(--crit-strong);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --elev-2: 0 8px 20px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40);
  --elev-3: 0 22px 50px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.45);

  --glow-sm:     0 6px 24px color-mix(in oklab, var(--teal-400) 40%, transparent);
  --glow-md:     0 10px 40px color-mix(in oklab, var(--teal-400) 34%, transparent);
  --glow-accent: 0 10px 40px color-mix(in oklab, var(--violet-400) 38%, transparent);
  --glow-vital:  0 0 28px color-mix(in oklab, var(--green-400) 46%, transparent);

  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--teal-400) 50%, transparent);
}

/* Auto-switch to dark on OS preference unless data-theme is explicit */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --surface-canvas:   var(--neutral-950);
    --surface-raised:   var(--neutral-900);
    --surface-overlay:  var(--neutral-900);
    --surface-floating: var(--neutral-800);
    --surface-sunken:   var(--neutral-1000);
    --surface-inverse:  var(--neutral-50);

    --text-strong:   #F2F8F6;
    --text-default:  #DCE7E4;
    --text-subtle:   #9DACA8;
    --text-faint:    #6F7E7B;
    --text-disabled: #45524F;

    --border-subtle:  rgba(255, 255, 255, 0.07);
    --border-default: rgba(255, 255, 255, 0.12);
    --border-strong:  rgba(255, 255, 255, 0.20);

    --brand-primary:       var(--teal-500);
    --brand-primary-hover: var(--teal-400);
    --brand-primary-text:  var(--teal-300);
    --brand-accent-text:   var(--violet-300);
    --brand-highlight-text:var(--green-300);

    --state-info-subtle:  var(--info-subtle);
    --state-info-strong:  var(--info-strong);
    --state-ok-subtle:    var(--ok-subtle);
    --state-ok-strong:    var(--ok-strong);
    --state-warn-subtle:  var(--warn-subtle);
    --state-warn-strong:  var(--warn-strong);
    --state-crit-subtle:  var(--crit-subtle);
    --state-crit-strong:  var(--crit-strong);

    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
    --elev-2: 0 8px 20px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40);
    --elev-3: 0 22px 50px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- FORCED-COLORS (High Contrast Mode) ------------ */
@media (forced-colors: active) {
  :root {
    --brand-primary: CanvasText;
    --text-strong:   CanvasText;
    --text-default:  CanvasText;
    --text-subtle:   CanvasText;
    --border-focus:  Highlight;
  }
}

/* ---------- REDUCED MOTION -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-ambient: 0ms;
  }
}