/* Module UI design tokens (UI-D1, UI-D13, UI-D19).
   One set of tokens for every module host, in a light set and a dark set.
   - <html data-theme="light|dark"> is the viewer's own choice (js/moduleTheme.js remembers it on this device).
   - With no data-theme attribute the device setting (prefers-color-scheme) applies.
   - The tokens exist only inside a .mod-host element, so pages that do not opt in are untouched.
   - .mod-legacy marks the older demo pages that share the voice-coach shell: they keep the dark look they always had
     (data-theme="dark" on the element itself, plus the orange accent), whatever the viewer chose.
   Keep the three colour blocks (light, dark attribute, dark media query) in step: ModuleTokensCssTests checks they define
   the same properties and that the pairs below meet contrast (4.5:1 for text, 3:1 for controls).
   Breakpoints (CSS variables cannot be used in @media, so these are written as literal media queries, in one place per
   stylesheet): 480px, 768px, 1024px and 1440px. */

/* ---- Tokens that do not change with the theme ---- */
.mod-host {
  --mod-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --mod-text-xs: 0.75rem;
  --mod-text-sm: 0.875rem;
  --mod-text-md: 1rem;
  --mod-text-lg: 1.25rem;
  --mod-text-xl: 1.5rem;
  --mod-leading: 1.45;
  --mod-space-1: 0.25rem;
  --mod-space-2: 0.5rem;
  --mod-space-3: 0.75rem;
  --mod-space-4: 1rem;
  --mod-space-5: 1.5rem;
  --mod-space-6: 2rem;
  --mod-radius-sm: 0.3rem;
  --mod-radius-md: 0.5rem;
  --mod-radius-lg: 0.75rem;
  --mod-radius-pill: 999px;
  --mod-focus-width: 3px;
  --mod-focus-offset: 2px;
  --mod-motion-fast: 120ms;
  --mod-motion-base: 200ms;
  --mod-ease: ease-out;
  /* The dealer's colour per theme (P1.2). A host that writes its brand sets these inline; css/module-panels.css then picks the pair for the
     theme in force as --mod-accent. Without a brand they are never used; the values are the themes' own accents. */
  --mod-brand-light: #1b5fa8;
  --mod-brand-light-on: #ffffff;
  --mod-brand-dark: #5aa2ee;
  --mod-brand-dark-on: #0b1220;
}

/* ---- Light (the default when the device has no dark preference) ---- */
.mod-host,
:root[data-theme="light"] .mod-host:not([data-theme]) {
  color-scheme: light;
  --mod-bg: #f6f7fb;
  --mod-surface: #ffffff;
  --mod-surface-2: #eef1f7;
  --mod-input-bg: #ffffff;
  --mod-text: #1a1f2e;
  --mod-text-muted: #4b5565;
  --mod-hairline: rgba(15, 23, 42, 0.12);
  --mod-hover: rgba(15, 23, 42, 0.06);
  --mod-border-strong: #7a8496;
  --mod-header-bg: #ffffff;
  --mod-header-text: #1a1f2e;
  --mod-header-control: #4b5565;
  --mod-accent: #1b5fa8;
  --mod-on-accent: #ffffff;
  --mod-accent-soft: #e3eefb;
  --mod-accent-soft-text: #124a85;
  --mod-accent-soft-border: rgba(27, 95, 168, 0.35);
  --mod-link: #1b5fa8;
  --mod-focus: #1b5fa8;
  --mod-danger-bg: #fdecea;
  --mod-danger-text: #9b1c14;
  --mod-danger-border: rgba(179, 38, 30, 0.4);
  --mod-danger-solid: #b3261e;
  --mod-danger-solid-hover: #8f1d17;
  --mod-on-danger: #ffffff;
  --mod-success-bg: #e3f3ea;
  --mod-success-text: #14663b;
  --mod-success-border: #1d7a4b;
  --mod-warning-bg: #fff3d6;
  --mod-warning-text: #7a4a05;
  --mod-warning-border: #b4690e;
  --mod-media-bg: #000000;
  --mod-media-frame: #1e293b;
  --mod-image-bg: #ffffff;
  --mod-scrim: rgba(15, 23, 42, 0.55);
  --mod-overlay: rgba(15, 23, 42, 0.78);
  --mod-overlay-strong: rgba(15, 23, 42, 0.92);
  --mod-overlay-text: #f8fafc;
  --mod-overlay-hairline: rgba(255, 255, 255, 0.2);
  --mod-icon-chip: rgba(255, 255, 255, 0.95);
  --mod-state-idle: #94a3b8;
  --mod-state-connecting: #f59e0b;
  --mod-state-speaking: #dc2626;
  --mod-state-your-turn: #2e8b57;
  --mod-state-listening: #f59e0b;
  --mod-state-thinking: #94a3b8;
  --mod-on-listening: #1f1300;
  --mod-shadow-1: 0 1px 3px rgba(15, 23, 42, 0.12);
  --mod-shadow-2: 0 4px 18px rgba(15, 23, 42, 0.12);
}

