/* 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: #10110F;
  --chrome-2: #191B17;
  --chrome-3: #23251F;
  --chrome-line: #33352F;
  --chrome-ink: #FFFFFF;
  --chrome-ink-2: #E9E7DF;
  --chrome-muted: #A3A59C;

  /* Surfaces */
  --bg: #F3F1EB;
  --surface: #FFFFFF;
  --surface-2: #FAF9F5;
  --surface-3: #E9E7DF;   /* hover, zebra, code */
  --surface-sel: #FFF1E6; /* selected rows, active nav */

  /* Lines */
  --line: #D8D6CF;
  --line-strong: #B5B2A8;
  --line-input: #7D7F76;  /* form control borders: 3:1 against surface */

  /* Text */
  --ink: #10110F;
  --ink-2: #3A3C36;
  --muted: #5F615A;
  --ink-inverse: #FFFFFF;

  /* Brand */
  --brand: #FF6A00;
  --brand-ink: #B84A00;
  --brand-soft: #FFF1E6;
  --brand-2: #1D58D9;          /* brand blue: second dot of the "ii" mark and logo (brand kit) */
  --brand-btn: #10110F;        /* primary button fill = brand ink (marketiism.com): white text 18:1 */
  --brand-btn-hover: #33352F;
  --brand-btn-ink: #FFFFFF;

  /* Interactive */
  --link: #1D58D9;
  --link-hover: #163F9C;
  --focus: #1D58D9;
  --focus-width: 2px;
  --selection: #FFD9BD;

  /* 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: #1D58D9;
  --data-1-soft: #DDE6FA;
  --data-2: #FF6A00;
  --data-3: #037F0C;
  --data-grid: #E6E4DD;

  /* Overlays */
  --scrim: #10110F73;
  --shadow-pop: 0 1px 2px #10110F14, 0 8px 24px -6px #10110F33;

  /* Logo (marketiism.com, 15 Oct): logo-light.png only reads on black, so every logo sits on this plate in both themes */
  --logo-bg: #10110F;
  --logo-h: 16px;
  --logo-mark: 28px;

  /* 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: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* brand: headings (marketiism.com) */
  --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;

  /* WP-19D0: flow builder geometry (bot canvas). The canvas JS reads the same numbers to place edges. */
  --flow-node-w: 240px;
  --flow-head-h: 48px;      /* node header (input port sits at its middle) */
  --flow-body-h: 44px;      /* node summary, two lines max */
  --flow-row-h: 32px;       /* one output row (button, answer, branch) */
  --flow-port: 12px;
  --flow-port-hit: 28px;    /* invisible touch/pointer area around a port */
  --flow-grid: 20px;
  --flow-h: 640px;
  --flow-palette-w: 232px;
  --flow-inspector-w: 340px;
  --flow-mini-w: 168px;
  --flow-mini-h: 104px;

  /* Motion */
  --t: 150ms;
  --t-slow: 220ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Motion tokens (WP-21 P1). --t/--t-slow/--ease above stay as they are; new ones are additive. */
  --t-fast: 120ms;
  --t-enter: 260ms;
  --t-exit: 160ms;
  --t-chart: 400ms;
  --ease-out: var(--ease);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --dist-1: 4px;
  --dist-2: 8px;
  --stagger: 40ms;
}

