/*
 * Design tokens: the only place colors, type, spacing, radii, shadows, motion and layers are
 * defined. Values and contrast notes live in DESIGN.md. Load this file before every other
 * stylesheet. The theme follows [data-theme] (set by theme.js before first paint); the
 * prefers-color-scheme block covers pages viewed without JavaScript.
 */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f7f8fc;
  --bg-marketing: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f2f4fa;
  --surface-hover: #edf1ff;
  --surface-selected: #eaf0ff;
  --surface-night: #08172d;
  --surface-night-raised: #10233f;
  --scrim: rgb(8 23 45 / 0.48);

  /* Lines */
  --border: #dce3ed;
  --border-control: #7a8ba3;
  --border-night: #233a5c;

  /* Text */
  --text: #172c47;
  --text-muted: #53657d;
  --text-on-night: #eaf2ff;
  --text-on-night-muted: #a9bad2;

  /* Interaction */
  --accent: #2f59db;
  --accent-on-night: #94baff;
  --danger-on-night: #ffb6c3;
  --action: #2f59db;
  --action-hover: #2448bc;
  --on-action: #ffffff;

  /* Tones: badges, callouts, charts */
  --neutral-bg: #f2f4fa;
  --neutral-text: #53657d;
  --neutral-border: #dce3ed;
  --info-bg: #eef3ff;
  --info-text: #2448bc;
  --info-border: #cfdbff;
  --success-bg: #eef8f3;
  --success-text: #22674c;
  --success-border: #d4ebdf;
  --warning-bg: #fff8dd;
  --warning-text: #655313;
  --warning-border: #dccb80;
  --danger-bg: #fdeeef;
  --danger-text: #ad2938;
  --danger-border: #f2cdd2;
  --danger-action: #ad2938;
  --danger-action-hover: #8f1f2c;

  /* Code (night surface in both themes) */
  --code-bg: #0b1a30;
  --code-border: #1d3150;
  --code-text: #dce8ff;
  --code-muted: #8ea3c2;
  --code-accent: #94baff;
  --code-hover: rgb(255 255 255 / 0.08);

  /* Charts */
  --chart-outbound: #334bdb;
  --chart-received: #4eaa9d;
  --chart-grid: #e1e7f0;
  /* Operator panel series, validated for lightness, chroma, CVD separation and contrast. */
  --chart-series-1: #2f59db;
  --chart-series-2: #e0662f;
  --chart-track: #e8eefc;

  /* Typography */
  --font-sans: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:
    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --text-display-1: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);
  --text-display-2: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
  --text-title-1: 2rem;
  --text-title-2: 1.5rem;
  --text-title-3: 1.1875rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.8125rem;
  --text-micro: 0.75rem;
  --text-code: 0.8125rem;
  --text-code-inline: 0.92em;
  --weight-body: 450;
  --weight-ui: 500;
  --weight-strong: 600;
  --weight-title: 700;
  --weight-display: 750;

  /* Spacing (4 px base) */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container: 1184px;
  --reading: 720px;
  --console-content: 1200px;
  --gutter: 16px;
  --topbar: 56px;
  --sidebar: 240px;
  --rail: 72px;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
  --shadow-1: 0 1px 2px rgb(16 30 54 / 0.06);
  --shadow-2: 0 8px 24px rgb(16 30 54 / 0.12);
  --shadow-3: 0 24px 64px rgb(8 23 45 / 0.24);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* Layers */
  --z-header: 20;
  --z-dropdown: 30;
  --z-dialog: 40;
  --z-toast: 50;

  /* Controls */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;

  /*
   * Legacy aliases. Stylesheets written before the design system still use these names. Remove
   * each alias once no stylesheet references it (design audit F-1).
   */
  --ink: var(--text);
  --blue: var(--accent);
  --muted: var(--text-muted);
  --page: var(--bg);
  --marketing-page: var(--bg-marketing);
  --surface-soft: var(--surface-subtle);
  --selected: var(--surface-selected);
  --line: var(--border);
  --control-border: var(--border-control);
  --paper: var(--surface-subtle);
  --white: var(--surface);
  --navy: var(--surface-night);
  --notice-bg: var(--warning-bg);
  --notice-text: var(--warning-text);
  --notice-line: var(--warning-border);
  --success-line: var(--success-border);
  --attention-bg: var(--danger-bg);
  --attention-text: var(--danger-text);
  --attention-line: var(--danger-border);

  accent-color: var(--accent);
}
@media (min-width: 600px) {
  :root {
    --gutter: 24px;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
  }
}
@media (pointer: coarse) {
  :root {
    --control-md: 44px;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0a1120;
  --bg-marketing: #0a1120;
  --surface: #111d30;
  --surface-subtle: #18253b;
  --surface-hover: #243450;
  --surface-selected: #223654;
  --scrim: rgb(0 0 0 / 0.6);
  --border: #30415d;
  --border-control: #6e80a0;
  --text: #e9f1ff;
  --text-muted: #a9bad2;
  --accent: #94baff;
  --neutral-bg: #18253b;
  --neutral-text: #a9bad2;
  --neutral-border: #30415d;
  --info-bg: #1a2a47;
  --info-text: #a9c4ff;
  --info-border: #3a5384;
  --success-bg: #15322d;
  --success-text: #8de4c4;
  --success-border: #326857;
  --warning-bg: #352d1a;
  --warning-text: #f4d88b;
  --warning-border: #776235;
  --danger-bg: #3a2429;
  --danger-text: #ffb6c3;
  --danger-border: #7a4250;
  --chart-outbound: #7c9cff;
  --chart-received: #6bcebd;
  --chart-grid: #30415d;
  --chart-series-1: #5b8af0;
  --chart-series-2: #d95926;
  --chart-track: #1d2c47;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 8px 24px rgb(0 0 0 / 0.5);
  --shadow-3: 0 24px 64px rgb(0 0 0 / 0.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0a1120;
    --bg-marketing: #0a1120;
    --surface: #111d30;
    --surface-subtle: #18253b;
    --surface-hover: #243450;
    --surface-selected: #223654;
    --scrim: rgb(0 0 0 / 0.6);
    --border: #30415d;
    --border-control: #6e80a0;
    --text: #e9f1ff;
    --text-muted: #a9bad2;
    --accent: #94baff;
    --neutral-bg: #18253b;
    --neutral-text: #a9bad2;
    --neutral-border: #30415d;
    --info-bg: #1a2a47;
    --info-text: #a9c4ff;
    --info-border: #3a5384;
    --success-bg: #15322d;
    --success-text: #8de4c4;
    --success-border: #326857;
    --warning-bg: #352d1a;
    --warning-text: #f4d88b;
    --warning-border: #776235;
    --danger-bg: #3a2429;
    --danger-text: #ffb6c3;
    --danger-border: #7a4250;
    --chart-outbound: #7c9cff;
    --chart-received: #6bcebd;
    --chart-grid: #30415d;
    --chart-series-1: #5b8af0;
    --chart-series-2: #d95926;
    --chart-track: #1d2c47;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 8px 24px rgb(0 0 0 / 0.5);
    --shadow-3: 0 24px 64px rgb(0 0 0 / 0.6);
  }
}