/* ============================================================================
   Verity · tokens.css — values only. No selectors beyond :root and data-attrs.
   Hex is declared first as a fallback; OKLCH redeclares it for modern engines.
   Every contrast figure in the comments was computed, not estimated.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Brand ───────────────────────────────────────────────────────────────
     Hue 288 (indigo-violet): furthest usable hue from all three safety hues
     (red 25, amber 78, green 150) simultaneously. Purple in a clinical
     interface conventionally means "this is not a vital sign".
     NO CLINICAL STATE USES HUE 288.                                        */
  --brand:        #5a42b2;  --brand:        oklch(0.470 0.170 288);  /* 7.33:1 on white */
  --brand-hover:  #4b3499;  --brand-hover:  oklch(0.415 0.170 288);
  --brand-fill:   #5a42b2;  --brand-fill:   oklch(0.470 0.170 288);  /* white on it: 7.33 */
  --brand-ink:    #ffffff;
  --brand-wash:   #f0efff;  --brand-wash:   oklch(0.958 0.022 288);
  --brand-line:   #c9c0f0;  --brand-line:   oklch(0.830 0.070 288);
  --brand-ring:   #7e6cd9;  --brand-ring:   oklch(0.600 0.160 288);  /* 4.17:1 — focus */

  /* ── Chrome — the dark nav rail and command bar ───────────────────────── */
  --chrome:       #201f2f;  --chrome:       oklch(0.248 0.030 288);
  --chrome-2:     #2f2e40;  --chrome-2:     oklch(0.310 0.032 288);
  --chrome-3:     #3a3950;  --chrome-3:     oklch(0.355 0.036 288);
  --chrome-line:  #414052;  --chrome-line:  oklch(0.380 0.030 288);

  /* ── Surfaces — neutrals tinted to 258 (cool). Never warm. ─────────────── */
  --canvas:       #f4f6f8;  --canvas:       oklch(0.972 0.004 258);
  --surface:      #ffffff;  --surface:      oklch(1.000 0.000 0);
  --surface-2:    #f6f8fa;  --surface-2:    oklch(0.978 0.004 258);
  --surface-3:    #eef0f3;  --surface-3:    oklch(0.955 0.005 258);
  --surface-sunk: #e8ebef;  --surface-sunk: oklch(0.930 0.006 258);

  /* ── Ink ramp. --ink-3 is the FLOOR: 5.75:1 on surface, 5.31:1 on canvas.
     Nothing lighter may ever carry a glyph — including placeholders and
     disabled labels.                                                       */
  --ink:          #1a1e27;  --ink:          oklch(0.235 0.018 268);  /* 16.69 */
  --ink-2:        #4c5059;  --ink-2:        oklch(0.430 0.016 268);  /*  8.11 */
  --ink-3:        #62666e;  --ink-3:        oklch(0.510 0.014 268);  /*  5.75 */
  --ink-inv:      #fafbfc;  --ink-inv:      oklch(0.985 0.002 258);
  --ink-on-chrome:   #f3f3f6;  --ink-on-chrome:   oklch(0.965 0.004 288); /* 14.61 */
  --ink-on-chrome-2: #b5b5be;  --ink-on-chrome-2: oklch(0.775 0.014 288); /*  7.92 */

  /* ── Lines. Not text colours. ─────────────────────────────────────────── */
  --line:         #dde0e4;  --line:         oklch(0.905 0.006 258);
  --line-strong:  #c2c6cb;  --line-strong:  oklch(0.825 0.008 258);
  --line-control: #82868e;  --line-control: oklch(0.620 0.012 258);  /* 3.64 — 1.4.11 */

  /* ── Clinical status ramp — nine states, each a text/fill/line triple.
     Every state renders as icon + text label + colour. Never colour alone.
     Severity is monotonic in relative luminance so it survives greyscale.  */
  --st-normal:        #646a70;  --st-normal:        oklch(0.520 0.012 250); /* 5.50 */
  --st-normal-fill:   #f2f5f7;  --st-normal-line:   #dde2e6;

  --st-watch:         #007378;  --st-watch:         oklch(0.500 0.095 200); /* 5.65 */
  --st-watch-fill:    #dbfafb;  --st-watch-line:    #a9e4e7;

  --st-elevated:      #885a00;  --st-elevated:      oklch(0.505 0.115 78);  /* 5.96 */
  --st-elevated-fill: #ffeecd;  --st-elevated-line: #e8c98a;

  --st-urgent:        #972a00;  --st-urgent:        oklch(0.450 0.155 42);  /* 7.95 */
  --st-urgent-fill:   #ffe6d7;  --st-urgent-line:   #f0b492;

  --st-critical:      #ffffff;                                              /* on fill */
  --st-critical-fill: #970009;  --st-critical-fill: oklch(0.400 0.185 27);  /* 9.03 */
  --st-critical-line: #970009;

  --st-overdue:       #950c31;  --st-overdue:       oklch(0.430 0.165 15);  /* 8.87 */
  --st-overdue-fill:  #ffe6e7;  --st-overdue-line:  #f0a8b0;
  --st-overdue-hatch: #f7c9cf;

  --st-resolved:      #1f6f38;  --st-resolved:      oklch(0.480 0.115 150); /* 6.20 */
  --st-resolved-fill: #dffae3;  --st-resolved-line: #a2ddb1;

  --st-info:          #246099;  --st-info:          oklch(0.480 0.110 250); /* 6.52 */
  --st-info-fill:     #e0f4ff;  --st-info-line:     #a8cfe8;

  /* AI-authored content is brand-hued: AI is chrome, not content.
     Distinguished from brand ACTIONS by a dashed edge and an explicit label. */
  --st-draft:         #5b558b;  --st-draft:         oklch(0.480 0.085 288); /* 6.71 */
  --st-draft-fill:    #f3f2ff;  --st-draft-line:    #a9a4d4;

  /* ── Textures — a redundant, non-colour status channel. ────────────────── */
  --hatch-pitch: 7px;
  --hatch-overdue: repeating-linear-gradient(
    45deg,
    var(--st-overdue-fill)  0,
    var(--st-overdue-fill)  calc(var(--hatch-pitch) * 0.55),
    var(--st-overdue-hatch) calc(var(--hatch-pitch) * 0.55),
    var(--st-overdue-hatch) var(--hatch-pitch));
  --hatch-gap: repeating-linear-gradient(
    45deg, transparent 0, transparent 3px,
    color-mix(in oklab, var(--ink-3) 14%, transparent) 3px,
    color-mix(in oklab, var(--ink-3) 14%, transparent) 4px);

  /* ── Data-visualisation sequence. Brand-derived, alternating light/dark so
     series survive greyscale. All ≥3:1 on --surface (WCAG 1.4.11).
     NEVER rainbow.                                                          */
  --viz-1: #5a42b2;  --viz-1: oklch(0.470 0.170 288);  /*  7.33 */
  --viz-2: #8378cf;  --viz-2: oklch(0.620 0.130 288);  /*  3.79 */
  --viz-3: #662d62;  --viz-3: oklch(0.395 0.110 330);  /*  9.97 */
  --viz-4: #358ab2;  --viz-4: oklch(0.600 0.100 232);  /*  3.86 */
  --viz-5: #322f4b;  --viz-5: oklch(0.320 0.050 288);  /* 12.85 */
  --viz-6: #ad7ca9;  --viz-6: oklch(0.650 0.090 330);  /*  3.30 */

  /* Sequential ramp — single hue 288, monotonic lightness. Never green-red. */
  --heat-0: #f3f2fb; --heat-1: #dcdaf8; --heat-2: #bebaef;
  --heat-3: #9b93df; --heat-4: #7869ca; --heat-5: #573cb0;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-ui:   'Atkinson Hyperlegible Next', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', 'Cascadia Mono',
               Consolas, monospace;

  --t-micro:   0.6875rem;  /* 11 — chart ticks, chip counters. Never a sentence. */
  --t-meta:    0.75rem;    /* 12 */
  --t-dense:   0.8125rem;  /* 13 — desktop only */
  --t-body:    0.875rem;   /* 14 */
  --t-body-lg: 1rem;       /* 16 — prose, inputs, carer floor */
  --t-h4:      1.125rem;   /* 18 */
  --t-h3:      1.3125rem;  /* 21 */
  --t-h2:      1.5rem;     /* 24 */
  --t-h1:      1.75rem;    /* 28 */
  --t-metric:  2.25rem;    /* 36 */
  --t-display: 3rem;       /* 48 — index.html only */

  --lh-tight: 1.2;
  --lh-ui:    1.4;
  --lh-prose: 1.55;

  /* ── Space — 4px base ─────────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;

  /* ── Elevation — three tight, low-spread steps. Nothing floats far. ───── */
  --e-1: 0 1px 2px rgba(26, 30, 39, 0.07);
  --e-2: 0 4px 10px rgba(26, 30, 39, 0.09), 0 1px 3px rgba(26, 30, 39, 0.07);
  --e-3: 0 14px 34px rgba(26, 30, 39, 0.15), 0 3px 8px rgba(26, 30, 39, 0.09);

  /* ── Shell metrics ────────────────────────────────────────────────────── */
  --topbar-h:      56px;
  --pageheader-h:  72px;
  --sidebar-w:     248px;
  --sidebar-w-rail: 64px;
  --drawer-w:      400px;
  --identity-bar-h: 48px;

  /* ── Density — a real affordance, not decoration. Row height and padding
     only. Font size NEVER changes with density.                            */
  --row-h:     48px;
  --control-h: 40px;
  --tap:       44px;
  --gutter:    24px;
  --card-pad:  20px;

  /* ── Motion. Built-in easings are too weak to read as intentional.
     ease-in is never used on UI — it delays the first frame, exactly where
     the eye is.                                                             */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-press:  120ms;
  --d-hover:  160ms;
  --d-pop:    180ms;
  --d-drawer: 220ms;
  --d-modal:  240ms;

  /* ── z-index — semantic only. Never an arbitrary 999. ─────────────────── */
  --z-base: 0;      --z-raised: 10;   --z-sticky: 100;  --z-dropdown: 200;
  --z-drawer: 300;  --z-backdrop: 400; --z-modal: 410;
  --z-toast: 500;   --z-tooltip: 600;
}

