/* ════════════════════════════════════════════════════════════════════════
   RICOH PAPER — Design Tokens (portable)
   ════════════════════════════════════════════════════════════════════════
   Ported verbatim from the authoritative source: indoor-mapping-poc/
   src/styles.scss (THEME REVAMP section + cross-walk bridge). This is the
   SAME system that runs the Employee App and Mission Control.

   Model — "themes are papers, the brand colour is the ink":
     • 8 colour schemes (papers), each a [data-theme] block.
     • The customer's brand colour is the INK, written to --brand-color by
       DivisionBrandingService and surfaced as --brand-primary. The default
       ink is Workplace Ink #1E2A3A.
     • Default page (no [data-theme]) renders as Workplace Paper.

   Anchor is NOT used. This is Ricoh Paper, standalone.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Font — Graphik (brand face) with Inter metric-equivalent fallback ──── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v19/UcCm3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dNmpRdxtp-o.woff2') format('woff2');
}

/* ════════════════════════════════════════════════════════════════════════
   BASE — typography, spacing, motion, radii (theme-agnostic)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* Type stack — Graphik is the brand face (Anchor is retired); Inter is the
     metric-equivalent fallback shipped here for prototyping. */
  --font-sans:    'Graphik', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    'SF Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — compact utility interface (max body 13px, headers ≤ 24px) */
  --fs-caption:    10px;   /* hour labels, heat legends, filter counts */
  --fs-tag:        11px;   /* SECTION labels, uppercase */
  --fs-body-sm:    12px;   /* chip text, metadata */
  --fs-body:       13px;   /* default body, results */
  --fs-label:      14px;   /* button + form labels */
  --fs-display:    18px;   /* panel headers */
  --fs-display-lg: 24px;   /* space names in detail view */
  --lh-tight: 1.2;
  --lh-body:  1.45;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tracking-tag: 0.08em;

  /* Spacing — 8-multiple system. Bind every gap/padding to these. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radii */
  --radius-sm: 8px;   /* buttons (rect), inputs, dropdown items */
  --radius-md: 12px;  /* mid-tier cards */
  --radius:    16px;  /* primary containers — cards, panels, buttons */
  --radius-lg: 14px;  /* secondary panels */
  --radius-xl: 18px;  /* hero cards */
  --radius-pill: 100px;

  /* Motion — four durations, two curves. --ease carries 95% of the system. */
  --motion-fast: 150ms; --motion: 250ms; --motion-page: 300ms; --motion-slow: 450ms;
  --ease:        cubic-bezier(.16, 1, .3, 1);     /* spring — opens, reveals */
  --ease-sharp:  cubic-bezier(.4, 0, .2, 1);      /* mobile touch */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* favourite, bookmark */
  --transition: 0.25s ease; --transition-slow: 0.4s ease;

  /* Glass blur depth scale */
  --card-blur:    blur(20px);  --card-blur-12: blur(12px);
  --card-blur-8:  blur(8px);   --card-blur-4:  blur(4px);

  /* THE INK — default brand colour. DivisionBrandingService overrides
     --brand-color per division (RDx green, Ricoh red, …). Default is
     Workplace Ink. The brand bridge below turns this into --brand-primary. */
  --brand-color: #1E2A3A;

  /* Availability spectrum — resolves per-theme via the var() chain. */
  --avail-available:    var(--success);
  --avail-booked:       var(--danger);
  --avail-at-capacity:  var(--warning);
  --avail-not-bookable: var(--text-tertiary);
  --avail-blocked:      var(--text-secondary);
  --avail-restricted:   var(--warning-strong, var(--warning));
}

/* ── Font axis — [data-font] on <html> ─────────────────────────────────── */
[data-font="inter"]     { --font-sans: 'Inter', -apple-system, sans-serif; --font-display: var(--font-sans); }
[data-font="editorial"] { --font-sans: 'Inter', -apple-system, sans-serif; --font-display: var(--font-serif); }
[data-font="graphik"]   { --font-sans: 'Graphik', 'Inter', system-ui, sans-serif; --font-display: var(--font-sans); }
[data-font="museo"]     { --font-sans: 'museo-sans', 'Inter', system-ui, sans-serif; --font-display: var(--font-sans); }

