/* ============================================================
   Enliven Empathy — Design Tokens
   Direction A "Refined". Single source of truth.

   Layers:
     1. Primitives      raw values, never used directly in UI
     2. Semantic        role tokens — use THESE in components
     3. Density axis    [data-density="compact"] for the ops tool
     4. Dark scheme     [data-theme="dark"]
     5. Base + a11y     resets, focus, motion
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ─── 1. PRIMITIVES ──────────────────────────────────────── */
:root {
  /* Navy ramp — the spine of the system.
     400 is a surface/decoration step, NOT a text step — it fails AA on
     every defined background except pure white. Muted text uses 500. */
  --navy-900:#0A1628; --navy-800:#16202F; --navy-700:#28313F;
  --navy-600:#3A4557; --navy-500:#525C6D; --navy-400:#6B7484;
  --navy-300:#9AA1AC; --navy-200:#C3C8D0; --navy-100:#E3E6EB;
  --navy-50:#EDEFF3;  --navy-25:#F6F7F9;

  /* Pink — brand marker. NOT a text colour. */
  --pink-700:#8E2C72; --pink-600:#C4409F; --pink-500:#DC58C7;
  --pink-100:rgba(196,64,159,.22); --pink-50:rgba(196,64,159,.08);

  /* Semantic hues — each: solid (AA on white) / line / wash */
  --green-700:#0B5C44; --green-600:#0F7A5A; --green-200:#BFE0D4; --green-50:#EAF5F1;
  --amber-700:#7C4305; --amber-600:#A85B06; --amber-200:#F0D5AE; --amber-50:#FDF3E7;
  --red-700:#8E1F1F;   --red-600:#B42318;   --red-200:#F2C9C5;   --red-50:#FDF0EF;
  --blue-700:#1F4E75;  --blue-600:#2E6F9E;  --blue-200:#C2DAEC;  --blue-50:#EDF4F9;

  --white:#FFFFFF;

  /* Type scale — 1.18 modular, 15px base. Rem so users can zoom. */
  --fs-micro:0.6875rem;  /* 11    eyebrow, chip */
  --fs-meta:0.78125rem;  /* 12.5  meta, table head */
  --fs-sm:0.84375rem;    /* 13.5  secondary body */
  --fs-body:0.9375rem;   /* 15    body — base */
  --fs-lg:1rem;          /* 16    lead-in */
  --fs-h4:1.125rem;      /* 18 */
  --fs-h3:1.3125rem;     /* 21 */
  --fs-h2:1.5625rem;     /* 25 */
  --fs-h1:1.875rem;      /* 30 */
  --fs-display:2.25rem;  /* 36    stat numerals, hero */

  --lh-tight:1.18;  /* @kind font */
  --lh-snug:1.35;   /* @kind font */
  --lh-body:1.6;    /* @kind font */
  --lh-loose:1.7;   /* @kind font */
  --tr-tight:-.021em; /* @kind font */
  --tr-flat:0;        /* @kind font */
  --tr-wide:.05em;    /* @kind font */
  --tr-caps:.13em;    /* @kind font */

  --fw-reg:400;   /* @kind font */
  --fw-med:500;   /* @kind font */
  --fw-semi:600;  /* @kind font */
  --fw-bold:700;  /* @kind font */

  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-num:'DM Sans',system-ui,sans-serif;

  /* Radii */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-full:999px;

  /* Elevation — navy-tinted, 4 rungs that are actually distinct */
  --e-0:none;  /* @kind shadow */
  --e-1:0 1px 2px rgba(10,22,40,.04), 0 2px 8px rgba(10,22,40,.04);
  --e-2:0 2px 4px rgba(10,22,40,.05), 0 8px 24px rgba(10,22,40,.07);
  --e-3:0 4px 8px rgba(10,22,40,.06), 0 16px 40px rgba(10,22,40,.10);
  --e-4:0 8px 16px rgba(10,22,40,.08), 0 32px 64px rgba(10,22,40,.14);

  /* Motion */
  --ease:cubic-bezier(.32,.72,0,1); /* @kind other */
  --t-fast:120ms;  /* @kind other */
  --t:180ms;       /* @kind other */
  --t-slow:280ms;  /* @kind other */
}

