@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #070b12;
  --surface-container-low: #0d1520;
  --surface-container: #111827;
  --surface-container-high: #1e293b;
  --surface-container-highest: #26364d;
  --on-surface: #f8fafc;
  --on-surface-variant: #cbd5e1;
  --outline: #475569;
  --outline-variant: #334155;
  --accent: #38bdf8;
  --accent-hover: #0284c7;
  --accent-soft: rgba(56, 189, 248, 0.12);
  --accent-soft-hover: rgba(56, 189, 248, 0.18);
  --on-accent: #070b12;
  --danger: #ef4444;
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.12);
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.18);
  --focus-ring: #7dd3fc;
  --overlay-scrim: rgba(0, 0, 0, 0.75);
  --viewport-text: #f8fafc;
  --viewport-muted: #cbd5e1;
  --viewport-accent: #7dd3fc;
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface: #f5f6fa;
  --surface-container-low: #eef0f5;
  --surface-container: #ffffff;
  --surface-container-high: #e9ecf2;
  --surface-container-highest: #dfe3eb;
  --on-surface: #191c20;
  --on-surface-variant: #454a52;
  --outline: #737983;
  --outline-variant: #c4c9d2;
  --accent: #006493;
  --accent-hover: #004b70;
  --accent-soft: rgba(0, 100, 147, 0.1);
  --accent-soft-hover: rgba(0, 100, 147, 0.16);
  --on-accent: #ffffff;
  --danger: #ba1a1a;
  --warning: #8b5000;
  --warning-soft: rgba(139, 80, 0, 0.1);
  --success: #146c43;
  --success-soft: rgba(20, 108, 67, 0.14);
  --focus-ring: #005f91;
  --overlay-scrim: rgba(17, 24, 39, 0.52);
  --viewport-text: #f8fafc;
  --viewport-muted: #cbd5e1;
  --viewport-accent: #7dd3fc;
}

:root {
  --bg-dark: var(--surface);
  --panel-bg: var(--surface-container);
  --card-bg: var(--surface-container-high);
  --text-main: var(--on-surface);
  --text-muted: var(--on-surface-variant);
  --border: var(--outline-variant);
  --warn: var(--warning);
  --code-surface: #070b12;
  --on-code-surface: #e2e8f0;
  --interactive-surface: var(--surface-container-high);
  --interactive-hover: var(--surface-container-highest);
  --input-surface: var(--surface);
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --motion-standard: 180ms;
  --motion-emphasized: 260ms;
  --elevation-0: none;
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.22);
  --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.24);
  --elevation-3: 0 10px 28px rgba(0, 0, 0, 0.28);
}

:root[data-theme="light"] {
  --elevation-1: 0 1px 3px rgba(28, 35, 45, 0.12);
  --elevation-2: 0 4px 12px rgba(28, 35, 45, 0.14);
  --elevation-3: 0 10px 28px rgba(28, 35, 45, 0.18);
}