/* ════════════════════════════════════════════════════════════════════════
   COLOUR SCHEMES (papers) — 8 themes
   Default page (:root) = Workplace Paper, the product default.
   ════════════════════════════════════════════════════════════════════════ */

/* THEME — WARM (light, low-chroma yellow paper) */
[data-theme="warm"] {
  --surface-base: oklch(0.95 0.012 75); --surface-raised: oklch(0.98 0.008 75);
  --surface-overlay: oklch(1.00 0 0); --surface-sunken: oklch(0.92 0.014 75);
  --surface-hover: oklch(0.93 0.013 75); --surface-pressed: oklch(0.90 0.014 75);
  --surface-disabled: oklch(0.96 0.006 75);
  --text-primary: oklch(0.20 0.010 75); --text-secondary: oklch(0.45 0.012 75);
  --text-tertiary: oklch(0.60 0.010 75); --text-disabled: oklch(0.72 0.008 75);
  --text-link: oklch(0.45 0.16 240);
  --border-subtle: oklch(0.88 0.012 75); --border-default: oklch(0.82 0.014 75); --border-strong: oklch(0.65 0.014 75);
  --ring-focus: oklch(0.65 0.18 235);
  --shadow-sm: 0 1px 2px 0 oklch(0.20 0.010 75 / 0.06); --shadow-md: 0 4px 12px -2px oklch(0.20 0.010 75 / 0.08); --shadow-lg: 0 12px 32px -4px oklch(0.20 0.010 75 / 0.12);
  --accent-emerald-bg: oklch(0.92 0.04 145); --accent-emerald-text: oklch(0.38 0.10 145);
  --accent-rose-bg: oklch(0.92 0.04 20); --accent-rose-text: oklch(0.40 0.12 20);
  --accent-amber-bg: oklch(0.93 0.05 70); --accent-amber-text: oklch(0.40 0.12 60);
  --accent-violet-bg: oklch(0.92 0.04 290); --accent-violet-text: oklch(0.40 0.12 290);
  --accent-sky-bg: oklch(0.93 0.04 235); --accent-sky-text: oklch(0.40 0.12 235);
  --ai-gradient-from: oklch(0.55 0.20 290); --ai-gradient-to: oklch(0.58 0.18 15); --ai-gradient-text: oklch(1 0 0);
  --warning-strong: oklch(0.70 0.16 60); --warning-soft: oklch(0.94 0.05 70);
  --success-strong: oklch(0.50 0.13 145); --success-soft: oklch(0.92 0.05 145);
  --error-strong: oklch(0.55 0.20 25); --error-soft: oklch(0.94 0.05 25);
  --info-strong: oklch(0.50 0.15 235); --info-soft: oklch(0.93 0.04 235);
  --glass-bg: oklch(1 0 0 / 0.62); --glass-border: oklch(0.20 0.010 75 / 0.12); --glass-blur: blur(14px) saturate(160%);
  --action-affirmative-bg: oklch(0.42 0.13 152); --action-affirmative-bg-hover: oklch(0.36 0.14 152); --action-affirmative-bg-pressed: oklch(0.32 0.14 152); --action-affirmative-text: oklch(1 0 0);
}

