/* ===========================================================================
   ZerσSigma canonical structural theme

   This is the only source of truth for non-semantic color, depth, spacing,
   radius, and typography primitives. Analytical and operational meanings
   live in 01_zs_semantic_tokens.css and must never be aliased to brand chrome.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Canvas and surfaces */
  --zs-canvas: #05070b;
  --zs-canvas-elevated: #080c13;
  --zs-surface-1: #0b1019;
  --zs-surface-2: #0f1622;
  --zs-surface-3: #141d2b;
  --zs-surface-overlay: rgba(7, 11, 18, 0.96);
  --zs-surface-translucent: rgba(11, 16, 25, 0.88);
  --zs-nav-surface: rgba(7, 10, 16, 0.82);
  --zs-header-surface: rgba(8, 12, 19, 0.94);

  /* Structure */
  --zs-border-subtle: rgba(131, 158, 201, 0.20);
  --zs-border-default: rgba(115, 145, 191, 0.28);
  --zs-border-strong: rgba(136, 174, 250, 0.38);
  --zs-divider: rgba(131, 158, 201, 0.16);

  /* Typography */
  --zs-text-primary: #f5f7fb;
  --zs-text-secondary: #c7d0df;
  --zs-text-muted: #8e9bad;
  --zs-text-disabled: rgba(142, 155, 173, 0.48);
  /* RGB companions let client-side Plotly code apply controlled opacity while
     still resolving the hue from this canonical source. */
  --zs-text-primary-rgb: 245, 247, 251;
  --zs-text-secondary-rgb: 199, 208, 223;
  --zs-text-muted-rgb: 142, 155, 173;
  --zs-font-sans: Inter, "SF Pro Display", "Segoe UI Variable Display",
    "Segoe UI", Helvetica, Arial, sans-serif;
  --zs-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Brand and structural interaction. Never use these for market meaning. */
  --zs-brand-accent: #88aefa;
  --zs-brand-accent-hover: #b3cbff;
  --zs-brand-accent-active: #456fae;
  --zs-brand-accent-wash: rgba(93, 134, 211, 0.14);
  --zs-brand-accent-wash-strong: rgba(93, 134, 211, 0.24);
  --zs-focus-ring: rgba(136, 174, 250, 0.55);
  --zs-brand-accent-rgb: 136, 174, 250;

  /* Controls */
  --zs-control-bg: rgba(15, 22, 34, 0.76);
  --zs-control-bg-hover: rgba(21, 31, 47, 0.90);
  --zs-control-bg-active: rgba(69, 111, 174, 0.32);
  --zs-control-height-sm: 28px;
  --zs-control-height-md: 34px;

  /* Shared analytical-control chrome. These legacy names are retained because
     three independently mounted module systems consume the same control rail. */
  --zs-ctl-dark-bg: var(--zs-control-bg);
  --zs-ctl-dark-bg-hover: var(--zs-control-bg-hover);
  --zs-ctl-dark-border: var(--zs-border-default);
  --zs-ctl-dark-fg: var(--zs-text-secondary);

  /* Depth and decoration */
  --zs-shadow-1: 0 18px 46px rgba(0, 0, 0, 0.30);
  --zs-shadow-2: 0 32px 90px rgba(0, 0, 0, 0.48);
  --zs-glow-subtle: 0 0 38px rgba(104, 150, 232, 0.20);
  --zs-gradient-canvas:
    radial-gradient(circle at 48% -12%, rgba(65, 99, 157, 0.25), transparent 35rem),
    linear-gradient(180deg, #070a10 0%, var(--zs-canvas) 42%, #070a10 100%);
  --zs-gradient-panel:
    linear-gradient(180deg, rgba(15, 22, 34, 0.94), rgba(8, 12, 19, 0.94));

  /* Shared geometry */
  --zs-radius-xs: 6px;
  --zs-radius-sm: 10px;
  --zs-radius-md: 14px;
  --zs-radius-lg: 18px;
  --zs-radius-xl: 26px;
  --zs-radius-pill: 999px;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--zs-canvas);
  color: var(--zs-text-primary);
  font-family: var(--zs-font-sans);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  color: var(--zs-text-primary);
  background: var(--zs-brand-accent-wash-strong);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--zs-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}