/* Sunset Grove Maya design tokens (ticket #479, PRD v1.1 Section 18.1, Mission Control direction of Oct 16 2026: handoffs/agency-v2/mc/directive.md).
   Three layers, the method adapted from the Agentic Society web-design-and-dev skill (docs/agency-app/design-skill.md):
     1. RAW evidence        --sg-raw-*   brand values copied exactly from services/maya-chat/dashboard.html :root and the sunsetgrovenc.com site,
        plus the derived Mission Control depth ramp (void, midnight, indigo, electric). Never used by a component.
     2. SEMANTIC            --sg-*       the stable API. Components, views and tests use only these names. Every colour is defined in both themes.
     3. SHELL SCOPE         .sg-on-dark  re-binds the semantic colours to the Mission Control surface, so a block inside the paper theme can stay dark.
   Look: near-black navy depth, midnight and indigo layers, glass-like raised surfaces with luminous borders, restrained electric blue for live
   technology (never decoration), Sunset Grove gold for editorial labels, cream text, Young Serif display, Plus Jakarta Sans interface.
   MISSION CONTROL is the default: :root, data-theme="mission", and (so the shell file that still says data-theme="light" renders it) "light" and "dark".
   PAPER (data-theme="paper") is the warm light alternate for reading and printing. */

/* ---------- Layer 1: RAW evidence (do not use in components) ---------- */
:root {
  /* dashboard.html :root, verbatim */
  --sg-raw-navy: #143860;
  --sg-raw-navy-deep: #0e2c48;
  --sg-raw-gold: #bb9668;
  --sg-raw-band: #f4f0ec;
  --sg-raw-card: #ffffff;
  --sg-raw-ink: #1c2733;
  --sg-raw-muted: #5b6674;
  --sg-raw-line: #e3ddd4;
  --sg-raw-green: #2f7d4f;
  --sg-raw-green-bg: #e6f3ea;
  --sg-raw-red: #b3372f;
  --sg-raw-red-bg: #fbe9e7;
  --sg-raw-amber: #7a5a2e;
  --sg-raw-amber-bg: #f6ecd9;
  --sg-raw-grey-bg: #eceae5;
  /* sunsetgrovenc.com inline CSS, read Oct 15 2026 */
  --sg-raw-gold-light: #cfae7e;
  /* Derived ramp steps (not brand evidence): contrast-adjusted so every text pair passes WCAG AA (checked in test_cc_design.py) */
  --sg-raw-navy-night: #091b2e;
  --sg-raw-navy-1: #0f2840;
  --sg-raw-navy-2: #163453;
  --sg-raw-navy-3: #1a3a5c;
  --sg-raw-navy-4: #24415f;
  --sg-raw-green-ink: #276a42;
  --sg-raw-blue-ink: #1f5f99;
  --sg-raw-gold-ink: #6f5226;
  --sg-raw-cloud: #b4c0d0;
  /* Mission Control depth ramp (derived, Oct 16 2026): near-black navy, then midnight, then indigo layers, then one electric blue */
  --sg-raw-void: #060a16;
  --sg-raw-midnight: #0b1329;
  --sg-raw-indigo-1: #121c3f;
  --sg-raw-indigo-2: #182459;
  --sg-raw-indigo-3: #1d2b6b;
  --sg-raw-electric: #5b9bff;
  --sg-raw-electric-soft: #92bcff;
  --sg-raw-pulse: #7ad0ff;
  --sg-raw-line-dark: #26335f;
  --sg-raw-line-dark-strong: #7084b3;
}