/* THEME — PURE (light, neutral) */
[data-theme="pure"] {
  --surface-base: oklch(1.00 0 0); --surface-raised: oklch(1.00 0 0);
  --surface-overlay: oklch(1.00 0 0); --surface-sunken: oklch(0.97 0 0);
  --surface-hover: oklch(0.96 0 0); --surface-pressed: oklch(0.94 0 0); --surface-disabled: oklch(0.98 0 0);
  --text-primary: oklch(0.18 0 0); --text-secondary: oklch(0.42 0 0);
  --text-tertiary: oklch(0.58 0 0); --text-disabled: oklch(0.72 0 0); --text-link: oklch(0.45 0.16 240);
  --border-subtle: oklch(0.92 0 0); --border-default: oklch(0.85 0 0); --border-strong: oklch(0.65 0 0);
  --ring-focus: oklch(0.65 0.18 235);
  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05); --shadow-md: 0 4px 12px -2px oklch(0 0 0 / 0.08); --shadow-lg: 0 12px 32px -4px oklch(0 0 0 / 0.12);
  --accent-emerald-bg: oklch(0.94 0.06 145); --accent-emerald-text: oklch(0.36 0.12 145);
  --accent-rose-bg: oklch(0.94 0.06 20); --accent-rose-text: oklch(0.40 0.14 20);
  --accent-amber-bg: oklch(0.94 0.07 70); --accent-amber-text: oklch(0.40 0.14 60);
  --accent-violet-bg: oklch(0.94 0.06 290); --accent-violet-text: oklch(0.40 0.14 290);
  --accent-sky-bg: oklch(0.94 0.06 235); --accent-sky-text: oklch(0.40 0.14 235);
  --ai-gradient-from: oklch(0.55 0.20 290); --ai-gradient-to: oklch(0.58 0.18 15); --ai-gradient-text: oklch(1 0 0);
  --warning-strong: oklch(0.68 0.18 55); --warning-soft: oklch(0.96 0.07 70);
  --success-strong: oklch(0.50 0.15 145); --success-soft: oklch(0.94 0.06 145);
  --error-strong: oklch(0.55 0.22 25); --error-soft: oklch(0.95 0.06 25);
  --info-strong: oklch(0.50 0.16 235); --info-soft: oklch(0.94 0.06 235);
  --glass-bg: oklch(1 0 0 / 0.70); --glass-border: oklch(0 0 0 / 0.08); --glass-blur: blur(14px) saturate(160%);
  --action-affirmative-bg: oklch(0.42 0.13 152); --action-affirmative-bg-hover: oklch(0.36 0.14 152); --action-affirmative-bg-pressed: oklch(0.32 0.14 152); --action-affirmative-text: oklch(1 0 0);
}

/* THEME — MIDNIGHT (dark, slate-blue) */
[data-theme="midnight"] {
  --surface-base: oklch(0.20 0.020 250); --surface-raised: oklch(0.24 0.022 250);
  --surface-overlay: oklch(0.28 0.022 250); --surface-sunken: oklch(0.16 0.020 250);
  --surface-hover: oklch(0.26 0.022 250); --surface-pressed: oklch(0.30 0.022 250); --surface-disabled: oklch(0.22 0.018 250);
  --text-primary: oklch(0.95 0.005 250); --text-secondary: oklch(0.72 0.012 250);
  --text-tertiary: oklch(0.55 0.014 250); --text-disabled: oklch(0.42 0.012 250); --text-link: oklch(0.78 0.16 240);
  --border-subtle: oklch(0.30 0.022 250); --border-default: oklch(0.36 0.022 250); --border-strong: oklch(0.55 0.020 250);
  --ring-focus: oklch(0.72 0.20 235);
  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.40); --shadow-md: 0 4px 14px -2px oklch(0 0 0 / 0.50); --shadow-lg: 0 14px 36px -4px oklch(0 0 0 / 0.60);
  --accent-emerald-bg: oklch(0.30 0.06 145); --accent-emerald-text: oklch(0.85 0.14 145);
  --accent-rose-bg: oklch(0.30 0.07 20); --accent-rose-text: oklch(0.85 0.14 20);
  --accent-amber-bg: oklch(0.32 0.07 70); --accent-amber-text: oklch(0.88 0.14 80);
  --accent-violet-bg: oklch(0.30 0.07 290); --accent-violet-text: oklch(0.85 0.14 290);
  --accent-sky-bg: oklch(0.30 0.07 235); --accent-sky-text: oklch(0.85 0.14 235);
  --ai-gradient-from: oklch(0.58 0.20 290); --ai-gradient-to: oklch(0.62 0.18 15); --ai-gradient-text: oklch(1 0 0);
  --warning-strong: oklch(0.78 0.16 70); --warning-soft: oklch(0.32 0.08 70);
  --success-strong: oklch(0.78 0.14 145); --success-soft: oklch(0.30 0.06 145);
  --error-strong: oklch(0.78 0.18 25); --error-soft: oklch(0.30 0.07 25);
  --info-strong: oklch(0.78 0.16 235); --info-soft: oklch(0.30 0.07 235);
  --glass-bg: oklch(0.30 0.025 250 / 0.55); --glass-border: oklch(1 0 0 / 0.10); --glass-blur: blur(14px) saturate(160%);
  --action-affirmative-bg: oklch(0.50 0.15 152); --action-affirmative-bg-hover: oklch(0.55 0.16 152); --action-affirmative-bg-pressed: oklch(0.45 0.14 152); --action-affirmative-text: oklch(1 0 0);
}

