@layer tokens {
  :root {
    color-scheme: light;
    --color-bg: #f6f8fc;
    --color-surface: #ffffff;
    --color-surface-muted: #eef2f7;
    --color-text: #172033;
    --color-text-muted: #637087;
    --color-border: #d9e0ea;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-danger: #c62828;
    --shadow-sm: 0 1px 2px rgb(15 23 42 / 8%);
    --shadow-lg: 0 18px 48px rgb(15 23 42 / 12%);
    --radius-sm: 0.45rem;
    --radius-md: 0.8rem;
    --radius-lg: 1.1rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --content-width: 1180px;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0f1420;
    --color-surface: #161c2a;
    --color-surface-muted: #1d2535;
    --color-text: #e5e9f2;
    --color-text-muted: #9aa6bd;
    --color-border: #2a3449;
    --color-primary: #7aa2ff;
    --color-primary-hover: #93b4ff;
    --color-danger: #f87171;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-lg: 0 18px 48px rgb(0 0 0 / 50%);
  }

  @media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
      color-scheme: dark;
      --color-bg: #0f1420;
      --color-surface: #161c2a;
      --color-surface-muted: #1d2535;
      --color-text: #e5e9f2;
      --color-text-muted: #9aa6bd;
      --color-border: #2a3449;
      --color-primary: #7aa2ff;
      --color-primary-hover: #93b4ff;
      --color-danger: #f87171;
    }
  }
}