/* Marketiism OS design tokens.
   The ONLY file in the repo allowed to contain colour literals (enforced by ui/tests.py).
   Light is the default. Dark applies when the OS asks for it (unless the user picked light),
   or when any element carries data-theme="dark". data-theme="light" forces light on a subtree. */

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

  /* Chrome: console top bar, marketing dark bands, footer */
  --chrome: #0F1B2D;
  --chrome-2: #1A2940;
  --chrome-3: #243650;
  --chrome-line: #2C3D56;
  --chrome-ink: #FFFFFF;
  --chrome-ink-2: #D3DAE3;
  --chrome-muted: #9AA7B8;

  /* Surfaces */
  --bg: #F2F3F3;
  --surface: #FFFFFF;
  --surface-2: #FAFAFA;
  --surface-3: #F0F2F4;   /* hover, zebra, code */
  --surface-sel: #F1F7FE; /* selected rows, active nav */

  /* Lines */
  --line: #D5DBDB;
  --line-strong: #AAB7B8;
  --line-input: #7D8998;  /* form control borders: 3:1 against surface */

  /* Text */
  --ink: #16191F;
  --ink-2: #414D5C;
  --muted: #5F6B7A;
  --ink-inverse: #FFFFFF;

  /* Brand */
  --brand: #FF3D57;
  --brand-ink: #D6213B;
  --brand-soft: #FFF0F2;
  --brand-btn: #E02A44;        /* primary button fill: white text passes AA (4.6:1) */
  --brand-btn-hover: #C21D36;
  --brand-btn-ink: #FFFFFF;

  /* Interactive */
  --link: #0972D3;
  --link-hover: #033160;
  --focus: #0972D3;
  --focus-width: 2px;
  --selection: #CCE3FA;

  /* Status (text/dot colour + background pair) */
  --success: #037F0C;  --success-bg: #EFF9F0;  --success-line: #9FD6A5;
  --warning: #8D6605;  --warning-bg: #FFF8E1;  --warning-line: #E8C774;
  --error: #D91515;    --error-bg: #FFF1F1;    --error-line: #F2A3A3;
  --info: #0972D3;     --info-bg: #F0F7FF;     --info-line: #9CC7F2;
  --stopped: #5F6B7A;  --stopped-bg: #F0F2F4;  --stopped-line: #C6CED6;

  /* Data visualisation */
  --data-1: #0972D3;
  --data-1-soft: #DCEBFA;
  --data-2: #FF3D57;
  --data-3: #037F0C;
  --data-grid: #E6EAEC;

  /* Overlays */
  --scrim: #0F1B2D73;
  --shadow-pop: 0 1px 2px #0F1B2D14, 0 8px 24px -6px #0F1B2D33;

  /* Shape */
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

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

  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px;
  --fs-24: 24px; --fs-32: 32px; --fs-44: 44px; --fs-56: 56px;
  --fs-13: 13px;                  /* WP-15: table meta, sub-lines, phone card labels */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh: 1.5; --lh-loose: 1.6;
  --track-tight: -0.02em; --track-display: -0.035em; --track-caps: 0.06em;

  /* Layout */
  --topbar-h: 48px;
  --side-w: 240px;
  --side-w-rail: 56px;
  --content-max: 1280px;
  --wrap: 1200px;
  --focus-narrow: 440px;
  --focus-wide: 960px;
  --control-h: 32px;
  --control-h-sm: 28px;
  --control-h-lg: 40px;

  /* Layers */
  --z-sticky: 20; --z-top: 40; --z-menu: 50; --z-drawer: 60; --z-modal: 80; --z-toast: 90;
  --z-fab: 55; --z-cookie: 58;   /* WP-9D: below drawers and dialogs, above page content */
  --z-install: 57;                /* WP-10F: floating install banner, under the cookie bar */
  --touch-min: 44px;              /* WP-10F: minimum touch target on phones (console top bar, nav, menus) */

  /* Floating action button, cookie bar, OTP input (WP-9D) */
  --fab-size: 56px;
  --fab-size-sm: 52px;
  --fab-gap: 16px;                 /* distance from the viewport edge (plus the safe-area inset) */
  --fab-success: #15803D;          /* chat FAB fill: white text 5.0:1 */
  --fab-success-hover: #116A32;
  --fab-success-ink: #FFFFFF;
  --fab-ring: #FFFFFF00;           /* outline that separates the FAB from dark pages */
  --cookie-max: 960px;
  --otp-size: 28px;
  --otp-track: 0.5em;
  --meter-h: 8px;

  /* WP-15: command palette, stacked phone tables, touch controls */
  --pal-w: 640px;
  --pal-h: 560px;
  --pal-top: 12vh;
  --pal-row-h: 40px;
  --stack-label-max: 45%;
  --empty-max: 520px;

  /* Motion */
  --t: 150ms;
  --t-slow: 220ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --chrome: #0B1422;
  --chrome-2: #15213A;
  --chrome-3: #1E2D47;
  --chrome-line: #24344C;
  --chrome-ink: #FFFFFF;
  --chrome-ink-2: #C9D2DD;
  --chrome-muted: #8D99A8;
  --bg: #0F141A;
  --surface: #161D26;
  --surface-2: #1B232D;
  --surface-3: #222B36;
  --surface-sel: #172A40;
  --line: #2A3440;
  --line-strong: #3D4A57;
  --line-input: #66768A;
  --ink: #E9EDF1;
  --ink-2: #C2CBD4;
  --muted: #8D99A8;
  --ink-inverse: #0F141A;
  --brand: #FF3D57;
  --brand-ink: #FF6B80;
  --brand-soft: #3A1820;
  --brand-btn: #E02A44;
  --brand-btn-hover: #F04660;
  --brand-btn-ink: #FFFFFF;
  --link: #539FE5;
  --link-hover: #89BDF0;
  --focus: #539FE5;
  --selection: #1F4A78;
  --success: #5FCB6B;  --success-bg: #12271A;  --success-line: #2D5B36;
  --warning: #E8B53A;  --warning-bg: #2C2410;  --warning-line: #5E4B1B;
  --error: #FF7A7A;    --error-bg: #331718;    --error-line: #6B2C2E;
  --info: #539FE5;     --info-bg: #10233A;     --info-line: #24486F;
  --stopped: #8D99A8;  --stopped-bg: #1F2731;  --stopped-line: #3D4A57;
  --data-1: #539FE5;
  --data-1-soft: #173252;
  --data-2: #FF5C73;
  --data-3: #5FCB6B;
  --data-grid: #263040;
  --scrim: #000000A6;
  --shadow-pop: 0 1px 2px #00000066, 0 12px 32px -8px #000000A6;
  --fab-ring: #FFFFFF3D;          /* WP-9D: light hairline so the FAB reads on dark pages */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --chrome: #0B1422;
    --chrome-2: #15213A;
    --chrome-3: #1E2D47;
    --chrome-line: #24344C;
    --chrome-ink: #FFFFFF;
    --chrome-ink-2: #C9D2DD;
    --chrome-muted: #8D99A8;
    --bg: #0F141A;
    --surface: #161D26;
    --surface-2: #1B232D;
    --surface-3: #222B36;
    --surface-sel: #172A40;
    --line: #2A3440;
    --line-strong: #3D4A57;
    --line-input: #66768A;
    --ink: #E9EDF1;
    --ink-2: #C2CBD4;
    --muted: #8D99A8;
    --ink-inverse: #0F141A;
    --brand: #FF3D57;
    --brand-ink: #FF6B80;
    --brand-soft: #3A1820;
    --brand-btn: #E02A44;
    --brand-btn-hover: #F04660;
    --brand-btn-ink: #FFFFFF;
    --link: #539FE5;
    --link-hover: #89BDF0;
    --focus: #539FE5;
    --selection: #1F4A78;
    --success: #5FCB6B;  --success-bg: #12271A;  --success-line: #2D5B36;
    --warning: #E8B53A;  --warning-bg: #2C2410;  --warning-line: #5E4B1B;
    --error: #FF7A7A;    --error-bg: #331718;    --error-line: #6B2C2E;
    --info: #539FE5;     --info-bg: #10233A;     --info-line: #24486F;
    --stopped: #8D99A8;  --stopped-bg: #1F2731;  --stopped-line: #3D4A57;
    --data-1: #539FE5;
    --data-1-soft: #173252;
    --data-2: #FF5C73;
    --data-3: #5FCB6B;
    --data-grid: #263040;
    --scrim: #000000A6;
    --shadow-pop: 0 1px 2px #00000066, 0 12px 32px -8px #000000A6;
    --fab-ring: #FFFFFF3D;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t: 0ms; --t-slow: 0ms; }
}