/* THEME — BLACK (dark, true-black OLED) */
[data-theme="black"] {
  --surface-base: oklch(0.10 0 0); --surface-raised: oklch(0.14 0 0);
  --surface-overlay: oklch(0.18 0 0); --surface-sunken: oklch(0.06 0 0);
  --surface-hover: oklch(0.16 0 0); --surface-pressed: oklch(0.20 0 0); --surface-disabled: oklch(0.12 0 0);
  --text-primary: oklch(0.96 0 0); --text-secondary: oklch(0.70 0 0);
  --text-tertiary: oklch(0.50 0 0); --text-disabled: oklch(0.36 0 0); --text-link: oklch(0.78 0.16 240);
  --border-subtle: oklch(0.22 0 0); --border-default: oklch(0.30 0 0); --border-strong: oklch(0.50 0 0);
  --ring-focus: oklch(0.72 0.20 235);
  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.50); --shadow-md: 0 4px 14px -2px oklch(0 0 0 / 0.60); --shadow-lg: 0 14px 36px -4px oklch(0 0 0 / 0.70);
  --accent-emerald-bg: oklch(0.24 0.06 145); --accent-emerald-text: oklch(0.85 0.14 145);
  --accent-rose-bg: oklch(0.24 0.07 20); --accent-rose-text: oklch(0.85 0.14 20);
  --accent-amber-bg: oklch(0.26 0.07 70); --accent-amber-text: oklch(0.88 0.14 80);
  --accent-violet-bg: oklch(0.24 0.07 290); --accent-violet-text: oklch(0.85 0.14 290);
  --accent-sky-bg: oklch(0.24 0.07 235); --accent-sky-text: oklch(0.85 0.14 235);
  --ai-gradient-from: oklch(0.60 0.20 290); --ai-gradient-to: oklch(0.64 0.18 15); --ai-gradient-text: oklch(1 0 0);
  --warning-strong: oklch(0.78 0.16 70); --warning-soft: oklch(0.26 0.08 70);
  --success-strong: oklch(0.78 0.14 145); --success-soft: oklch(0.24 0.06 145);
  --error-strong: oklch(0.78 0.18 25); --error-soft: oklch(0.24 0.07 25);
  --info-strong: oklch(0.78 0.16 235); --info-soft: oklch(0.24 0.07 235);
  --glass-bg: oklch(0.20 0 0 / 0.60); --glass-border: oklch(1 0 0 / 0.10); --glass-blur: blur(14px) saturate(160%);
  --action-affirmative-bg: oklch(0.50 0.15 152); --action-affirmative-bg-hover: oklch(0.55 0.16 152); --action-affirmative-bg-pressed: oklch(0.45 0.14 152); --action-affirmative-text: oklch(1 0 0);
}

