@layer base {
  :root {
    color-scheme: light dark;

    --ground: light-dark(#f4f5f7, #0f1115);
    --surface: light-dark(#ffffff, #181b21);
    --surface-sunken: light-dark(#eef0f3, #22262d);
    --line: light-dark(#e3e6eb, #2a2f37);
    --ink: light-dark(#16181d, #eceef2);
    --ink-muted: light-dark(#5b616d, #a3a9b4);
    --ink-faint: light-dark(#9aa0aa, #5f6571);
    --shadow: light-dark(rgb(16 24 40 / 0.05), transparent);

    --accent: light-dark(#2563eb, #7ea3ff);
    --accent-soft: light-dark(#eaf0fe, #18233d);
    --on-accent: light-dark(#ffffff, #0f1115);

    --good: light-dark(#18794e, #4cc38a);
    --good-soft: light-dark(#e4f4ea, #12301f);
    --warn: light-dark(#b54708, #f5a35c);
    --warn-soft: light-dark(#fdf0e1, #382413);
    --danger: light-dark(#c5302b, #ff7a72);
    --danger-soft: light-dark(#fde8e7, #3b1918);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-display: 2.5rem;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --radius-card: 16px;
    --radius-control: 12px;
    --radius-chip: 999px;
    --card-border: light-dark(transparent, #2a2f37);
    --card-shadow: 0 1px 2px var(--shadow), 0 4px 12px var(--shadow);
    --tap: 44px;
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}