/* AddToThese design tokens — mirrors Figma file 31g9XMRCu3pxkSY0plMpCs */
:root {
  color-scheme: dark;
  --bg-canvas: #0B0F14;
  --bg-surface: #121821;
  --bg-elevated: #1A222D;
  --border: #243040;
  --text: #E9EEF4;
  --text-2: #8B98A9;
  --accent: #3DDC97;
  --on-accent: #06110C;
  --accent-2: #7C5CFF;
  --danger: #FF5C6C;
  --warning: #FFB84D;

  --accent-tint: rgba(61, 220, 151, 0.12);
  --accent-2-tint: rgba(124, 92, 255, 0.14);
  --danger-tint: rgba(255, 92, 108, 0.12);
  --warning-tint: rgba(255, 184, 77, 0.14);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --overlay: rgba(4, 7, 11, 0.7);
  --terminal-red: #FF5F57;
  --terminal-yellow: #FEBC2E;
  --terminal-green: #28C840;

  /* --font-script is set per language for scripts Inter does not cover. */
  --font-sans: "Inter", var(--font-script, system-ui), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: 56px; --lh-display: 60px; --ls-display: -1.5px;
  --fs-h1: 40px; --lh-h1: 46px;
  --fs-h2: 28px; --lh-h2: 34px;
  --fs-h3: 20px; --lh-h3: 26px;
  --fs-body-l: 18px; --lh-body-l: 28px;
  --fs-body: 15px; --lh-body: 24px;
  --fs-small: 13px; --lh-small: 20px;
  --fs-label: 14px; --lh-label: 20px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  --content-max: 1200px;
  --gutter: 16px;
  --sidebar-w: 248px;
  --focus: 0 0 0 3px rgba(61, 220, 151, 0.45);
  --ease: 160ms ease;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg-canvas: #F7F8FA;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F1F3F6;
    --border: #E2E6EB;
    --text: #0F1720;
    --text-2: #5B6675;
    --accent: #12A870;
    --on-accent: #FFFFFF;
    --accent-tint: rgba(18, 168, 112, 0.12);
    --danger-tint: rgba(255, 92, 108, 0.14);
    --warning-tint: rgba(255, 184, 77, 0.2);
    --shadow: 0 10px 30px rgba(15, 23, 32, 0.1);
    --overlay: rgba(15, 23, 32, 0.45);
    --focus: 0 0 0 3px rgba(18, 168, 112, 0.4);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #F7F8FA;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F1F3F6;
  --border: #E2E6EB;
  --text: #0F1720;
  --text-2: #5B6675;
  --accent: #12A870;
  --on-accent: #FFFFFF;
  --accent-tint: rgba(18, 168, 112, 0.12);
  --danger-tint: rgba(255, 92, 108, 0.14);
  --warning-tint: rgba(255, 184, 77, 0.2);
  --shadow: 0 10px 30px rgba(15, 23, 32, 0.1);
  --overlay: rgba(15, 23, 32, 0.45);
  --focus: 0 0 0 3px rgba(18, 168, 112, 0.4);
}

@media (max-width: 720px) {
  :root {
    --fs-display: 38px; --lh-display: 44px; --ls-display: -1px;
    --fs-h1: 32px; --lh-h1: 38px;
    --fs-h2: 24px; --lh-h2: 30px;
    --fs-body-l: 17px; --lh-body-l: 26px;
  }
}