/* THEME — WORKPLACE PAPER (default light · sage/clay/plum/cool) */
:root,
[data-theme="workplace-paper"] {
  --surface-base: oklch(0.948 0.006 75); --surface-raised: oklch(1.00 0 0);
  --surface-overlay: oklch(1.00 0 0); --surface-sunken: oklch(0.935 0.004 75);
  --surface-hover: oklch(0.928 0.005 75); --surface-pressed: oklch(0.900 0.006 75); --surface-disabled: oklch(0.945 0.004 75);
  --text-primary: oklch(0.205 0 0); --text-secondary: oklch(0.430 0 0);
  --text-tertiary: oklch(0.620 0 0); --text-disabled: oklch(0.750 0 0); --text-link: oklch(0.260 0.038 250);
  --border-subtle: oklch(0.870 0.010 80); --border-default: oklch(0.795 0.012 80); --border-strong: oklch(0.717 0.014 80);
  --ring-focus: oklch(0.260 0.038 250);
  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.04); --shadow-md: 0 4px 12px -2px oklch(0 0 0 / 0.06); --shadow-lg: 0 12px 32px -4px oklch(0 0 0 / 0.10);
  --accent-emerald-bg: oklch(0.93 0.04 150); --accent-emerald-text: oklch(0.488 0.090 150);
  --accent-rose-bg: oklch(0.93 0.04 30); --accent-rose-text: oklch(0.480 0.165 30);
  --accent-amber-bg: oklch(0.93 0.05 65); --accent-amber-text: oklch(0.620 0.130 60);
  --accent-violet-bg: oklch(0.926 0.012 245); --accent-violet-text: oklch(0.260 0.038 250);
  --accent-sky-bg: oklch(0.92 0.025 235); --accent-sky-text: oklch(0.395 0.082 245);
  --ai-gradient-from: oklch(0.55 0.20 290); --ai-gradient-to: oklch(0.58 0.18 15); --ai-gradient-text: oklch(1 0 0);
  --warning-strong: oklch(0.620 0.130 60); --warning-soft: oklch(0.93 0.05 65);
  --success-strong: oklch(0.488 0.090 150); --success-soft: oklch(0.93 0.04 150);
  --error-strong: oklch(0.480 0.165 30); --error-soft: oklch(0.93 0.04 30);
  --info-strong: oklch(0.395 0.082 245); --info-soft: oklch(0.926 0.012 245);
  --glass-bg: oklch(0.987 0.004 75 / 0.78); --glass-border: oklch(0 0 0 / 0.06); --glass-blur: blur(4px) saturate(180%);
  --action-affirmative-bg: oklch(0.42 0.13 152); --action-affirmative-bg-hover: oklch(0.36 0.14 152); --action-affirmative-bg-pressed: oklch(0.32 0.14 152); --action-affirmative-text: oklch(1 0 0);
  /* Paper palette aliases — editorial names from the prototype tokens. */
  --canvas: #F4F2EE; --surface: #FDFCFA;
  --ink: #1E2A3A; --ink-hover: #101826; --ink-soft: #E8ECF1; --on-ink: #FDFCFA;
  --warning: #B87333; --success: #3F7A55; --danger: #A03020; --info: #2C5470; --accent-cool: #9FABB5;
  --danger-soft: var(--error-soft); --shadow-overlay: var(--shadow-lg);
}

/* THEME — WORKPLACE SLATE (default dark · warm-paper text, slate-blue accent) */
[data-theme="workplace-slate"] {
  --surface-base: oklch(0.100 0.002 280); --surface-raised: oklch(0.155 0.005 280);
  --surface-overlay: oklch(0.205 0.005 280); --surface-sunken: oklch(0.130 0.005 280);
  --surface-hover: oklch(0.205 0.005 280); --surface-pressed: oklch(0.240 0.008 280); --surface-disabled: oklch(0.130 0.005 280);
  --text-primary: oklch(0.948 0.006 80); --text-secondary: oklch(0.717 0.014 80);
  --text-tertiary: oklch(0.530 0.008 80); --text-disabled: oklch(0.400 0 0); --text-link: oklch(0.745 0.055 245);
  --border-subtle: oklch(0.240 0.008 280); --border-default: oklch(0.290 0.008 280); --border-strong: oklch(0.380 0.012 280);
  --ring-focus: oklch(0.745 0.055 245);
  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.30); --shadow-md: 0 4px 12px -2px oklch(0 0 0 / 0.40); --shadow-lg: 0 12px 32px -4px oklch(0 0 0 / 0.50);
  --accent-emerald-bg: oklch(0.30 0.07 150); --accent-emerald-text: oklch(0.692 0.110 152);
  --accent-rose-bg: oklch(0.30 0.10 28); --accent-rose-text: oklch(0.668 0.158 28);
  --accent-amber-bg: oklch(0.32 0.07 65); --accent-amber-text: oklch(0.715 0.130 65);
  --accent-violet-bg: oklch(0.260 0.038 250); --accent-violet-text: oklch(0.745 0.055 245);
  --accent-sky-bg: oklch(0.28 0.06 245); --accent-sky-text: oklch(0.685 0.075 245);
  --ai-gradient-from: oklch(0.58 0.20 290); --ai-gradient-to: oklch(0.62 0.18 15); --ai-gradient-text: oklch(1 0 0);
  --warning-strong: oklch(0.715 0.130 65); --warning-soft: oklch(0.32 0.07 65);
  --success-strong: oklch(0.692 0.110 152); --success-soft: oklch(0.30 0.07 150);
  --error-strong: oklch(0.668 0.158 28); --error-soft: oklch(0.30 0.10 28);
  --info-strong: oklch(0.685 0.075 245); --info-soft: oklch(0.28 0.06 245);
  --glass-bg: oklch(0.155 0.005 280 / 0.78); --glass-border: oklch(1 0 0 / 0.08); --glass-blur: blur(4px) saturate(160%) brightness(90%);
  --action-affirmative-bg: oklch(0.50 0.15 152); --action-affirmative-bg-hover: oklch(0.55 0.16 152); --action-affirmative-bg-pressed: oklch(0.45 0.14 152); --action-affirmative-text: oklch(1 0 0);
  /* Paper-palette aliases — parity with the paper block (:221). Without these,
     any component using the editorial alias names renders LIGHT in slate (the
     alias falls through to the :root/paper value). --danger/--warning/--success
     are intentionally omitted — they already resolve via the global
     :root,[data-theme] block (--danger: var(--error-strong), :312). */
  --canvas: oklch(0.100 0.002 280); --surface: oklch(0.155 0.005 280);
  --ink: oklch(0.948 0.006 80); --ink-hover: oklch(0.985 0.004 80); --ink-soft: oklch(0.205 0.005 280); --on-ink: oklch(0.130 0.005 280);
  --info: oklch(0.685 0.075 245); --accent-cool: oklch(0.620 0.012 250);
  --danger-soft: var(--error-soft); --shadow-overlay: var(--shadow-lg);
}

