/* ============================================================
   UI Kit — Design Tokens
   Single source of truth for colour, type, space, radius, depth.
   Light + dark themes resolve against the same semantic names, so
   every component below only ever reads semantic tokens.
   ============================================================ */

:root {
  /* ---------- Brand ramp ---------- */
  /* State Housing Company official navy, sampled from the supplied logo. */
  --brand-950:#02094a; --brand-900:#02094a; --brand-800:#0d1764; --brand-700:#1c287a;
  --brand-600:#02094a; --brand-500:#24318a; --brand-400:#5360a3; --brand-300:#8a92bf;
  --brand-200:#c1c6de; --brand-100:#e6e8f2; --brand-50:#f5f6fb;

  /* ---------- Accent ramp ---------- */
  --accent-700:#8a6d17; --accent-600:#a8861d; --accent-500:#c9a227; --accent-400:#dcb94a;
  --accent-300:#e6c65a; --accent-200:#ecdba4; --accent-100:#f7efd6; --accent-50:#fdf9ec;

  /* ---------- Neutral ramp ---------- */
  --grey-950:#0b0f16; --grey-900:#111827; --grey-800:#1f2937; --grey-700:#374151;
  --grey-600:#4b5563; --grey-500:#6b7280; --grey-400:#9ca3af; --grey-300:#d1d5db;
  --grey-200:#e5e7eb; --grey-100:#f3f4f6; --grey-50:#f9fafb;

  /* ---------- Status ramps ---------- */
  --success-600:#0a6e0a; --success-500:#0ca30c; --success-400:#34c759; --success-100:#e9f7e9;
  --warning-600:#8a6210; --warning-500:#fab219; --warning-400:#fbc65a; --warning-100:#fdf3d9;
  --danger-600:#a02525;  --danger-500:#d03b3b;  --danger-400:#e46a6a;  --danger-100:#fbe9e9;
  --info-600:#1e5fa8;    --info-500:#2a78d6;    --info-400:#5a9ae4;    --info-100:#e7f0fb;

  /* ---------- Data visualisation series ---------- */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#8b5cf6;
  --series-5:#f0b429; --series-6:#e5548b; --series-7:#0891b2; --series-8:#84a12f;
  --chart-grid:#e6e8ec; --chart-axis:#c3c6cd; --chart-label:#6b7280;

  /* ---------- Semantic surfaces (light) ---------- */
  --page:#f4f6fa;
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --surface-sunken:#f9fafc;
  --surface-inverse:#111827;
  --surface-hover:rgba(17,24,39,.035);
  --surface-active:var(--brand-50);
  --surface-overlay:rgba(15,23,42,.45);

  /* Fields must remain distinct from cards and page surfaces. */
  --field-bg:#f1f5f9; --field-border:#7b8798; --field-hover:#536176; --field-focus:#02094a;

  --line:#e5e7eb;
  --line-soft:#eef0f3;
  --line-strong:#d1d5db;

  --text:#111827;
  --text-muted:#4b5563;
  --text-subtle:#636b78;
  --text-inverse:#ffffff;
  --text-brand:var(--brand-600);
  --text-on-brand:#ffffff;
  --text-on-accent:var(--brand-900);

  /* ---------- Status semantics ---------- */
  --ok:var(--success-500);      --ok-bg:var(--success-100);  --ok-tx:var(--success-600);
  --warn:var(--warning-500);    --warn-bg:var(--warning-100);--warn-tx:var(--warning-600);
  --crit:var(--danger-500);     --crit-bg:var(--danger-100); --crit-tx:var(--danger-600);
  --info:var(--info-500);       --info-bg:var(--info-100);   --info-tx:var(--info-600);
  --serious:#ec835a;            --serious-bg:#fdeee7;        --serious-tx:#a04a2b;

  /* ---------- Focus ---------- */
  --focus-ring:0 0 0 3px rgba(2,9,74,.28);
  --focus-ring-danger:0 0 0 3px rgba(208,59,59,.26);

  /* ---------- Typography ---------- */
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, 'DejaVu Sans Mono', monospace;

  --text-2xs:10px;  --text-xs:11px;   --text-sm:12px;  --text-base:13.5px;
  --text-md:15px;   --text-lg:17px;   --text-xl:20px;  --text-2xl:24px;
  --text-3xl:30px;  --text-4xl:38px;

  --leading-tight:1.2; --leading-snug:1.35; --leading-normal:1.5; --leading-loose:1.7;
  --tracking-wide:.06em; --tracking-wider:.12em;

  /* ---------- Space scale (4px base) ---------- */
  --space-0:0;    --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px;
  --space-10:64px;

  /* ---------- Radius ---------- */
  --radius-xs:5px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px;
  --radius-pill:999px; --radius-circle:50%;

  /* ---------- Depth ---------- */
  --shadow-xs:0 1px 2px rgba(17,24,39,.05);
  --shadow-sm:0 1px 3px rgba(17,24,39,.07), 0 1px 2px rgba(17,24,39,.04);
  --shadow-md:0 1px 3px rgba(17,24,39,.06), 0 8px 24px -12px rgba(31,56,100,.18);
  --shadow-lg:0 12px 40px -12px rgba(17,24,39,.28);
  --shadow-xl:0 24px 64px -16px rgba(17,24,39,.34);

  /* ---------- Motion ---------- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms;

  /* ---------- Layering ----------
     Poppers sit ABOVE modals on purpose: a select or date picker
     opened inside a dialog must not render behind it. */
  --z-sticky:20; --z-drawer:60; --z-modal:70; --z-dropdown:80;
  --z-popover:85; --z-tooltip:90; --z-toast:100; --z-loader:110;

  /* ---------- Layout ---------- */
  --sidebar-w:248px;
  --sidebar-w-collapsed:64px;
  --topbar-h:56px;
  --container-max:1440px;

  color-scheme: light;
  font-size:14px;
}