/* ─── 2. SEMANTIC ROLES ──────────────────────────────────── */
:root {
  /* Surfaces */
  --bg-page:var(--navy-25);
  --bg-surface:var(--white);
  --bg-raised:var(--white);
  --bg-sunken:var(--navy-25);
  --bg-inverse:var(--navy-900);
  --bg-hover:var(--navy-25);
  --bg-selected:var(--blue-50);

  /* Light is the default. Dark is opt-in via [data-theme="dark"] and never
     follows prefers-color-scheme. Declaring color-scheme keeps UA-styled
     parts (scrollbars, form controls, autofill) light when the OS is dark. */
  color-scheme:light;

  /* Text — all AA+ on their intended surface */
  --fg:var(--navy-600);            /* body     worst case 8.7:1 across surfaces */
  --fg-strong:var(--navy-900);     /* headings worst case 16.3:1 across surfaces */
  --fg-muted:var(--navy-500);      /* meta     worst case 6.1:1 across surfaces */
  --fg-subtle:var(--navy-300);     /* decorative only — never text */
  --fg-inverse:var(--white);
  --fg-link:var(--navy-900);
  --fg-link-hover:var(--pink-700); /* worst case 6.9:1 across surfaces */

  /* Lines */
  --border:var(--navy-100);
  --border-soft:var(--navy-50);
  --border-strong:var(--navy-200);
  --border-inverse:rgba(255,255,255,.14);

  /* Brand marker — dots, orbs, chart accent, progress. Never body text. */
  --brand:var(--pink-600);
  --brand-strong:var(--pink-700);  /* the only pink allowed on text */
  --brand-wash:var(--pink-50);
  --brand-line:var(--pink-100);

  /* Status */
  --ok:var(--green-600);       --ok-line:var(--green-200);   --ok-wash:var(--green-50);
  --warn:var(--amber-600);     --warn-line:var(--amber-200); --warn-wash:var(--amber-50);
  --danger:var(--red-600);     --danger-line:var(--red-200); --danger-wash:var(--red-50);
  --info:var(--blue-600);      --info-line:var(--blue-200);  --info-wash:var(--blue-50);
  --neutral:var(--navy-500);   --neutral-line:var(--navy-100); --neutral-wash:var(--navy-25);

  /* Focus — worst case 4.9:1 across every surface */
  --focus:var(--blue-600);
  --focus-ring:0 0 0 2px var(--bg-surface), 0 0 0 4px var(--focus);

  /* Data visualisation — categorical, ordered by first-use.
     Distinguishable in deuteranopia; each ≥4.5:1 on white. */
  --chart-1:#0A1628;  /* navy    */
  --chart-2:#2E6F9E;  /* steel   */
  --chart-3:#0F7A5A;  /* green   */
  --chart-4:#A85B06;  /* amber   */
  --chart-5:#C4409F;  /* pink    */
  --chart-6:#5B4B8A;  /* violet  */
  --chart-7:#7A6A54;  /* clay    */
  --chart-8:#3F7C7C;  /* teal    */
  --chart-grid:var(--navy-50);
  --chart-axis:var(--navy-300);
  --chart-label:var(--navy-500);
  /* Sequential — single-measure heatmaps / intensity */
  --seq-1:#EDEFF3; --seq-2:#C6D2E0; --seq-3:#8FA6BF;
  --seq-4:#54749B; --seq-5:#294B73; --seq-6:#0A1628;
  /* Diverging — sentiment / before-after */
  --div-neg-2:#B42318; --div-neg-1:#DFA29C; --div-mid:#EDEFF3;
  --div-pos-1:#8CC3AC; --div-pos-2:#0F7A5A;

  /* Spacing — comfortable (client portal) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:44px; --sp-9:56px;

  /* Component sizing */
  --control-h:40px;
  --control-h-sm:32px;
  --control-px:16px;
  --card-p:22px;
  --card-head-p:16px 22px; /* @kind spacing */
  --row-p:16px 22px;       /* @kind spacing */
  --gutter:44px;
  --nav-h:68px;
  --subnav-h:50px;
  --measure:68ch; /* @kind other */
}

/* ─── 3. DENSITY: COMPACT (ops tool / facilitator platform) ─ */
[data-density="compact"] {
  --fs-body:0.875rem;    /* 14 */
  --fs-sm:0.8125rem;     /* 13 */
  --fs-h1:1.5rem;        /* 24 */
  --fs-h2:1.3125rem;     /* 21 */
  --fs-h3:1.125rem;      /* 18 */
  --lh-body:1.5;  /* @kind font */

  --sp-4:12px; --sp-5:16px; --sp-6:18px; --sp-7:24px; --sp-8:32px; --sp-9:40px;

  --control-h:34px;
  --control-h-sm:28px;
  --control-px:13px;
  --card-p:16px;
  --card-head-p:11px 16px; /* @kind spacing */
  --row-p:11px 16px;       /* @kind spacing */
  --gutter:24px;
  --nav-h:56px;
  --subnav-h:42px;
  --r-lg:8px; --r-xl:10px;
}