/* ---------- Layer 2a: semantic tokens that do not change with the theme ---------- */
:root, [data-theme="mission"], [data-theme="light"], [data-theme="dark"], [data-theme="paper"] {
  /* Type: Young Serif for editorial display, Plus Jakarta Sans for interface and body */
  --sg-font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --sg-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --sg-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sg-fs-xs: 0.75rem;
  --sg-fs-s: 0.8125rem;
  --sg-fs-m: 0.9375rem;
  --sg-fs-l: 1.0625rem;
  --sg-fs-xl: 1.375rem;
  --sg-fs-2xl: 1.75rem;
  --sg-fs-3xl: 2.25rem;
  --sg-fs-display: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --sg-lh-tight: 1.1;
  --sg-lh-snug: 1.3;
  --sg-lh-body: 1.55;
  --sg-fw-regular: 400;
  --sg-fw-medium: 500;
  --sg-fw-semibold: 600;
  --sg-fw-bold: 700;
  --sg-tracking-label: 0.08em;
  --sg-measure: 68ch;

  /* Space, radius */
  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-5: 24px;
  --sg-space-6: 32px;
  --sg-space-7: 48px;
  --sg-space-8: 64px;
  --sg-radius-s: 6px;
  --sg-radius-m: 8px;
  --sg-radius-l: 16px;
  --sg-radius-xl: 24px;
  --sg-radius-pill: 999px;

  /* Layout. The Maya cockpit takes about 35 percent of the workspace (clamped), Muse conversations keep the narrower panel-w. */
  --sg-rail-w: 76px;
  --sg-topbar-h: 64px;
  --sg-sidebar-w: 260px;
  --sg-panel-w: 340px;
  --sg-cockpit-w: clamp(360px, 33vw, 520px);
  --sg-content-max: 1180px;
  --sg-bottomnav-h: 60px;

  /* Touch, motion, stacking */
  --sg-tap: 44px;
  --sg-dur: 0.18s;
  --sg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sg-z-sticky: 20;
  --sg-z-nav: 30;
  --sg-z-drawer: 40;
  --sg-z-sheet: 50;
  --sg-z-viewer: 60;
  --sg-z-toast: 70;

  /* Shell surfaces: the same Mission Control depth in every theme (the rail, top bar, hero, cockpit and bottom nav) */
  --sg-shell-bg: var(--sg-raw-void);
  --sg-shell-raised: var(--sg-raw-midnight);
  --sg-shell-raised-2: var(--sg-raw-indigo-1);
  --sg-shell-border: var(--sg-raw-line-dark);
  --sg-shell-text: var(--sg-raw-band);
  --sg-shell-muted: var(--sg-raw-cloud);
  --sg-shell-gold: #d9bd8f;
  --sg-shell-active: #1b2a63;
}

/* ---------- Layer 2b: semantic colours, MISSION CONTROL (default) ---------- */
:root, [data-theme="mission"], [data-theme="light"], [data-theme="dark"] {
  --sg-bg: var(--sg-raw-void);
  --sg-surface: var(--sg-raw-midnight);
  --sg-surface-2: var(--sg-raw-indigo-1);
  --sg-elevated: var(--sg-raw-indigo-2);
  --sg-text: var(--sg-raw-band);
  --sg-text-muted: var(--sg-raw-cloud);
  --sg-border: var(--sg-raw-line-dark);
  --sg-border-strong: var(--sg-raw-line-dark-strong);
  /* Primary action is electric blue with near-black text. Gold is never the primary button. */
  --sg-accent: var(--sg-raw-electric);
  --sg-accent-text: var(--sg-raw-void);
  --sg-accent-soft: #1b2a63;
  --sg-link: var(--sg-raw-electric-soft);
  /* Gold: --sg-gold for rules and ornaments (not text), --sg-gold-text for editorial labels */
  --sg-gold: var(--sg-raw-gold);
  --sg-gold-text: #d9bd8f;
  --sg-success: #4ddc9c;
  --sg-warning: #f2b55a;
  --sg-danger: #ff8f84;
  --sg-info: #86bbff;
  --sg-success-soft: #0b2b27;
  --sg-warning-soft: #2b2110;
  --sg-danger-soft: #34151b;
  --sg-info-soft: #10294f;
  --sg-neutral-soft: #18234a;
  /* Live technology: electric blue for what is connected and current, cyan-blue for the pulse. Never decoration. */
  --sg-live: var(--sg-raw-electric);
  --sg-pulse: var(--sg-raw-pulse);
  /* Evidence states: live verified, pending, in progress, scheduled, historical, stale, unavailable, failed. Each has a soft fill. */
  --sg-state-live: #4ddc9c;
  --sg-state-pending: #b4b0ff;
  --sg-state-progress: #6aaaff;
  --sg-state-scheduled: #62d6ea;
  --sg-state-historical: #a7b4cc;
  --sg-state-stale: #f2b55a;
  --sg-state-unavailable: #98a5bf;
  --sg-state-failed: #ff8f84;
  --sg-state-live-soft: #0b2b27;
  --sg-state-pending-soft: #1d1b4a;
  --sg-state-progress-soft: #11295a;
  --sg-state-scheduled-soft: #0c2a38;
  --sg-state-historical-soft: #1a233f;
  --sg-state-stale-soft: #2b2110;
  --sg-state-unavailable-soft: #161d36;
  --sg-state-failed-soft: #34151b;
  --sg-bubble-user: #1d2b6b;
  --sg-bubble-user-text: var(--sg-raw-band);
  --sg-bubble-maya: var(--sg-raw-indigo-1);
  --sg-media-bg: #0e1633;
  --sg-scrim: rgba(3, 6, 14, 0.74);
  /* Glow and glass: the luminous border, the raised glass surface and the ambient light behind the page */
  --sg-glow: rgba(91, 155, 255, 0.2);
  --sg-glow-gold: rgba(187, 150, 104, 0.14);
  --sg-glass: rgba(14, 22, 50, 0.66);
  --sg-border-lit: rgba(146, 188, 255, 0.3);
  --sg-chart-line: #7fb2ff;
  --sg-chart-area: rgba(91, 155, 255, 0.16);
  --sg-chart-grid: #1f2b52;
  /* Elevation: a faint lit top edge, a deep contact shadow, a long falloff and a hint of blue bloom */
  --sg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --sg-shadow-2: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(146, 188, 255, 0.12);
  --sg-shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 36px -22px rgba(0, 0, 0, 0.85);
  --sg-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 0 0 1px rgba(146, 188, 255, 0.16), 0 0 28px -8px rgba(91, 155, 255, 0.35), 0 24px 44px -24px rgba(0, 0, 0, 0.9);
  --sg-focus-ring: 0 0 0 2px #060a16, 0 0 0 4px #92bcff;
  color-scheme: dark;
}