/* THEME — LEGACY DARK (current-dark) */
[data-theme="dark"] {
  --surface-base: #000; --surface-raised: #121212; --surface-overlay: #181818;
  --surface-sunken: #0e0e0e; --surface-hover: #181818; --surface-pressed: #272727; --surface-disabled: #121212;
  --text-primary: #fff; --text-secondary: #b8b8b8; --text-tertiary: #8f8f8f; --text-disabled: #4f4f4f; --text-link: oklch(0.78 0.13 240);
  --border-subtle: #1a1a1a; --border-default: #2c2c2c; --border-strong: #404040; --ring-focus: oklch(0.72 0.20 235);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.5); --shadow-md: 0 2px 6px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.15); --shadow-lg: 0 14px 36px -4px rgba(0,0,0,.7);
  --accent-emerald-bg: oklch(0.30 0.06 145); --accent-emerald-text: oklch(0.85 0.14 145);
  --accent-rose-bg: oklch(0.30 0.07 20); --accent-rose-text: oklch(0.85 0.14 20);
  --accent-amber-bg: oklch(0.32 0.07 70); --accent-amber-text: oklch(0.88 0.14 80);
  --accent-violet-bg: oklch(0.28 0.10 285); --accent-violet-text: oklch(0.78 0.16 290);
  --accent-sky-bg: oklch(0.32 0.10 245); --accent-sky-text: oklch(0.88 0.10 245);
  --ai-gradient-from: oklch(0.58 0.20 290); --ai-gradient-to: oklch(0.62 0.18 15); --ai-gradient-text: oklch(1 0 0);
  --warning-strong: #f59e0b; --warning-soft: #261c08; --success-strong: #10b981; --success-soft: #1a2e20;
  --error-strong: #ef4444; --error-soft: #2e1a1a; --info-strong: oklch(0.62 0.19 255); --info-soft: oklch(0.30 0.07 235);
  --glass-bg: rgba(14,14,14,.82); --glass-border: rgba(255,255,255,.08); --glass-blur: blur(20px);
  --action-affirmative-bg: oklch(0.50 0.15 152); --action-affirmative-bg-hover: oklch(0.55 0.16 152); --action-affirmative-bg-pressed: oklch(0.45 0.14 152); --action-affirmative-text: #fff;
}