/* ── Dense — desktop opt-in. Rows and padding shrink; type does not. ────── */
[data-density='dense'] {
  --row-h:     36px;
  --control-h: 32px;
  --gutter:    16px;
  --card-pad:  14px;
}

/* ── The carer surface: a different product on the same tokens.
   13px does not exist in a corridor. Gloves need 48px.                     */
[data-shell='carer'] {
  --t-dense:   0.9375rem; /* 15 */
  --t-body:    1rem;      /* 16 */
  --t-meta:    0.8125rem; /* 13 */
  --row-h:     64px;
  --control-h: 48px;
  --tap:       48px;
  --gutter:    16px;
  --card-pad:  16px;
}
/* Dense is deliberately desktop-only — it must not apply to the carer shell. */
[data-shell='carer'][data-density='dense'] {
  --row-h: 64px; --control-h: 48px; --gutter: 16px; --card-pad: 16px;
}

/* ── Dark — a full re-declaration. Lightness is recalibrated per surface,
   because a deep crimson that screams on white disappears on a dark canvas.
   Dark exists for the meeting-room projector and the 22:00 night office.   */
[data-theme='dark'] {
  color-scheme: dark;

  --canvas:       #0c0e13;  --canvas:       oklch(0.165 0.010 268);
  --surface:      #17191f;  --surface:      oklch(0.215 0.012 268);
  --surface-2:    #20232a;  --surface-2:    oklch(0.255 0.014 268);
  --surface-3:    #292c34;  --surface-3:    oklch(0.295 0.015 268);
  --surface-sunk: #101319;  --surface-sunk: oklch(0.185 0.011 268);

  --chrome:       #090810;  --chrome:       oklch(0.140 0.018 288);
  --chrome-2:     #171621;  --chrome-2:     oklch(0.205 0.022 288);
  --chrome-3:     #201f2d;  --chrome-3:     oklch(0.250 0.024 288);
  --chrome-line:  #2a2a37;  --chrome-line:  oklch(0.290 0.024 288);

  --ink:          #eff0f4;  --ink:          oklch(0.955 0.005 268);  /* 15.37 */
  --ink-2:        #bbbec4;  --ink-2:        oklch(0.800 0.010 268);  /*  9.38 */
  --ink-3:        #969aa1;  --ink-3:        oklch(0.685 0.012 268);  /*  6.20 — floor holds */
  --ink-inv:      #0c0e13;  --ink-inv:      oklch(0.165 0.010 268);
  --ink-on-chrome:   #f1f1f5;  --ink-on-chrome:   oklch(0.960 0.005 288);
  --ink-on-chrome-2: #b0b0ba;  --ink-on-chrome-2: oklch(0.760 0.014 288);

  --line:         #30333a;  --line:         oklch(0.320 0.014 268);
  --line-strong:  #444851;  --line-strong:  oklch(0.400 0.016 268);
  --line-control: #686c75;  --line-control: oklch(0.530 0.016 268);  /* 3.32 */

  /* --brand and --brand-fill MUST diverge here. --brand is text/icon/border
     against a dark surface and must be light (7.33:1). --brand-fill sits
     behind white button text and must stay mid-tone — the light value
     measures 2.4:1 for white text and fails. Verified, not assumed.        */
  --brand:       #a79cfb;  --brand:       oklch(0.740 0.135 288);  /* 7.33 on surface */
  --brand-hover: #b9b0ff;  --brand-hover: oklch(0.790 0.120 288);
  --brand-fill:  #684fc8;  --brand-fill:  oklch(0.520 0.180 288);  /* white on it 5.93 */
  --brand-ink:   #ffffff;
  --brand-wash:  #292544;  --brand-wash:  oklch(0.285 0.055 288);
  --brand-line:  #4a4270;  --brand-line:  oklch(0.400 0.070 288);
  --brand-ring:  #9587ef;  --brand-ring:  oklch(0.680 0.150 288);

  --st-normal:   #b1b8c0;  --st-normal:   oklch(0.780 0.014 250);  /* 8.77 */
  --st-watch:    #51bfc5;  --st-watch:    oklch(0.745 0.100 200);  /* 8.05 */
  --st-elevated: #d19936;  --st-elevated: oklch(0.720 0.130  78);  /* 6.95 */
  --st-urgent:   #e7784b;  --st-urgent:   oklch(0.690 0.150  42);  /* 5.97 */
  --st-critical: #0c0e13;                                          /* ink-inv on fill */
  --st-overdue:  #e85f71;  --st-overdue:  oklch(0.665 0.170  15);  /* 5.29 */
  --st-resolved: #62bb78;  --st-resolved: oklch(0.720 0.130 150);  /* 7.44 */
  --st-info:     #6aaaea;  --st-info:     oklch(0.720 0.115 250);  /* 7.10 */
  --st-draft:    #a6a2d9;  --st-draft:    oklch(0.735 0.080 288);  /* 7.33 */

  --st-normal-fill:   #282c30;  --st-normal-line:   #3d4247;
  --st-watch-fill:    #073234;  --st-watch-line:    #12565a;
  --st-elevated-fill: #3e2b09;  --st-elevated-line: #6b4c14;
  --st-urgent-fill:   #462314;  --st-urgent-line:   #7a3d22;
  --st-critical-fill: #ec5b57;  --st-critical-line: #ec5b57;  /* inverts the other way */
  /* #442024 measured 4.27:1 for --st-overdue text and failed. #38191d = 4.76. */
  --st-overdue-fill:  #38191d;  --st-overdue-line:  #7a3a43;
  --st-overdue-hatch: #4d2830;
  --st-resolved-fill: #15331c;  --st-resolved-line: #285a35;
  --st-info-fill:     #192d41;  --st-info-line:     #2c5478;
  --st-draft-fill:    #29273b;  --st-draft-line:    #4a4570;

  --viz-1: #9b8df5; --viz-1: oklch(0.700 0.150 288);
  --viz-2: #7266bc; --viz-2: oklch(0.560 0.130 288);
  --viz-3: #b273ac; --viz-3: oklch(0.640 0.110 330);
  --viz-4: #5db0d8; --viz-4: oklch(0.720 0.100 232);
  --viz-5: #c8c6ea; --viz-5: oklch(0.840 0.050 288);
  --viz-6: #8f5d8a; --viz-6: oklch(0.560 0.095 330);

  --heat-0: #1c1b2a; --heat-1: #2b2846; --heat-2: #3e3868;
  --heat-3: #554d8f; --heat-4: #7166b8; --heat-5: #9184dd;

  --e-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --e-2: 0 4px 10px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --e-3: 0 14px 34px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.40);
}