/* Public site theme (WP-4S). Scoped to body.site, so the console and focus shells never see these.
   site-theme.css maps the core tokens (--ink, --link, --brand-btn ...) onto these inside .site. */
.site {
  --site-font: "Plus Jakarta Sans", "Noto Sans Devanagari", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --site-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;   /* WP-9D: no web mono font on the site */
  --site-fs-display: clamp(40px, 6.2vw, 80px);
  --site-fs-display-page: clamp(36px, 4.6vw, 60px);
  --site-fs-h2: clamp(30px, 4vw, 52px);
  --site-fs-h3: 22px;
  --site-lh-display: 1.02;
  --site-track-display: -0.045em;
  --site-r-card: 24px;
  --site-r-section: 40px;
  --site-r-panel: 20px;
  --site-pill-h: 64px;
  --site-hero-wash: 960px;
  --site-space-band: 112px;
  --site-space-band-sm: 72px;
  --site-t-lift: 260ms;
  --site-t-float: 9s;
  --site-bg: #F8F6FD;
  --site-surface: #FFFFFF;
  --site-surface-2: #F4F1FB;
  --site-ink: #110D24;
  --site-ink-2: #474260;
  --site-muted: #67627D;
  --site-line: #E6E1F3;
  --site-line-strong: #CFC6EA;
  --site-violet: #6B3CF5;
  --site-violet-ink: #5A2DE0;
  --site-violet-soft: #EEE8FF;
  --site-btn: #5A2DE0;
  --site-btn-hover: #4A20C4;
  --site-btn-ink: #FFFFFF;
  --site-hero-1: #FBFAFF;
  --site-hero-2: #EDE6FF;
  --site-hero-3: #D9CBFF;
  --site-hero-4: #E6EEFF;
  --site-glass: #FFFFFF99;
  --site-glass-2: #FFFFFF40;
  --site-glass-line: #FFFFFFE6;
  --site-glass-tint: #A68BFF73;
  --site-glass-tint-2: #8FB0FF59;
  --site-glass-shade: #5A2DE026;
  --site-pill-bg: #FFFFFFE6;
  --site-chrome: #120C29;
  --site-chrome-2: #1D1640;
  --site-chrome-3: #2A2157;
  --site-chrome-line: #2E2659;
  --site-chrome-ink: #FFFFFF;
  --site-chrome-ink-2: #D6D0EC;
  --site-chrome-muted: #A49CC6;
  --site-chrome-accent: #B9A3FF;
  --site-shadow-nav: 0 2px 6px #1C10480F, 0 18px 40px -16px #2A145E40;
  --site-shadow-card: 0 1px 2px #1C10480D, 0 24px 48px -32px #2A145E4D;
  --site-shadow-lift: 0 2px 4px #1C104814, 0 32px 60px -28px #2A145E66;
}
[data-theme="dark"] .site, .site[data-theme="dark"] {
  --site-bg: #0E0A1E;
  --site-surface: #17122C;
  --site-surface-2: #1E1838;
  --site-ink: #F3F0FB;
  --site-ink-2: #C9C2DE;
  --site-muted: #A199BC;
  --site-line: #2C2550;
  --site-line-strong: #3F3670;
  --site-violet: #9C80FF;
  --site-violet-ink: #B9A3FF;
  --site-violet-soft: #2A2058;
  --site-btn: #B9A3FF;
  --site-btn-hover: #CDBDFF;
  --site-btn-ink: #120C29;
  --site-hero-1: #0E0A1E;
  --site-hero-2: #1B1440;
  --site-hero-3: #34257A;
  --site-hero-4: #16204A;
  --site-glass: #FFFFFF1A;
  --site-glass-2: #FFFFFF0D;
  --site-glass-line: #FFFFFF33;
  --site-glass-tint: #8E6BFF59;
  --site-glass-tint-2: #5C7DFF40;
  --site-glass-shade: #00000040;
  --site-pill-bg: #1E1838E6;
  --site-chrome: #08060F;
  --site-chrome-2: #151027;
  --site-chrome-3: #221A40;
  --site-chrome-line: #2A2247;
  --site-chrome-ink: #FFFFFF;
  --site-chrome-ink-2: #D6D0EC;
  --site-chrome-muted: #A49CC6;
  --site-chrome-accent: #B9A3FF;
  --site-shadow-nav: 0 2px 6px #00000066, 0 18px 40px -16px #000000B3;
  --site-shadow-card: 0 1px 2px #00000059, 0 24px 48px -32px #000000B3;
  --site-shadow-lift: 0 2px 4px #00000066, 0 32px 60px -28px #000000CC;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site {
    --site-bg: #0E0A1E;
    --site-surface: #17122C;
    --site-surface-2: #1E1838;
    --site-ink: #F3F0FB;
    --site-ink-2: #C9C2DE;
    --site-muted: #A199BC;
    --site-line: #2C2550;
    --site-line-strong: #3F3670;
    --site-violet: #9C80FF;
    --site-violet-ink: #B9A3FF;
    --site-violet-soft: #2A2058;
    --site-btn: #B9A3FF;
    --site-btn-hover: #CDBDFF;
    --site-btn-ink: #120C29;
    --site-hero-1: #0E0A1E;
    --site-hero-2: #1B1440;
    --site-hero-3: #34257A;
    --site-hero-4: #16204A;
    --site-glass: #FFFFFF1A;
    --site-glass-2: #FFFFFF0D;
    --site-glass-line: #FFFFFF33;
    --site-glass-tint: #8E6BFF59;
    --site-glass-tint-2: #5C7DFF40;
    --site-glass-shade: #00000040;
    --site-pill-bg: #1E1838E6;
    --site-chrome: #08060F;
    --site-chrome-2: #151027;
    --site-chrome-3: #221A40;
    --site-chrome-line: #2A2247;
    --site-chrome-ink: #FFFFFF;
    --site-chrome-ink-2: #D6D0EC;
    --site-chrome-muted: #A49CC6;
    --site-chrome-accent: #B9A3FF;
    --site-shadow-nav: 0 2px 6px #00000066, 0 18px 40px -16px #000000B3;
    --site-shadow-card: 0 1px 2px #00000059, 0 24px 48px -32px #000000B3;
    --site-shadow-lift: 0 2px 4px #00000066, 0 32px 60px -28px #000000CC;
  }
}
.site [data-theme="light"], [data-theme="light"] .site,
:root .site.site[data-theme="light"] {   /* WP-9D: a nested .site scope can force light inside a dark page */
  --site-bg: #F8F6FD;
  --site-surface: #FFFFFF;
  --site-surface-2: #F4F1FB;
  --site-ink: #110D24;
  --site-ink-2: #474260;
  --site-muted: #67627D;
  --site-line: #E6E1F3;
  --site-line-strong: #CFC6EA;
  --site-violet: #6B3CF5;
  --site-violet-ink: #5A2DE0;
  --site-violet-soft: #EEE8FF;
  --site-btn: #5A2DE0;
  --site-btn-hover: #4A20C4;
  --site-btn-ink: #FFFFFF;
  --site-hero-1: #FBFAFF;
  --site-hero-2: #EDE6FF;
  --site-hero-3: #D9CBFF;
  --site-hero-4: #E6EEFF;
  --site-glass: #FFFFFF99;
  --site-glass-2: #FFFFFF40;
  --site-glass-line: #FFFFFFE6;
  --site-glass-tint: #A68BFF73;
  --site-glass-tint-2: #8FB0FF59;
  --site-glass-shade: #5A2DE026;
  --site-pill-bg: #FFFFFFE6;
  --site-chrome: #120C29;
  --site-chrome-2: #1D1640;
  --site-chrome-3: #2A2157;
  --site-chrome-line: #2E2659;
  --site-chrome-ink: #FFFFFF;
  --site-chrome-ink-2: #D6D0EC;
  --site-chrome-muted: #A49CC6;
  --site-chrome-accent: #B9A3FF;
  --site-shadow-nav: 0 2px 6px #1C10480F, 0 18px 40px -16px #2A145E40;
  --site-shadow-card: 0 1px 2px #1C10480D, 0 24px 48px -32px #2A145E4D;
  --site-shadow-lift: 0 2px 4px #1C104814, 0 32px 60px -28px #2A145E66;
}
@media (prefers-reduced-motion: reduce) {
  .site { --site-t-lift: 0ms; }
}