/* THEME — LEGACY LIGHT (current-light) */
[data-theme="light"] {
  --surface-base: #F4F2EE; --surface-raised: #fff; --surface-overlay: #fff;
  --surface-sunken: #ECE9E2; --surface-hover: #efefef; --surface-pressed: #ededed; --surface-disabled: #f8f8f8;
  --text-primary: #000; --text-secondary: #595959; --text-tertiary: #595959; --text-disabled: #4d4d4d; --text-link: oklch(0.48 0.27 285);
  --border-subtle: #E5E5E5; --border-default: #D0D0D0; --border-strong: #B0B0B0; --ring-focus: oklch(0.48 0.27 285);
  --shadow-sm: 0 1px 2px 0 rgba(120,100,70,.06); --shadow-md: 0px 2px 16px rgba(120,100,70,.08); --shadow-lg: 0 12px 32px -4px rgba(120,100,70,.14);
  --accent-emerald-bg: oklch(0.93 0.05 145); --accent-emerald-text: oklch(0.36 0.13 145);
  --accent-rose-bg: oklch(0.93 0.04 25); --accent-rose-text: oklch(0.40 0.14 25);
  --accent-amber-bg: oklch(0.93 0.05 70); --accent-amber-text: oklch(0.40 0.13 60);
  --accent-violet-bg: oklch(0.92 0.04 290); --accent-violet-text: oklch(0.40 0.12 290);
  --accent-sky-bg: oklch(0.93 0.05 245); --accent-sky-text: oklch(0.36 0.14 245);
  --ai-gradient-from: oklch(0.55 0.20 290); --ai-gradient-to: oklch(0.58 0.18 15); --ai-gradient-text: oklch(1 0 0);
  --warning-strong: #f59e0b; --warning-soft: #fef3c7; --success-strong: #10b981; --success-soft: #e8f5e9;
  --error-strong: #ef4444; --error-soft: #fce4ec; --info-strong: oklch(0.50 0.16 235); --info-soft: oklch(0.93 0.04 235);
  --glass-bg: rgba(255,255,255,.88); --glass-border: rgba(0,0,0,.08); --glass-blur: blur(28px) saturate(180%);
  --action-affirmative-bg: oklch(0.42 0.13 152); --action-affirmative-bg-hover: oklch(0.36 0.14 152); --action-affirmative-bg-pressed: oklch(0.32 0.14 152); --action-affirmative-text: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   BRAND BRIDGE — ink → --brand-primary (applies to every theme)
   DivisionBrandingService writes --brand-color (the ink). We surface it as
   --brand-primary + WCAG-safe focus ring + legacy --color-primary.
   ════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme] {
  --brand-primary:         var(--brand-color, var(--text-link));
  --brand-primary-hover:   var(--brand-color-hover, var(--brand-primary));
  --brand-primary-pressed: var(--brand-color-pressed, var(--brand-primary));
  --brand-on-primary:      var(--brand-text, #fff);
  --brand-focus-ring:      color-mix(in srgb, var(--brand-primary) 35%, transparent);

  --color-primary:      var(--brand-primary);
  --color-primary-bg:   var(--brand-color-bg, color-mix(in srgb, var(--brand-primary) 12%, transparent));
  --color-primary-text: var(--brand-primary);
  --color-favourite:    #e84393;
  --color-oof:          #a855f7;

  /* Legacy semantic aliases so older component CSS keeps resolving. */
  --bg: var(--surface-base); --surface-1: var(--surface-raised); --surface-2: var(--surface-raised); --surface-3: var(--surface-sunken);
  --card-bg: var(--surface-raised); --card-bg-solid: var(--surface-raised);
  --text: var(--text-primary); --text-footer: var(--text-disabled);
  --border-low: var(--border-subtle); --border-med: var(--border-default); --border-high: var(--border-strong);
  --success: var(--success-strong); --warning: var(--warning-strong); --danger: var(--error-strong);
  --chip-bg: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --chip-active-bg: color-mix(in srgb, var(--text-primary) 14%, transparent);
  --hover-overlay: color-mix(in srgb, var(--text-primary) 4%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════
   TYPE UTILITY CLASSES + GLASS — use these, not raw px
   ════════════════════════════════════════════════════════════════════════ */
html, body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.t-display-lg { font-size: var(--fs-display-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.t-display    { font-size: var(--fs-display);    font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.005em; }
.t-label      { font-size: var(--fs-label);      font-weight: var(--fw-medium); }
.t-body       { font-size: var(--fs-body);       font-weight: var(--fw-regular); line-height: var(--lh-body); }
.t-body-sm    { font-size: var(--fs-body-sm);    font-weight: var(--fw-regular); color: var(--text-secondary); }
.t-tag        { font-size: var(--fs-tag); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-tag); color: var(--text-tertiary); }
.t-caption    { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--text-tertiary); }
.t-mono       { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.t-num        { font-variant-numeric: tabular-nums; }

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}