/* ---------- Layer 2b: semantic colours, PAPER (warm light alternate) ---------- */
[data-theme="paper"] {
  --sg-bg: var(--sg-raw-band);
  --sg-surface: var(--sg-raw-card);
  --sg-surface-2: #ece6df;
  --sg-elevated: #ffffff;
  --sg-text: var(--sg-raw-ink);
  --sg-text-muted: var(--sg-raw-muted);
  --sg-border: var(--sg-raw-line);
  --sg-border-strong: #8a8174;
  --sg-accent: var(--sg-raw-navy);
  --sg-accent-text: #ffffff;
  --sg-accent-soft: #e3e9f1;
  --sg-link: var(--sg-raw-navy);
  --sg-gold: var(--sg-raw-gold);
  --sg-gold-text: var(--sg-raw-gold-ink);
  --sg-success: var(--sg-raw-green-ink);
  --sg-warning: var(--sg-raw-amber);
  --sg-danger: var(--sg-raw-red);
  --sg-info: var(--sg-raw-blue-ink);
  --sg-success-soft: var(--sg-raw-green-bg);
  --sg-warning-soft: var(--sg-raw-amber-bg);
  --sg-danger-soft: var(--sg-raw-red-bg);
  --sg-info-soft: #e4eef8;
  --sg-neutral-soft: var(--sg-raw-grey-bg);
  --sg-live: #1f5f99;
  --sg-pulse: #0d6477;
  --sg-state-live: #276a42;
  --sg-state-pending: #5546b0;
  --sg-state-progress: #1f5f99;
  --sg-state-scheduled: #0d6477;
  --sg-state-historical: #4d5868;
  --sg-state-stale: #7a5a2e;
  --sg-state-unavailable: #5b6674;
  --sg-state-failed: #b3372f;
  --sg-state-live-soft: #e6f3ea;
  --sg-state-pending-soft: #ece9fb;
  --sg-state-progress-soft: #e4eef8;
  --sg-state-scheduled-soft: #e0f1f4;
  --sg-state-historical-soft: #eceae5;
  --sg-state-stale-soft: #f6ecd9;
  --sg-state-unavailable-soft: #eceae5;
  --sg-state-failed-soft: #fbe9e7;
  --sg-bubble-user: var(--sg-raw-navy);
  --sg-bubble-user-text: #ffffff;
  --sg-bubble-maya: #ffffff;
  --sg-media-bg: #ece6df;
  --sg-scrim: rgba(14, 44, 72, 0.55);
  --sg-glow: rgba(187, 150, 104, 0.22);
  --sg-glow-gold: rgba(187, 150, 104, 0.16);
  --sg-glass: rgba(255, 255, 255, 0.72);
  --sg-border-lit: rgba(20, 56, 96, 0.35);
  --sg-chart-line: var(--sg-raw-navy);
  --sg-chart-area: rgba(20, 56, 96, 0.12);
  --sg-chart-grid: var(--sg-raw-line);
  --sg-shadow-1: 0 1px 2px rgba(14, 44, 72, 0.12);
  --sg-shadow-2: 0 8px 24px rgba(14, 44, 72, 0.18);
  --sg-shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(14, 44, 72, 0.08), 0 16px 32px -20px rgba(14, 44, 72, 0.32);
  --sg-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 4px rgba(14, 44, 72, 0.1), 0 22px 40px -22px rgba(14, 44, 72, 0.4);
  --sg-focus-ring: 0 0 0 3px #ffffff, 0 0 0 5px #143860;
  color-scheme: light;
}