[data-theme="dark"] {
  color-scheme: dark;
  --chrome: #0A0B09;
  --chrome-2: #151613;
  --chrome-3: #1F211C;
  --chrome-line: #2E302A;
  --chrome-ink: #FFFFFF;
  --chrome-ink-2: #D8D6CF;
  --chrome-muted: #A3A59C;
  --bg: #0E0F0D;
  --surface: #171815;
  --surface-2: #1C1E1A;
  --surface-3: #25271F;
  --surface-sel: #2B1E12;
  --line: #2E302A;
  --line-strong: #44463F;
  --line-input: #6F7168;
  --ink: #F3F1EB;
  --ink-2: #D8D6CF;
  --muted: #A3A59C;
  --ink-inverse: #10110F;
  --brand: #FF6A00;
  --brand-ink: #FF8F42;
  --brand-soft: #2B1A0C;
  --brand-btn: #F3F1EB;
  --brand-btn-hover: #FFFFFF;
  --brand-btn-ink: #10110F;
  --link: #7EA2F2;
  --link-hover: #AFC6F7;
  --focus: #7EA2F2;
  --selection: #5A2E0C;
  --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: #7EA2F2;
  --data-1-soft: #1A2848;
  --data-2: #FF8F42;
  --data-3: #5FCB6B;
  --data-grid: #262821;
  --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: #0A0B09;
    --chrome-2: #151613;
    --chrome-3: #1F211C;
    --chrome-line: #2E302A;
    --chrome-ink: #FFFFFF;
    --chrome-ink-2: #D8D6CF;
    --chrome-muted: #A3A59C;
    --bg: #0E0F0D;
    --surface: #171815;
    --surface-2: #1C1E1A;
    --surface-3: #25271F;
    --surface-sel: #2B1E12;
    --line: #2E302A;
    --line-strong: #44463F;
    --line-input: #6F7168;
    --ink: #F3F1EB;
    --ink-2: #D8D6CF;
    --muted: #A3A59C;
    --ink-inverse: #10110F;
    --brand: #FF6A00;
    --brand-ink: #FF8F42;
    --brand-soft: #2B1A0C;
    --brand-btn: #F3F1EB;
    --brand-btn-hover: #FFFFFF;
    --brand-btn-ink: #10110F;
    --link: #7EA2F2;
    --link-hover: #AFC6F7;
    --focus: #7EA2F2;
    --selection: #5A2E0C;
    --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: #7EA2F2;
    --data-1-soft: #1A2848;
    --data-2: #FF8F42;
    --data-3: #5FCB6B;
    --data-grid: #262821;
    --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; --t-fast: 0ms; --t-enter: 0ms; --t-exit: 0ms; --t-chart: 0ms; --stagger: 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: "DM Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --site-font-display: "Space Grotesk", "DM Sans", "Noto Sans Devanagari", system-ui, sans-serif;   /* brand headings (marketiism.com) */
  --site-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;   /* WP-9D: no web mono font on the site */
  --site-label: "Space Grotesk", "DM Sans", "Noto Sans Devanagari", system-ui, sans-serif;   /* marketiism.com: labels, nav and buttons are Space Grotesk, not mono */
  --site-fs-display: clamp(36px, 5.3vw, 68px);   /* WP-11D (PU5): ceiling 15% lower, was 80px */
  --site-fs-display-page: clamp(32px, 3.9vw, 51px);   /* WP-11D: was 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: #F3F1EB;
  --site-surface: #FFFFFF;
  --site-surface-2: #E9E7DF;
  --site-ink: #10110F;
  --site-ink-2: #3A3C36;
  --site-muted: #5F615A;
  --site-line: #D8D6CF;
  --site-line-strong: #B5B2A8;
  --site-violet: #FF6A00;
  --site-violet-ink: #B84A00;
  --site-violet-soft: #FFE9D9;
  --site-btn: #10110F;
  --site-btn-hover: #33352F;
  --site-btn-ink: #FFFFFF;
  --site-hero-1: #F3F1EB;
  --site-hero-2: #E9E7DF;
  --site-hero-3: #D6C9B7;
  --site-hero-4: #F6E2D1;
  --site-glass: #FFFFFF99;
  --site-glass-2: #FFFFFF40;
  --site-glass-line: #FFFFFFE6;
  --site-glass-tint: #FF6A0040;
  --site-glass-tint-2: #D6C9B773;
  --site-glass-shade: #10110F1F;
  --site-pill-bg: #FFFFFFE6;
  --site-chrome: #10110F;
  --site-chrome-2: #191B17;
  --site-chrome-3: #23251F;
  --site-chrome-line: #33352F;
  --site-chrome-ink: #FFFFFF;
  --site-chrome-ink-2: #E9E7DF;
  --site-chrome-muted: #A3A59C;
  --site-chrome-accent: #FF6A00;
  --site-shadow-nav: 0 2px 6px #10110F0F, 0 18px 40px -16px #10110F33;
  --site-shadow-card: 0 1px 2px #10110F0D, 0 24px 48px -32px #10110F40;
  --site-shadow-lift: 0 2px 4px #10110F14, 0 32px 60px -28px #10110F59;
  --site-glow: #FF6A0059;
  --site-glow-soft: #FF6A0024;
  --site-glow-line: #FF8F4280;
  --site-glow-ink-1: #FFB27A;
  --site-glow-ink-2: #FF6A00;
  --site-grid-line: #FFFFFF0D;
}
[data-theme="dark"] .site, .site[data-theme="dark"] {
  --site-bg: #10110F;
  --site-surface: #191B17;
  --site-surface-2: #23251F;
  --site-ink: #F3F1EB;
  --site-ink-2: #D8D6CF;
  --site-muted: #A3A59C;
  --site-line: #2E302A;
  --site-line-strong: #44463F;
  --site-violet: #FF6A00;
  --site-violet-ink: #FF8F42;
  --site-violet-soft: #2B1A0C;
  --site-btn: #FFFFFF;
  --site-btn-hover: #E9E7DF;
  --site-btn-ink: #10110F;
  --site-hero-1: #10110F;
  --site-hero-2: #191B17;
  --site-hero-3: #3A2614;
  --site-hero-4: #23251F;
  --site-glass: #FFFFFF1A;
  --site-glass-2: #FFFFFF0D;
  --site-glass-line: #FFFFFF33;
  --site-glass-tint: #FF6A0033;
  --site-glass-tint-2: #D6C9B726;
  --site-glass-shade: #00000040;
  --site-pill-bg: #191B17E6;
  --site-chrome: #0A0B09;
  --site-chrome-2: #151613;
  --site-chrome-3: #1F211C;
  --site-chrome-line: #2E302A;
  --site-chrome-ink: #FFFFFF;
  --site-chrome-ink-2: #D8D6CF;
  --site-chrome-muted: #A3A59C;
  --site-chrome-accent: #FF6A00;
  --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-glow: #FF6A0059;
  --site-glow-soft: #FF6A0024;
  --site-glow-line: #FF8F4280;
  --site-glow-ink-1: #FFB27A;
  --site-glow-ink-2: #FF6A00;
  --site-grid-line: #FFFFFF0D;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site {
    --site-bg: #10110F;
    --site-surface: #191B17;
    --site-surface-2: #23251F;
    --site-ink: #F3F1EB;
    --site-ink-2: #D8D6CF;
    --site-muted: #A3A59C;
    --site-line: #2E302A;
    --site-line-strong: #44463F;
    --site-violet: #FF6A00;
    --site-violet-ink: #FF8F42;
    --site-violet-soft: #2B1A0C;
    --site-btn: #FFFFFF;
    --site-btn-hover: #E9E7DF;
    --site-btn-ink: #10110F;
    --site-hero-1: #10110F;
    --site-hero-2: #191B17;
    --site-hero-3: #3A2614;
    --site-hero-4: #23251F;
    --site-glass: #FFFFFF1A;
    --site-glass-2: #FFFFFF0D;
    --site-glass-line: #FFFFFF33;
    --site-glass-tint: #FF6A0033;
    --site-glass-tint-2: #D6C9B726;
    --site-glass-shade: #00000040;
    --site-pill-bg: #191B17E6;
    --site-chrome: #0A0B09;
    --site-chrome-2: #151613;
    --site-chrome-3: #1F211C;
    --site-chrome-line: #2E302A;
    --site-chrome-ink: #FFFFFF;
    --site-chrome-ink-2: #D8D6CF;
    --site-chrome-muted: #A3A59C;
    --site-chrome-accent: #FF6A00;
    --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-glow: #FF6A0059;
    --site-glow-soft: #FF6A0024;
    --site-glow-line: #FF8F4280;
    --site-glow-ink-1: #FFB27A;
    --site-glow-ink-2: #FF6A00;
    --site-grid-line: #FFFFFF0D;
  }
}
.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: #F3F1EB;
  --site-surface: #FFFFFF;
  --site-surface-2: #E9E7DF;
  --site-ink: #10110F;
  --site-ink-2: #3A3C36;
  --site-muted: #5F615A;
  --site-line: #D8D6CF;
  --site-line-strong: #B5B2A8;
  --site-violet: #FF6A00;
  --site-violet-ink: #B84A00;
  --site-violet-soft: #FFE9D9;
  --site-btn: #10110F;
  --site-btn-hover: #33352F;
  --site-btn-ink: #FFFFFF;
  --site-hero-1: #F3F1EB;
  --site-hero-2: #E9E7DF;
  --site-hero-3: #D6C9B7;
  --site-hero-4: #F6E2D1;
  --site-glass: #FFFFFF99;
  --site-glass-2: #FFFFFF40;
  --site-glass-line: #FFFFFFE6;
  --site-glass-tint: #FF6A0040;
  --site-glass-tint-2: #D6C9B773;
  --site-glass-shade: #10110F1F;
  --site-pill-bg: #FFFFFFE6;
  --site-chrome: #10110F;
  --site-chrome-2: #191B17;
  --site-chrome-3: #23251F;
  --site-chrome-line: #33352F;
  --site-chrome-ink: #FFFFFF;
  --site-chrome-ink-2: #E9E7DF;
  --site-chrome-muted: #A3A59C;
  --site-chrome-accent: #FF6A00;
  --site-shadow-nav: 0 2px 6px #10110F0F, 0 18px 40px -16px #10110F33;
  --site-shadow-card: 0 1px 2px #10110F0D, 0 24px 48px -32px #10110F40;
  --site-shadow-lift: 0 2px 4px #10110F14, 0 32px 60px -28px #10110F59;
  --site-glow: #FF6A0059;
  --site-glow-soft: #FF6A0024;
  --site-glow-line: #FF8F4280;
  --site-glow-ink-1: #FFB27A;
  --site-glow-ink-2: #FF6A00;
  --site-grid-line: #FFFFFF0D;
}
@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: #F3F4F6;             /* WP-21: light grey sidebar (owner 13 Oct) */
  --side-line: #E5E7EB;
  --side-ink: #111827;
  --side-ink-2: #374151;
  --side-muted: #6B7280;
  --side-hover: #E5E7EB;
  --side-active: #2563EB;
  --side-active-ink: #FFFFFF;
  --side-label: #6B7280;          /* section labels */
  --primary-glow: #2563EB33;      /* WP-21: soft shadow under primary buttons */
  /* 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: #111827;
  --side-line: #1F2937;
  --side-hover: #1F2937;
  --side-ink: #F9FAFB;
  --side-ink-2: #D1D5DB;
  --side-muted: #9CA3AF;
  --side-label: #9CA3AF;
  --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: #111827;
    --side-line: #1F2937;
    --side-hover: #1F2937;
    --side-ink: #F9FAFB;
    --side-ink-2: #D1D5DB;
    --side-muted: #9CA3AF;
    --side-label: #9CA3AF;
    --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). Brand ink-black in both themes (marketiism.com, 15 Oct); text values pass AA on --auth-side-bg. */
.auth-shell {
  --auth-side-bg: #10110F;
  --auth-side-bg-2: #23251F;
  --auth-side-ink: #FFFFFF;
  --auth-side-muted: #D8D6CF;
  --auth-side-check: #FF6A00;
  --auth-side-check-bg: #2B1A0C;
  --auth-side-line: #FFFFFF26;
  --auth-card-w: 420px;
}

/* ============================================================================ Storefront (WP-11D)
   Online stores on store domains: body.store + .store--<theme> + .store--d-<density>. Five themes, light only
   (the store shell renders data-theme="light"; a merchant dark background flips color-scheme via store_style).
   ui/storefront.py parses the `.store--<theme>` colour blocks below to validate merchant overrides, so keep one
   `--st-name: #rrggbb;` per declaration. Every value here passes WCAG AA (ui/test_wp11d.py checks it). */
.store {
  --st-ff-system: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --st-ff-inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --st-ff-poppins: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --st-ff-nunito: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --st-ff-mukta: "Mukta", "Noto Sans Devanagari", system-ui, sans-serif;
  --st-ff-hind: "Hind", "Noto Sans Devanagari", system-ui, sans-serif;
  --st-ff-lora: "Lora", Georgia, "Times New Roman", serif;
  --st-ff-playfair: "Playfair Display", Georgia, "Times New Roman", serif;
  --st-ff-merriweather: "Merriweather", Georgia, "Times New Roman", serif;

  --st-r-none: 0px; --st-r-sm: 4px; --st-r-md: 8px; --st-r-lg: 14px; --st-r-full: 999px;
  --st-wrap: 1280px;
  --st-wrap-wide: 1600px;
  --st-header-h: 64px;
  --st-header-h-sm: 56px;
  --st-logo-h: 36px;
  --st-search-w: 560px;
  --st-thumb: 64px;
  --st-swatch: 32px;
  --st-drawer-w: 420px;
  --st-filters-w: 264px;
  --st-card-min: 220px;
  --st-card-min-sm: 150px;
  --st-line-img: 72px;
  --st-map-h: 220px;
  --st-zoom: 1.8;
  --st-head-weight: 700;
  --st-head-track: -0.01em;
  --st-head-case: none;
  --st-nav-track: 0;
  --st-img-ratio: 1 / 1;
  --st-scrim: #0B1220A6;

  /* density (regular) */
  --st-gap: 16px;
  --st-pad: 12px;
  --st-section: 48px;
}
.store--d-compact { --st-gap: 10px; --st-pad: 8px; --st-section: 32px; --st-card-min: 180px; }
.store--d-airy { --st-gap: 28px; --st-pad: 16px; --st-section: 72px; --st-card-min: 240px; }

.store--shop {
  --st-bg: #F5F6F8;
  --st-surface: #FFFFFF;
  --st-surface-2: #F0F2F5;
  --st-surface-3: #E7EAEE;
  --st-header-bg: #FFFFFF;
  --st-ink: #14181F;
  --st-ink-2: #3D4654;
  --st-muted: #596271;
  --st-line: #DDE1E7;
  --st-line-input: #858E9C;
  --st-primary: #0B57D0;
  --st-primary-hover: #0842A0;
  --st-primary-ink: #FFFFFF;
  --st-accent: #A54B07;
  --st-accent-ink: #FFFFFF;
  --st-link: #0B57D0;
  --st-focus: #0B57D0;
  --st-sale: #B42318;
  --st-sale-ink: #FFFFFF;
  --st-ok: #11723A;
  --st-low: #8A5A00;
  --st-out: #B42318;
  --st-star: #C26A05;
  --st-announce-bg: #14181F;
  --st-announce-ink: #FFFFFF;
  --st-foot-bg: #14181F;
  --st-foot-ink: #E7EAEE;
  --st-foot-muted: #A5ADB9;
  --st-font-head: var(--st-ff-inter);
  --st-font-body: var(--st-ff-inter);
  --st-r: var(--st-r-md); --st-r-card: var(--st-r-md); --st-r-btn: var(--st-r-md);
}
.store--fashion {
  --st-bg: #FFFFFF;
  --st-surface: #FFFFFF;
  --st-surface-2: #F7F5F2;
  --st-surface-3: #EFEBE6;
  --st-header-bg: #FFFFFF;
  --st-ink: #111111;
  --st-ink-2: #3A3A3A;
  --st-muted: #66625E;
  --st-line: #E6E2DD;
  --st-line-input: #8C8781;
  --st-primary: #111111;
  --st-primary-hover: #333333;
  --st-primary-ink: #FFFFFF;
  --st-accent: #A3214F;
  --st-accent-ink: #FFFFFF;
  --st-link: #111111;
  --st-focus: #A3214F;
  --st-sale: #A3214F;
  --st-sale-ink: #FFFFFF;
  --st-ok: #2F6B3A;
  --st-low: #8A5A00;
  --st-out: #A3214F;
  --st-star: #111111;
  --st-announce-bg: #111111;
  --st-announce-ink: #FFFFFF;
  --st-foot-bg: #F7F5F2;
  --st-foot-ink: #111111;
  --st-foot-muted: #5E5A55;
  --st-font-head: var(--st-ff-playfair);
  --st-font-body: var(--st-ff-inter);
  --st-r: var(--st-r-none); --st-r-card: var(--st-r-none); --st-r-btn: var(--st-r-none);
  --st-img-ratio: 3 / 4;
  --st-head-weight: 500;
  --st-head-track: 0;
  --st-nav-track: 0.08em;
}
.store--grocery {
  --st-bg: #F3F7F1;
  --st-surface: #FFFFFF;
  --st-surface-2: #ECF3E8;
  --st-surface-3: #E1EBDC;
  --st-header-bg: #FFFFFF;
  --st-ink: #17221A;
  --st-ink-2: #3A493D;
  --st-muted: #56665A;
  --st-line: #D7E2D2;
  --st-line-input: #7F8E7A;
  --st-primary: #137333;
  --st-primary-hover: #0E5A27;
  --st-primary-ink: #FFFFFF;
  --st-accent: #C2410C;
  --st-accent-ink: #FFFFFF;
  --st-link: #137333;
  --st-focus: #137333;
  --st-sale: #C2410C;
  --st-sale-ink: #FFFFFF;
  --st-ok: #137333;
  --st-low: #8A5A00;
  --st-out: #B42318;
  --st-star: #B45309;
  --st-announce-bg: #137333;
  --st-announce-ink: #FFFFFF;
  --st-foot-bg: #10261A;
  --st-foot-ink: #E8F1EA;
  --st-foot-muted: #A9BFAE;
  --st-font-head: var(--st-ff-nunito);
  --st-font-body: var(--st-ff-nunito);
  --st-r: var(--st-r-lg); --st-r-card: var(--st-r-lg); --st-r-btn: var(--st-r-full);
  --st-head-weight: 800;
}
.store--canvas {
  --st-bg: #FBF8F3;
  --st-surface: #FFFFFF;
  --st-surface-2: #F4EFE6;
  --st-surface-3: #EBE3D6;
  --st-header-bg: #FBF8F3;
  --st-ink: #2A2420;
  --st-ink-2: #4D443D;
  --st-muted: #6A5F56;
  --st-line: #E5DDD1;
  --st-line-input: #93877A;
  --st-primary: #9C3D1E;
  --st-primary-hover: #7E3017;
  --st-primary-ink: #FFFFFF;
  --st-accent: #3F5F4A;
  --st-accent-ink: #FFFFFF;
  --st-link: #9C3D1E;
  --st-focus: #9C3D1E;
  --st-sale: #9C3D1E;
  --st-sale-ink: #FFFFFF;
  --st-ok: #3F5F4A;
  --st-low: #8A5A00;
  --st-out: #9C3D1E;
  --st-star: #A16207;
  --st-announce-bg: #F4EFE6;
  --st-announce-ink: #2A2420;
  --st-foot-bg: #2A2420;
  --st-foot-ink: #F4EFE6;
  --st-foot-muted: #BDB1A3;
  --st-font-head: var(--st-ff-lora);
  --st-font-body: var(--st-ff-inter);
  --st-r: var(--st-r-sm); --st-r-card: var(--st-r-sm); --st-r-btn: var(--st-r-sm);
  --st-img-ratio: 4 / 5;
  --st-head-weight: 600;
}
.store--elite {
  --st-bg: #FAFAF7;
  --st-surface: #FFFFFF;
  --st-surface-2: #F3F1EA;
  --st-surface-3: #EAE7DC;
  --st-header-bg: #FFFFFF;
  --st-ink: #0E1726;
  --st-ink-2: #36404F;
  --st-muted: #5A6170;
  --st-line: #E3E0D6;
  --st-line-input: #8D8A80;
  --st-primary: #0E1726;
  --st-primary-hover: #23314A;
  --st-primary-ink: #FFFFFF;
  --st-accent: #7A5C12;
  --st-accent-ink: #FFFFFF;
  --st-link: #0E1726;
  --st-focus: #7A5C12;
  --st-sale: #7A5C12;
  --st-sale-ink: #FFFFFF;
  --st-ok: #2F6B3A;
  --st-low: #7A5C12;
  --st-out: #9B1C1C;
  --st-star: #8A6A16;
  --st-announce-bg: #0E1726;
  --st-announce-ink: #E9DFC4;
  --st-foot-bg: #0E1726;
  --st-foot-ink: #EDEAE0;
  --st-foot-muted: #A9AFBB;
  --st-font-head: var(--st-ff-playfair);
  --st-font-body: var(--st-ff-lora);
  --st-r: var(--st-r-none); --st-r-card: var(--st-r-none); --st-r-btn: var(--st-r-none);
  --st-img-ratio: 4 / 5;
  --st-head-weight: 500;
  --st-head-track: 0.01em;
  --st-head-case: none;
  --st-nav-track: 0.12em;
}

.console {
  /* WP-23 (L1) CRM layout + marketiism.com brand (15 Oct): warm paper background, ink-black primary buttons
     and active nav, brand blue links, orange accent. Overrides the console tokens above. */
  --bg: #F3F1EB;
  --surface: #FFFFFF;
  --surface-2: #FAF9F5;
  --surface-3: #EFEDE6;
  --surface-sel: #FFF1E6;
  --line: #E3E1DA;
  --line-strong: #C9C6BC;
  --line-input: #7D7F76;
  --ink: #10110F;
  --ink-2: #3A3C36;
  --muted: #5F615A;
  --brand-btn: #10110F;          /* white text 18:1 */
  --brand-btn-hover: #33352F;
  --brand-btn-ink: #FFFFFF;
  --link: #1D58D9;
  --link-hover: #163F9C;
  --focus: #1D58D9;
  --selection: #FFD9BD;
  --primary-soft: #E8EEFB;
  --primary-glow: #10110F26;
  --accent: #B84A00;
  --accent-soft: #FFF1E6;
  --data-1: #1D58D9;
  --data-1-soft: #DDE6FA;
  --data-2: #FF6A00;
  --data-grid: #ECEAE3;
  --shadow-card: 0 1px 2px #10110F08, 0 8px 24px -6px #10110F12;
  --shadow-pop: 0 2px 6px #10110F10, 0 18px 44px -10px #10110F30;
  --r: 12px;
  --r-lg: 18px;
  --card-pad: 24px;
  --side-bg: #FAF9F5;
  --side-line: #E3E1DA;
  --side-hover: #EFEDE6;
  --side-ink: #10110F;
  --side-ink-2: #3A3C36;
  --side-muted: #5F615A;
  --side-label: #5F615A;
  --side-active: #10110F;
  --side-active-ink: #FFFFFF;
  --top-bg: transparent;
  --top-field: #FFFFFF;
  --tile-blue: #1D58D9;    --tile-blue-bg: #E8EEFB;
  --tile-violet: #B84A00;  --tile-violet-bg: #FFF1E6;
  --promo-bg: linear-gradient(150deg, #23251F 0%, #10110F 100%);
  --promo-ink: #FFFFFF; --promo-muted: #D8D6CF; --promo-btn: #FF6A00; --promo-btn-hover: #FF8F42; --promo-btn-ink: #10110F;
}
[data-theme="dark"] .console, .console[data-theme="dark"] {
  --bg: #0E0F0D;
  --surface: #171815;
  --surface-2: #1C1E1A;
  --surface-3: #25271F;
  --surface-sel: #2B1E12;
  --line: #2A2C26;
  --line-strong: #44463F;
  --line-input: #6F7168;
  --ink: #F3F1EB;
  --ink-2: #D8D6CF;
  --muted: #A3A59C;
  --ink-inverse: #10110F;
  --brand-btn: #F3F1EB; --brand-btn-hover: #FFFFFF; --brand-btn-ink: #10110F;
  --link: #7EA2F2; --link-hover: #AFC6F7; --focus: #7EA2F2;
  --selection: #5A2E0C;
  --data-1: #7EA2F2; --data-1-soft: #1A2848; --data-2: #FF8F42; --data-grid: #262821;
  --primary-soft: #1A2848;
  --primary-glow: #00000066;
  --accent: #FF8F42; --accent-soft: #2B1A0C;
  --side-bg: #10110F; --side-line: #23251F; --side-hover: #1F211C;
  --side-ink: #F3F1EB; --side-ink-2: #D8D6CF; --side-muted: #A3A59C; --side-label: #A3A59C;
  --side-active: #F3F1EB; --side-active-ink: #10110F;
  --top-bg: transparent; --top-field: #171815;
  --tile-blue: #7EA2F2; --tile-blue-bg: #1A2848;
  --tile-violet: #FF8F42; --tile-violet-bg: #2B1A0C;
  --shadow-card: 0 1px 2px #0000004D;
  --shadow-pop: 0 2px 4px #00000066, 0 16px 40px -8px #000000A6;
  --promo-bg: linear-gradient(150deg, #2E302A 0%, #1C1E1A 100%);
  --promo-btn: #FF6A00; --promo-btn-hover: #FF8F42; --promo-btn-ink: #10110F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .console {
    --bg: #0E0F0D;
    --surface: #171815;
    --surface-2: #1C1E1A;
    --surface-3: #25271F;
    --surface-sel: #2B1E12;
    --line: #2A2C26;
    --line-strong: #44463F;
    --line-input: #6F7168;
    --ink: #F3F1EB;
    --ink-2: #D8D6CF;
    --muted: #A3A59C;
    --ink-inverse: #10110F;
    --brand-btn: #F3F1EB; --brand-btn-hover: #FFFFFF; --brand-btn-ink: #10110F;
    --link: #7EA2F2; --link-hover: #AFC6F7; --focus: #7EA2F2;
    --selection: #5A2E0C;
    --data-1: #7EA2F2; --data-1-soft: #1A2848; --data-2: #FF8F42; --data-grid: #262821;
    --primary-soft: #1A2848;
    --primary-glow: #00000066;
    --accent: #FF8F42; --accent-soft: #2B1A0C;
    --side-bg: #10110F; --side-line: #23251F; --side-hover: #1F211C;
    --side-ink: #F3F1EB; --side-ink-2: #D8D6CF; --side-muted: #A3A59C; --side-label: #A3A59C;
    --side-active: #F3F1EB; --side-active-ink: #10110F;
    --top-bg: transparent; --top-field: #171815;
    --tile-blue: #7EA2F2; --tile-blue-bg: #1A2848;
    --tile-violet: #FF8F42; --tile-violet-bg: #2B1A0C;
    --shadow-card: 0 1px 2px #0000004D;
    --shadow-pop: 0 2px 4px #00000066, 0 16px 40px -8px #000000A6;
    --promo-bg: linear-gradient(150deg, #2E302A 0%, #1C1E1A 100%);
    --promo-btn: #FF6A00; --promo-btn-hover: #FF8F42; --promo-btn-ink: #10110F;
  }
}