/* ---- Dark, chosen with the toggle (or fixed on a legacy page) ---- */
:root[data-theme="dark"] .mod-host,
.mod-host[data-theme="dark"] {
  color-scheme: dark;
  --mod-bg: #0d1117;
  --mod-surface: #161b22;
  --mod-surface-2: #1c2735;
  --mod-input-bg: #0d1117;
  --mod-text: #e2e8f0;
  --mod-text-muted: #a3aebf;
  --mod-hairline: rgba(255, 255, 255, 0.06);
  --mod-hover: rgba(255, 255, 255, 0.06);
  --mod-border-strong: #6b7a90;
  --mod-header-bg: #0c2340;
  --mod-header-text: #f1f5f9;
  --mod-header-control: #b4bfd0;
  --mod-accent: #5aa2ee;
  --mod-on-accent: #0b1220;
  --mod-accent-soft: #12263f;
  --mod-accent-soft-text: #9cc7f5;
  --mod-accent-soft-border: rgba(90, 162, 238, 0.4);
  --mod-link: #7db6f2;
  --mod-focus: #7db6f2;
  --mod-danger-bg: #3a1517;
  --mod-danger-text: #fca5a5;
  --mod-danger-border: rgba(220, 38, 38, 0.4);
  --mod-danger-solid: #b91c1c;
  --mod-danger-solid-hover: #dc2626;
  --mod-on-danger: #ffffff;
  --mod-success-bg: #10301f;
  --mod-success-text: #86e0aa;
  --mod-success-border: #2e8b57;
  --mod-warning-bg: #3a2c0a;
  --mod-warning-text: #f5c26b;
  --mod-warning-border: #b4690e;
  --mod-media-bg: #000000;
  --mod-media-frame: #0c2340;
  --mod-image-bg: #ffffff;
  --mod-scrim: rgba(0, 0, 0, 0.65);
  --mod-overlay: rgba(8, 12, 22, 0.78);
  --mod-overlay-strong: rgba(8, 12, 22, 0.92);
  --mod-overlay-text: #f8fafc;
  --mod-overlay-hairline: rgba(255, 255, 255, 0.18);
  --mod-icon-chip: rgba(255, 255, 255, 0.95);
  --mod-state-idle: #374151;
  --mod-state-connecting: #f59e0b;
  --mod-state-speaking: #dc2626;
  --mod-state-your-turn: #2e8b57;
  --mod-state-listening: #f59e0b;
  --mod-state-thinking: #94a3b8;
  --mod-on-listening: #1f1300;
  --mod-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5);
  --mod-shadow-2: 0 4px 18px rgba(0, 0, 0, 0.45);
}