/* ============================================================ Console theme (WP-6T)
   Scoped to body.console only: the public site and focus shells keep the tokens above.
   Navy collapsible sidebar, white topbar, blue primary, 14/10px radii, soft card shadow. */
.console {
  --bg: #F5F7FB;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #F1F4F9;
  --surface-sel: #EAF1FF;
  --line: #E6E9F0;
  --line-strong: #CBD2DE;
  --line-input: #8592A6;
  --ink: #0F172A;
  --ink-2: #334155;
  --muted: #5B6B80;   /* WP-15 (A1): 4.8:1 or better on every console surface incl. --bg, --surface-3, --surface-sel */
  --brand-btn: #2563EB;          /* primary buttons are blue in the console; coral stays on the logo */
  --brand-btn-hover: #1D4ED8;
  --brand-btn-ink: #FFFFFF;
  --link: #2563EB;
  --link-hover: #1E40AF;
  --focus: #2563EB;
  --selection: #CFE0FF;
  --info: #0369A1;     --info-bg: #EFF8FF;     --info-line: #A9D6F5;
  --success: #15803D;  --success-bg: #ECFDF3;  --success-line: #A6E3BC;
  --warning: #B45309;  --warning-bg: #FFF7E8;  --warning-line: #F3CD8C;
  --error: #DC2626;    --error-bg: #FEF2F2;    --error-line: #F5B5B5;
  --data-1: #2563EB;
  --data-1-soft: #DCE7FD;
  --data-2: #7C3AED;
  --data-grid: #EDF0F5;
  --shadow-card: 0 1px 2px #0F172A0A, 0 4px 16px #0F172A0A;
  --shadow-pop: 0 2px 4px #0F172A0F, 0 16px 40px -8px #0F172A33;
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --topbar-h: 64px;
  --side-w: 256px;
  --side-w-rail: 72px;
  --control-h: 36px;
  --control-h-sm: 30px;
  --content-max: 1360px;
  --primary-soft: #EAF1FF;
  --accent: #7C3AED;
  --accent-soft: #F1EAFE;
  /* Sidebar */
  --side-bg: #0A1A3A;
  --side-line: #1A2C52;
  --side-ink: #FFFFFF;
  --side-ink-2: #C3CDE0;
  --side-muted: #8494B5;
  --side-hover: #13264D;
  --side-active: #2563EB;
  --side-active-ink: #FFFFFF;
  /* Topbar */
  --top-bg: #FFFFFF;
  --top-field: #F1F4F9;
  /* KPI icon tiles (ink + soft background) */
  --tile-blue: #2563EB;    --tile-blue-bg: #EAF1FF;
  --tile-violet: #7C3AED;  --tile-violet-bg: #F1EAFE;
  --tile-green: #15803D;   --tile-green-bg: #E7F8EE;
  --tile-amber: #B45309;   --tile-amber-bg: #FFF3E0;
  --tile-red: #DC2626;     --tile-red-bg: #FDECEC;
  --tile-cyan: #0369A1;    --tile-cyan-bg: #E3F4FC;
}
[data-theme="dark"] .console, .console[data-theme="dark"] {
  --bg: #0B1220;
  --surface: #111A2E;
  --surface-2: #142038;
  --surface-3: #1A2740;
  --surface-sel: #172554;
  --line: #1F2A44;
  --line-strong: #33415F;
  --line-input: #5B6B8A;
  --ink: #E6EBF5;
  --ink-2: #C1CADB;
  --muted: #94A3B8;
  --ink-inverse: #0B1220;
  --brand-btn: #2563EB;
  --brand-btn-hover: #3B82F6;
  --link: #6EA2FF;
  --link-hover: #A5C4FF;
  --focus: #6EA2FF;
  --selection: #1E3A8A;
  --info: #5BB8EE;     --info-bg: #0C2236;     --info-line: #1D4A6B;
  --success: #4ADE80;  --success-bg: #0D2618;  --success-line: #1F5233;
  --warning: #F5B54A;  --warning-bg: #2A1E0B;  --warning-line: #5C421A;
  --error: #F87171;    --error-bg: #2D1215;    --error-line: #63272C;
  --data-1: #6EA2FF;
  --data-1-soft: #1A2C55;
  --data-2: #A78BFA;
  --data-grid: #1C2740;
  --shadow-card: 0 1px 2px #0000004D;
  --shadow-pop: 0 2px 4px #00000066, 0 16px 40px -8px #000000A6;
  --primary-soft: #172554;
  --accent: #A78BFA;
  --accent-soft: #261A47;
  --side-bg: #070F22;
  --side-line: #16223D;
  --side-hover: #111D38;
  --top-bg: #111A2E;
  --top-field: #0B1220;
  --tile-blue: #6EA2FF;    --tile-blue-bg: #172554;
  --tile-violet: #A78BFA;  --tile-violet-bg: #261A47;
  --tile-green: #4ADE80;   --tile-green-bg: #0D2618;
  --tile-amber: #F5B54A;   --tile-amber-bg: #2A1E0B;
  --tile-red: #F87171;     --tile-red-bg: #2D1215;
  --tile-cyan: #5BB8EE;    --tile-cyan-bg: #0C2236;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .console {
    --bg: #0B1220;
    --surface: #111A2E;
    --surface-2: #142038;
    --surface-3: #1A2740;
    --surface-sel: #172554;
    --line: #1F2A44;
    --line-strong: #33415F;
    --line-input: #5B6B8A;
    --ink: #E6EBF5;
    --ink-2: #C1CADB;
    --muted: #94A3B8;
    --ink-inverse: #0B1220;
    --brand-btn: #2563EB;
    --brand-btn-hover: #3B82F6;
    --link: #6EA2FF;
    --link-hover: #A5C4FF;
    --focus: #6EA2FF;
    --selection: #1E3A8A;
    --info: #5BB8EE;     --info-bg: #0C2236;     --info-line: #1D4A6B;
    --success: #4ADE80;  --success-bg: #0D2618;  --success-line: #1F5233;
    --warning: #F5B54A;  --warning-bg: #2A1E0B;  --warning-line: #5C421A;
    --error: #F87171;    --error-bg: #2D1215;    --error-line: #63272C;
    --data-1: #6EA2FF;
    --data-1-soft: #1A2C55;
    --data-2: #A78BFA;
    --data-grid: #1C2740;
    --shadow-card: 0 1px 2px #0000004D;
    --shadow-pop: 0 2px 4px #00000066, 0 16px 40px -8px #000000A6;
    --primary-soft: #172554;
    --accent: #A78BFA;
    --accent-soft: #261A47;
    --side-bg: #070F22;
    --side-line: #16223D;
    --side-hover: #111D38;
    --top-bg: #111A2E;
    --top-field: #0B1220;
    --tile-blue: #6EA2FF;    --tile-blue-bg: #172554;
    --tile-violet: #A78BFA;  --tile-violet-bg: #261A47;
    --tile-green: #4ADE80;   --tile-green-bg: #0D2618;
    --tile-amber: #F5B54A;   --tile-amber-bg: #2A1E0B;
    --tile-red: #F87171;     --tile-red-bg: #2D1215;
    --tile-cyan: #5BB8EE;    --tile-cyan-bg: #0C2236;
  }
}

/* Auth shell side panel (WP-6A). Navy in both themes; text values pass AA on --auth-side-bg. */
.auth-shell {
  --auth-side-bg: #0F1B3D;
  --auth-side-bg-2: #1E3A8A;
  --auth-side-ink: #FFFFFF;
  --auth-side-muted: #C7D2FE;
  --auth-side-check: #60A5FA;
  --auth-side-check-bg: #1E3A8A;
  --auth-side-line: #FFFFFF26;
  --auth-card-w: 420px;
}