/* ============================================================
   Dark theme — semantic overrides only.
   Applied when the theme manager stamps data-theme="dark", and
   as a no-JS fallback when the OS prefers dark.
   ============================================================ */
:root[data-theme="dark"] {
  --page:#0b0f16;
  --surface:#141a23;
  --surface-raised:#1a2130;
  --surface-sunken:#10161f;
  --surface-inverse:#e5e7eb;
  --surface-hover:rgba(255,255,255,.05);
  --surface-active:rgba(90,138,220,.16);
  --surface-overlay:rgba(3,7,14,.66);

  --field-bg:#202b3b; --field-border:#75839a; --field-hover:#a3b3c9; --field-focus:#adc4ff;

  --line:#252d3a;
  --line-soft:#1d242f;
  --line-strong:#333c4c;

  --text:#e8ebf0;
  --text-muted:#98a2b3;
  --text-subtle:#aab3c2;
  --text-inverse:#0b0f16;
  --text-brand:#8eaadb;

  --brand-50:#15153d; --brand-100:#1c2258; --brand-200:#303873;

  --ok:#3ec46b;      --ok-bg:rgba(62,196,107,.14);   --ok-tx:#79dd9c;
  --warn:#f5b638;    --warn-bg:rgba(245,182,56,.14); --warn-tx:#f7cd77;
  --crit:#ef5f5f;    --crit-bg:rgba(239,95,95,.14);  --crit-tx:#f79b9b;
  --info:#5a9ae4;    --info-bg:rgba(90,154,228,.14); --info-tx:#8fbcf0;
  --serious:#f0946e; --serious-bg:rgba(240,148,110,.14); --serious-tx:#f6b79b;

  --chart-grid:#242b37; --chart-axis:#39424f; --chart-label:#98a2b3;

  --focus-ring:0 0 0 3px rgba(142,170,219,.3);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);
  --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
  --shadow-lg:0 16px 48px -12px rgba(0,0,0,.7);
  --shadow-xl:0 28px 72px -16px rgba(0,0,0,.8);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --page:#0b0f16; --surface:#141a23; --surface-raised:#1a2130; --surface-sunken:#10161f;
    --surface-inverse:#e5e7eb; --surface-hover:rgba(255,255,255,.05);
    --surface-active:rgba(90,138,220,.16); --surface-overlay:rgba(3,7,14,.66);
    --field-bg:#202b3b; --field-border:#75839a; --field-hover:#a3b3c9; --field-focus:#adc4ff;
    --line:#252d3a; --line-soft:#1d242f; --line-strong:#333c4c;
    --text:#e8ebf0; --text-muted:#98a2b3; --text-subtle:#aab3c2; --text-inverse:#0b0f16;
    --text-brand:#aeb7e1; --brand-50:#15153d; --brand-100:#1c2258; --brand-200:#303873;
    --ok:#3ec46b; --ok-bg:rgba(62,196,107,.14); --ok-tx:#79dd9c;
    --warn:#f5b638; --warn-bg:rgba(245,182,56,.14); --warn-tx:#f7cd77;
    --crit:#ef5f5f; --crit-bg:rgba(239,95,95,.14); --crit-tx:#f79b9b;
    --info:#5a9ae4; --info-bg:rgba(90,154,228,.14); --info-tx:#8fbcf0;
    --serious:#f0946e; --serious-bg:rgba(240,148,110,.14); --serious-tx:#f6b79b;
    --chart-grid:#242b37; --chart-axis:#39424f; --chart-label:#98a2b3;
    color-scheme: dark;
  }
}

/* ============================================================
   Density — compact/comfortable switch for data-dense screens
   ============================================================ */
:root[data-density="compact"] { --text-base:12.5px; --space-4:12px; --space-5:16px; --space-6:18px; }
:root[data-density="relaxed"] { --text-base:14.5px; --space-4:20px; --space-5:24px; --space-6:30px; }

/* ============================================================
   Reduced motion — honoured globally
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast:1ms; --duration-base:1ms; --duration-slow:1ms; }
  *, *::before, *::after {
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important;
  }
}