/* ─── 4. DARK ────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme:dark;
  --bg-page:#0C1017;
  --bg-surface:#141A23;
  --bg-raised:#1A212C;
  --bg-sunken:#0C1017;
  --bg-inverse:var(--white);
  --bg-hover:#1A212C;
  --bg-selected:rgba(46,111,158,.18);

  --fg:#AEB8C6;
  --fg-strong:#E9EDF3;
  --fg-muted:#8B96A6;
  --fg-subtle:#5A6474;
  --fg-inverse:var(--navy-900);
  --fg-link:#E9EDF3;
  --fg-link-hover:#F09BDD;

  --border:#242D3A;
  --border-soft:#1C242F;
  --border-strong:#33404F;
  --border-inverse:rgba(10,22,40,.14);

  --brand:#E97BD0;
  --brand-strong:#F09BDD;
  --brand-wash:rgba(233,123,208,.10);
  --brand-line:rgba(233,123,208,.24);

  --ok:#4FC48F;     --ok-line:rgba(79,196,143,.28);   --ok-wash:rgba(79,196,143,.10);
  --warn:#E0A33C;   --warn-line:rgba(224,163,60,.28); --warn-wash:rgba(224,163,60,.10);
  --danger:#E8756B; --danger-line:rgba(232,117,107,.28); --danger-wash:rgba(232,117,107,.10);
  --info:#68A8D4;   --info-line:rgba(104,168,212,.28); --info-wash:rgba(104,168,212,.10);
  --neutral:#8B96A6; --neutral-line:#242D3A; --neutral-wash:rgba(255,255,255,.04);

  --focus:#68A8D4;
  --focus-ring:0 0 0 2px var(--bg-surface), 0 0 0 4px var(--focus);

  --chart-1:#7FA8CC; --chart-2:#68A8D4; --chart-3:#4FC48F; --chart-4:#E0A33C;
  --chart-5:#E97BD0; --chart-6:#9D8AD6; --chart-7:#B8A488; --chart-8:#6DBDBD;
  --chart-grid:#1C242F; --chart-axis:#3D4757; --chart-label:#8B96A6;
  --seq-1:#141A23; --seq-2:#1F3247; --seq-3:#2F4E6E;
  --seq-4:#456F96; --seq-5:#6795BC; --seq-6:#9CBEDA;

  --e-1:0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.24);
  --e-2:0 2px 4px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.34);
  --e-3:0 4px 8px rgba(0,0,0,.36), 0 16px 40px rgba(0,0,0,.42);
  --e-4:0 8px 16px rgba(0,0,0,.40), 0 32px 64px rgba(0,0,0,.50);
}

/* ─── 5. BASE ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}
body{
  font:var(--fw-reg) var(--fs-body)/var(--lh-body) var(--font);
  color:var(--fg);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{color:var(--fg-strong);font-weight:var(--fw-bold);letter-spacing:var(--tr-tight);line-height:var(--lh-tight)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-snug)}
h5{font-size:var(--fs-lg);font-weight:var(--fw-semi);line-height:var(--lh-snug);letter-spacing:var(--tr-flat)}
h6{font-size:var(--fs-sm);font-weight:var(--fw-semi);line-height:var(--lh-snug);letter-spacing:var(--tr-flat)}

p{max-width:var(--measure);text-wrap:pretty}

a{color:var(--fg-link);text-decoration:none;border-bottom:1px solid var(--border-strong);transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
a:hover{color:var(--fg-link-hover);border-bottom-color:currentColor}

/* Numerals in data contexts line up */
.tabular,td,th,.stat,.metric{font-variant-numeric:tabular-nums}

/* Eyebrow — the one place brand pink touches type, at AA-safe strength */
.eyebrow{
  font-size:var(--fs-micro);font-weight:var(--fw-semi);
  letter-spacing:var(--tr-caps);text-transform:uppercase;
  color:var(--brand-strong);
}

/* ─── Focus: visible, consistent, keyboard-only ──────────── */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-xs)}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  box-shadow:var(--focus-ring);
}

/* Skip link — every app shell needs one */
.skip-link{
  position:absolute;left:var(--sp-4);top:calc(var(--sp-4) * -4);
  background:var(--bg-inverse);color:var(--fg-inverse);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:var(--fw-semi);border:0;z-index:100;
  transition:top var(--t) var(--ease);
}
.skip-link:focus{top:var(--sp-4)}

/* Screen-reader only */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}