:root {
  --space-xxs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 28px;
  --space-3xl: 40px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --color-bg: #f3f2f1;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #faf9f8;
  --color-border: #edebe9;
  --color-border-strong: #d2d0ce;
  --color-text: #323130;
  --color-text-muted: #605e5c;
  --color-text-subtle: #a19f1d;
  --color-accent: #0078d4;
  --color-accent-hover: #106ebe;
  --color-accent-muted: #c7e0f4;
  --color-accent-text: #005a9e;
  --color-danger: #d13438;
  --color-danger-bg: #fde7e9;
  --color-success: #107c10;
  --color-success-bg: #dff6dd;
  --color-warning: #ffb900;
  --color-warning-bg: #fff4ce;
  --color-info: #0078d4;
  --color-info-bg: #c7e0f4;
  --color-link: #0078d4;

  --shadow-card: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);
  --shadow-card-hover: 0 3.2px 7.2px 0 rgba(0,0,0,0.132), 0 0.6px 1.8px 0 rgba(0,0,0,0.108);
  --shadow-modal: 0 6.4px 14.4px 0 rgba(0,0,0,0.132), 0 1.2px 3.6px 0 rgba(0,0,0,0.108);
  --shadow-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);

  --transition-fast: 0.1s ease;
  --transition-normal: 0.2s ease;
}

[data-theme="dark"] {
  --color-bg: #201f1f;
  --color-surface: #292828;
  --color-surface-elevated: #383838;
  --color-surface-muted: #323130;
  --color-border: #3b3a39;
  --color-border-strong: #484644;
  --color-text: #fafafa;
  --color-text-muted: #c8c3c0;
  --color-text-subtle: #dccfbd;
  --color-accent: #0078d4;
  --color-accent-hover: #2b88d8;
  --color-accent-muted: #004578;
  --color-accent-text: #6cb3f2;
  --color-danger: #f85149;
  --color-danger-bg: #3b1a1a;
  --color-success: #3fb950;
  --color-success-bg: #1a2e1a;
  --color-warning: #d29922;
  --color-warning-bg: #3b2e05;
  --color-info: #0078d4;
  --color-info-bg: #1a2e3d;
  --color-link: #4788c7;

  --shadow-card: 0 1.6px 3.6px 0 rgba(0,0,0,0.432), 0 0.3px 0.9px 0 rgba(0,0,0,0.348);
  --shadow-card-hover: 0 3.2px 7.2px 0 rgba(0,0,0,0.432), 0 0.6px 1.8px 0 rgba(0,0,0,0.348);
  --shadow-modal: 0 6.4px 14.4px 0 rgba(0,0,0,0.432), 0 1.2px 3.6px 0 rgba(0,0,0,0.348);
  --shadow-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}