:root {
  color-scheme: dark light;
  --font-main: "Inter", "Manrope", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --color-bg: #0d0f10;
  --color-bg-elevated: #131618;
  --color-surface: rgba(255,255,255,.045);
  --color-surface-strong: rgba(255,255,255,.075);
  --color-text: #f4f4f1;
  --color-text-soft: rgba(244,244,241,.78);
  --color-muted: rgba(244,244,241,.56);
  --color-muted-2: rgba(244,244,241,.36);
  --color-line: rgba(244,244,241,.14);
  --color-line-strong: rgba(244,244,241,.38);
  --color-line-soft: rgba(244,244,241,.08);
  --color-grid: rgba(244,244,241,.085);
  --color-scanline: rgba(255,255,255,.04);
  --color-glow-soft: rgba(160,168,170,.105);
  --color-glow-faint: rgba(160,168,170,.058);
  --color-accent: #ffffff;
  --color-danger: #f4f4f1;

  --container: min(1180px, calc(100vw - 56px));
  --header-height: 76px;
  --radius: 0px;
  --shadow-soft: 0 22px 90px rgba(0,0,0,.44);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,.05);
  --transition-fast: 180ms cubic-bezier(.22, 1, .36, 1);
  --transition: 420ms cubic-bezier(.22, 1, .36, 1);
  --transition-slow: 820ms cubic-bezier(.22, 1, .36, 1);
  --grid-opacity: .58;
  --scanline-opacity: .44;
  --scanline-blend: screen;
  --asset-filter: invert(1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: #f5f5f2;
    --color-bg-elevated: #ffffff;
    --color-surface: rgba(0,0,0,.035);
    --color-surface-strong: rgba(0,0,0,.065);
    --color-text: #090909;
    --color-text-soft: rgba(9,9,9,.76);
    --color-muted: rgba(9,9,9,.56);
    --color-muted-2: rgba(9,9,9,.36);
    --color-line: rgba(9,9,9,.14);
    --color-line-strong: rgba(9,9,9,.34);
    --color-line-soft: rgba(9,9,9,.08);
    --color-grid: rgba(9,9,9,.065);
    --color-scanline: rgba(0,0,0,.025);
    --color-glow-soft: rgba(0,0,0,.055);
    --color-glow-faint: rgba(0,0,0,.035);
    --shadow-soft: 0 22px 90px rgba(0,0,0,.09);
    --shadow-inner: inset 0 1px 0 rgba(255,255,255,.7);
    --grid-opacity: .5;
    --scanline-opacity: .22;
    --scanline-blend: multiply;
    --asset-filter: invert(0);
  }
}

:root[data-theme="light"] {
  --color-bg: #f5f5f2;
  --color-bg-elevated: #ffffff;
  --color-surface: rgba(0,0,0,.035);
  --color-surface-strong: rgba(0,0,0,.065);
  --color-text: #090909;
  --color-text-soft: rgba(9,9,9,.76);
  --color-muted: rgba(9,9,9,.56);
  --color-muted-2: rgba(9,9,9,.36);
  --color-line: rgba(9,9,9,.14);
  --color-line-strong: rgba(9,9,9,.34);
  --color-line-soft: rgba(9,9,9,.08);
  --color-grid: rgba(9,9,9,.065);
  --color-scanline: rgba(0,0,0,.025);
  --color-glow-soft: rgba(0,0,0,.055);
  --color-glow-faint: rgba(0,0,0,.035);
  --shadow-soft: 0 22px 90px rgba(0,0,0,.09);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,.7);
  --grid-opacity: .5;
  --scanline-opacity: .22;
  --scanline-blend: multiply;
  --asset-filter: invert(0);
}

:root[data-theme="dark"] {
  --color-bg: #0d0f10;
  --color-bg-elevated: #131618;
  --color-surface: rgba(255,255,255,.045);
  --color-surface-strong: rgba(255,255,255,.075);
  --color-text: #f4f4f1;
  --color-text-soft: rgba(244,244,241,.78);
  --color-muted: rgba(244,244,241,.56);
  --color-muted-2: rgba(244,244,241,.36);
  --color-line: rgba(244,244,241,.14);
  --color-line-strong: rgba(244,244,241,.38);
  --color-line-soft: rgba(244,244,241,.08);
  --color-grid: rgba(244,244,241,.085);
  --color-scanline: rgba(255,255,255,.04);
  --color-glow-soft: rgba(160,168,170,.105);
  --color-glow-faint: rgba(160,168,170,.058);
  --shadow-soft: 0 22px 90px rgba(0,0,0,.44);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,.05);
  --grid-opacity: .58;
  --scanline-opacity: .44;
  --scanline-blend: screen;
  --asset-filter: invert(1);
}