/* ---- Dark, because the device is set to dark and the viewer has not chosen ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mod-host {
    color-scheme: dark;
    --mod-bg: #0d1117;
    --mod-surface: #161b22;
    --mod-surface-2: #1c2735;
    --mod-input-bg: #0d1117;
    --mod-text: #e2e8f0;
    --mod-text-muted: #a3aebf;
    --mod-hairline: rgba(255, 255, 255, 0.06);
    --mod-hover: rgba(255, 255, 255, 0.06);
    --mod-border-strong: #6b7a90;
    --mod-header-bg: #0c2340;
    --mod-header-text: #f1f5f9;
    --mod-header-control: #b4bfd0;
    --mod-accent: #5aa2ee;
    --mod-on-accent: #0b1220;
    --mod-accent-soft: #12263f;
    --mod-accent-soft-text: #9cc7f5;
    --mod-accent-soft-border: rgba(90, 162, 238, 0.4);
    --mod-link: #7db6f2;
    --mod-focus: #7db6f2;
    --mod-danger-bg: #3a1517;
    --mod-danger-text: #fca5a5;
    --mod-danger-border: rgba(220, 38, 38, 0.4);
    --mod-danger-solid: #b91c1c;
    --mod-danger-solid-hover: #dc2626;
    --mod-on-danger: #ffffff;
    --mod-success-bg: #10301f;
    --mod-success-text: #86e0aa;
    --mod-success-border: #2e8b57;
    --mod-warning-bg: #3a2c0a;
    --mod-warning-text: #f5c26b;
    --mod-warning-border: #b4690e;
    --mod-media-bg: #000000;
    --mod-media-frame: #0c2340;
    --mod-image-bg: #ffffff;
    --mod-scrim: rgba(0, 0, 0, 0.65);
    --mod-overlay: rgba(8, 12, 22, 0.78);
    --mod-overlay-strong: rgba(8, 12, 22, 0.92);
    --mod-overlay-text: #f8fafc;
    --mod-overlay-hairline: rgba(255, 255, 255, 0.18);
    --mod-icon-chip: rgba(255, 255, 255, 0.95);
    --mod-state-idle: #374151;
    --mod-state-connecting: #f59e0b;
    --mod-state-speaking: #dc2626;
    --mod-state-your-turn: #2e8b57;
    --mod-state-listening: #f59e0b;
    --mod-state-thinking: #94a3b8;
    --mod-on-listening: #1f1300;
    --mod-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5);
    --mod-shadow-2: 0 4px 18px rgba(0, 0, 0, 0.45);
  }
}

/* ---- Legacy demo pages that share the voice-coach shell: the look they had before the tokens existed ---- */
.mod-host.mod-legacy[data-theme="dark"] {
  --mod-accent: #f26722;
  --mod-on-accent: #ffffff;
  --mod-accent-soft: rgba(242, 103, 34, 0.18);
  --mod-accent-soft-text: #ff8547;
  --mod-accent-soft-border: rgba(242, 103, 34, 0.4);
  --mod-header-control: rgba(255, 255, 255, 0.7);
  --mod-on-listening: #ffffff;
  --mod-text-muted: #94a3b8;
  --mod-border-strong: rgba(255, 255, 255, 0.18);
}

/* ---- The page behind a module host takes the theme (js/moduleTheme.js adds the classes while a host is open) ---- */
.mod-host {
  font-family: var(--mod-font);
  line-height: var(--mod-leading);
}
body.mod-host {
  background: var(--mod-bg);
  color: var(--mod-text);
}

/* ---- Focus: one visible ring for keyboard users in every module host (PR 4 phase A, P1.11; the shell's text box had
   outline: none). The six host roots, legacy shell pages included. ---- */
.vcs-page :focus-visible,
.amh :focus-visible,
.mpi :focus-visible,
.qz :focus-visible,
.vo :focus-visible,
.ltv :focus-visible {
  outline: var(--mod-focus-width, 3px) solid var(--mod-focus, #2563eb);
  outline-offset: var(--mod-focus-offset, 2px);
}

/* ---- Reduced motion: nothing pulses, spins, slides or scrolls on its own (PR 4 phase A, P1.11) ---- */
@media (prefers-reduced-motion: reduce) {
  .mod-host {
    --mod-motion-fast: 0s;
    --mod-motion-base: 0s;
  }
  .vcs-page *, .vcs-page *::before, .vcs-page *::after,
  .amh *, .mpi *, .qz *, .vo *, .ltv *,
  .dyn-onboarding-backdrop, .dyn-onboarding-backdrop * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* The Lounge ticker stays readable as static, wrapped text. */
  .ltv-ticker { white-space: normal !important; }
  .ltv-ticker span { padding-left: 0 !important; }
}