:root,
:root[data-theme=light] {
  color-scheme: light;
  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --surface-raised: #EDEDF0;
  --preview-bg: #E9E9EC;
  --text: #17171A;
  --text-secondary: #484852;
  --text-muted: #6B6B75;
  --primary: #17171A;
  --primary-hover: #2F2F35;
  --on-primary: #FFFFFF;
  --link: #1D4ED8;
  --focus: #17171A;
  --control-border: #6E6E77;
  --border: #75757E;
  --divider: #DFDFE3;
  --hairline: rgba(23,23,26,0.10);
  --header-bg: rgba(247,247,248,0.86);
  --shadow-1: 0 1px 2px rgba(20,20,26,0.05), 0 1px 3px rgba(20,20,26,0.04);
  --shadow-2: 0 4px 8px -2px rgba(20,20,26,0.08), 0 12px 24px -6px rgba(20,20,26,0.12);
  --shadow-3: 0 16px 40px -12px rgba(20,20,26,0.18);
  --error: #B91C1C;
  --success: #166534;
  --overlay: rgba(0,0,0,0.56);
  --muted: var(--text-muted);
  --accent: var(--link);
  --scrim:
    linear-gradient(
      
      180deg,
      rgba(10,10,14,0) 45%,
      rgba(10,10,14,0.82) 100%);
  --scrim-persistent:
    linear-gradient(
      
      180deg,
      rgba(10,10,14,0) 40%,
      rgba(10,10,14,0.72) 100%);
  --on-scrim: #FFFFFF;
  --on-scrim-secondary: rgba(255,255,255,0.88);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #0E0E10;
  --surface: #17171A;
  --surface-raised: #232327;
  --preview-bg: #0A0A0C;
  --text: #F2F2F4;
  --text-secondary: #B8B8C0;
  --text-muted: #9C9CA6;
  --primary: #ECECF0;
  --primary-hover: #FBFBFC;
  --on-primary: #15151A;
  --link: #93C5FD;
  --focus: #F2F2F4;
  --control-border: #8A8A94;
  --border: #7A7A84;
  --divider: #2E2E33;
  --hairline: rgba(255,255,255,0.08);
  --header-bg: rgba(14,14,16,0.80);
  --shadow-1: none;
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,0.55);
  --shadow-3: 0 20px 48px -16px rgba(0,0,0,0.65);
  --error: #FCA5A5;
  --success: #86EFAC;
  --overlay: rgba(0,0,0,0.72);
  --muted: var(--text-muted);
  --accent: var(--link);
  --scrim:
    linear-gradient(
      
      180deg,
      rgba(10,10,14,0) 45%,
      rgba(10,10,14,0.82) 100%);
  --scrim-persistent:
    linear-gradient(
      
      180deg,
      rgba(10,10,14,0) 40%,
      rgba(10,10,14,0.72) 100%);
  --on-scrim: #FFFFFF;
  --on-scrim-secondary: rgba(255,255,255,0.88);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0E0E10;
    --surface: #17171A;
    --surface-raised: #232327;
    --preview-bg: #0A0A0C;
    --text: #F2F2F4;
    --text-secondary: #B8B8C0;
    --text-muted: #9C9CA6;
    --primary: #ECECF0;
    --primary-hover: #FBFBFC;
    --on-primary: #15151A;
    --link: #93C5FD;
    --focus: #F2F2F4;
    --control-border: #8A8A94;
    --border: #7A7A84;
    --divider: #2E2E33;
    --hairline: rgba(255,255,255,0.08);
    --header-bg: rgba(14,14,16,0.80);
    --shadow-1: none;
    --shadow-2: 0 8px 24px -8px rgba(0,0,0,0.55);
    --shadow-3: 0 20px 48px -16px rgba(0,0,0,0.65);
    --error: #FCA5A5;
    --success: #86EFAC;
    --overlay: rgba(0,0,0,0.72);
    --muted: var(--text-muted);
    --accent: var(--link);
    --scrim:
      linear-gradient(
        
        180deg,
        rgba(10,10,14,0) 45%,
        rgba(10,10,14,0.82) 100%);
    --scrim-persistent:
      linear-gradient(
        
        180deg,
        rgba(10,10,14,0) 40%,
        rgba(10,10,14,0.72) 100%);
    --on-scrim: #FFFFFF;
    --on-scrim-secondary: rgba(255,255,255,0.88);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --dur-fast: 120ms;
    --dur-base: 160ms;
    --dur-slow: 240ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
html {
  background: var(--bg);
  color: var(--text);
}