/* ---------- Layer 3: Mission Control shell scope ----------
   The rail, top bar, hero, bottom nav, command bar, mission hero, cockpit and any .sg-on-dark block read the same --sg-* names bound to the
   Mission Control surface. In the default theme this changes nothing; inside the paper theme it keeps these pieces dark.
   Declared after the themes so it wins on the same element. */
.sg-on-dark, .sg-nav, .sg-rail, .sg-topbar, .sg-bottomnav, .sg-hero, .sg-command-bar, .sg-mission, .sg-cockpit {
  --sg-bg: var(--sg-shell-bg);
  --sg-surface: var(--sg-shell-raised);
  --sg-surface-2: var(--sg-shell-raised-2);
  --sg-elevated: var(--sg-raw-indigo-2);
  --sg-text: var(--sg-shell-text);
  --sg-text-muted: var(--sg-shell-muted);
  --sg-border: var(--sg-shell-border);
  --sg-border-strong: var(--sg-raw-line-dark-strong);
  --sg-accent: var(--sg-raw-electric);
  --sg-accent-text: var(--sg-raw-void);
  --sg-accent-soft: var(--sg-shell-active);
  --sg-link: var(--sg-raw-electric-soft);
  --sg-gold: var(--sg-raw-gold);
  --sg-gold-text: var(--sg-shell-gold);
  --sg-success: #4ddc9c;
  --sg-warning: #f2b55a;
  --sg-danger: #ff8f84;
  --sg-info: #86bbff;
  --sg-success-soft: #0b2b27;
  --sg-warning-soft: #2b2110;
  --sg-danger-soft: #34151b;
  --sg-info-soft: #10294f;
  --sg-neutral-soft: #18234a;
  --sg-live: var(--sg-raw-electric);
  --sg-pulse: var(--sg-raw-pulse);
  --sg-state-live: #4ddc9c;
  --sg-state-pending: #b4b0ff;
  --sg-state-progress: #6aaaff;
  --sg-state-scheduled: #62d6ea;
  --sg-state-historical: #a7b4cc;
  --sg-state-stale: #f2b55a;
  --sg-state-unavailable: #98a5bf;
  --sg-state-failed: #ff8f84;
  --sg-state-live-soft: #0b2b27;
  --sg-state-pending-soft: #1d1b4a;
  --sg-state-progress-soft: #11295a;
  --sg-state-scheduled-soft: #0c2a38;
  --sg-state-historical-soft: #1a233f;
  --sg-state-stale-soft: #2b2110;
  --sg-state-unavailable-soft: #161d36;
  --sg-state-failed-soft: #34151b;
  --sg-glow: rgba(91, 155, 255, 0.2);
  --sg-glow-gold: rgba(187, 150, 104, 0.14);
  --sg-glass: rgba(14, 22, 50, 0.66);
  --sg-border-lit: rgba(146, 188, 255, 0.3);
  --sg-chart-line: #7fb2ff;
  --sg-chart-area: rgba(91, 155, 255, 0.16);
  --sg-chart-grid: #1f2b52;
  --sg-shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 36px -22px rgba(0, 0, 0, 0.85);
  --sg-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 0 0 1px rgba(146, 188, 255, 0.16), 0 0 28px -8px rgba(91, 155, 255, 0.35), 0 24px 44px -24px rgba(0, 0, 0, 0.9);
  --sg-focus-ring: 0 0 0 2px #060a16, 0 0 0 4px #92bcff;
  color-scheme: dark;
}