/* A client whose OS is in dark mode gets it without touching the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --canvas: #0c0e13; --surface: #17191f; --surface-2: #20232a;
    --surface-3: #292c34; --surface-sunk: #101319;
    --chrome: #090810; --chrome-2: #171621; --chrome-3: #201f2d;
    --chrome-line: #2a2a37;
    --ink: #eff0f4; --ink-2: #bbbec4; --ink-3: #969aa1; --ink-inv: #0c0e13;
    --ink-on-chrome: #f1f1f5; --ink-on-chrome-2: #b0b0ba;
    --line: #30333a; --line-strong: #444851; --line-control: #686c75;
    --brand: #a79cfb; --brand-hover: #b9b0ff; --brand-fill: #684fc8;
    --brand-wash: #292544; --brand-line: #4a4270; --brand-ring: #9587ef;
    --st-normal: #b1b8c0; --st-watch: #51bfc5; --st-elevated: #d19936;
    --st-urgent: #e7784b; --st-critical: #0c0e13; --st-overdue: #e85f71;
    --st-resolved: #62bb78; --st-info: #6aaaea; --st-draft: #a6a2d9;
    --st-normal-fill: #282c30; --st-normal-line: #3d4247;
    --st-watch-fill: #073234; --st-watch-line: #12565a;
    --st-elevated-fill: #3e2b09; --st-elevated-line: #6b4c14;
    --st-urgent-fill: #462314; --st-urgent-line: #7a3d22;
    --st-critical-fill: #ec5b57; --st-critical-line: #ec5b57;
    --st-overdue-fill: #38191d; --st-overdue-line: #7a3a43;
    --st-overdue-hatch: #4d2830;
    --st-resolved-fill: #15331c; --st-resolved-line: #285a35;
    --st-info-fill: #192d41; --st-info-line: #2c5478;
    --st-draft-fill: #29273b; --st-draft-line: #4a4570;
    --viz-1: #9b8df5; --viz-2: #7266bc; --viz-3: #b273ac;
    --viz-4: #5db0d8; --viz-5: #c8c6ea; --viz-6: #8f5d8a;
    --heat-0: #1c1b2a; --heat-1: #2b2846; --heat-2: #3e3868;
    --heat-3: #554d8f; --heat-4: #7166b8; --heat-5: #9184dd;
    --e-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --e-2: 0 4px 10px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
    --e-3: 0 14px 34px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.40);
  }
}