/* Stellaria tokens — institutional, dark-first, zero-radius geometry. */

:root {
  color-scheme: dark;

  /* Surfaces: blue-tinted near-black, separated by tint steps + hairlines.
     --color-surface-base matches the brand mark's plate exactly, so the badge
     reads as part of the interface rather than pasted onto it. */
  --color-void: #04070d;
  --color-surface-base: #070b12;
  --color-surface-raised: #0b1018;
  --color-surface-overlay: #0d131d;
  --color-surface-sunken: #05080e;
  --color-surface-hover: #121a26;
  --color-surface-active: #16202e;

  --color-border: #1b2330;
  --color-border-strong: #27313f;
  --color-border-faint: #131a25;

  /* Text */
  --color-text: #e9eef6;
  --color-text-secondary: #97a3b6;
  --color-text-muted: #5f6c81;
  --color-text-inverse: #04070d;

  /* Stellaria blue, taken from the brand mark: interaction, focus, selection,
     key data. Never decoration. */
  --color-accent: #2f6bf6;
  --color-accent-hover: #5288ff;
  --color-accent-active: #2453c9;
  --color-accent-quiet: rgba(47, 107, 246, 0.16);
  --color-accent-line: rgba(47, 107, 246, 0.55);
  --color-focus: #6d9cff;

  /* Status / classification */
  --color-success: #3fb950;
  --color-warning: #d99a1e;
  --color-danger: #f2554a;
  --color-danger-hover: #ff6a60;
  --color-info: #4d94ff;
  --color-neutral: #6e7a8d;

  /* Spacing — 4px derived, applied by relationship. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Zero-radius geometry. Circles only where roundness carries meaning. */
  --radius-0: 0px;
  --radius-circle: 50%;

  /* Type */
  --font-sans: "Host Grotesk", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --text-xs: 10px;
  --text-sm: 11px;
  --text-md: 12px;
  --text-lg: 14px;
  --text-xl: 17px;
  --text-2xl: 22px;

  --tracking-label: 0.14em;
  --tracking-tight: -0.01em;

  /* Control geometry — 44px minimum interactive target on primary controls. */
  --control-height: 32px;
  --control-height-lg: 44px;
  /* The header owns the top edge; every floating region aligns beneath it.
     48 is the floor for this bar: both ends carry two lines of type, and at
     ~28px of text that leaves 10px of breathing room either side. Going lower
     means dropping a line, not tightening the padding. */
  --topbar-height: 48px;
  --side-width: 344px;

  /* Motion: reports state, never decorates. */
  --motion-fast: 110ms;
  --motion-base: 170ms;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-map: 0;
  --z-overlay: 20;
  --z-panel: 40;
  --z-menu: 60;
  --z-modal: 80;
  --z-toast: 100;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    --color-void: #dfe5ee;
    --color-surface-base: #f4f6fa;
    --color-surface-raised: #ffffff;
    --color-surface-overlay: #ffffff;
    --color-surface-sunken: #eaeef4;
    --color-surface-hover: #e9edf4;
    --color-surface-active: #dde5f2;
    --color-border: #ccd4e0;
    --color-border-strong: #b3bece;
    --color-border-faint: #e0e6ee;
    --color-text: #0b1018;
    --color-text-secondary: #4a5567;
    --color-text-muted: #6c7789;
    --color-text-inverse: #ffffff;
    --color-accent-quiet: rgba(47, 107, 246, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}