html {
  --sp-radius-media: 2px;
  --sp-radius-control: 4px;
  --sp-radius-surface: 8px;
  --sp-radius-modal: 16px;
  --sp-radius-pill: 999px;

  --sp-rhythm-section: 48px;
  --sp-rhythm-screen: 24px;
  --sp-rhythm-block: 16px;
  --sp-rhythm-group: 12px;
  --sp-rhythm-tight: 8px;
}

:root {
  color-scheme: light;
  --sp-bg: #F7F8FA;
  --sp-surface: #FCFCFD;
  --sp-surface-raised: #FFFFFF;
  --sp-surface-sunken: #EDEFF3;
  --sp-surface-glass: rgba(252, 252, 253, 0.88);
  --sp-border: #DCE0E7;
  --sp-border-strong: #747D8E;
  --sp-border-glass: rgba(255, 255, 255, 0.22);
  --sp-ink: #141922;
  --sp-ink-muted: #4D5666;
  --sp-ink-inverse: #F7F8FA;
  --sp-primary: #1A2130;
  --sp-primary-hover: #2D3649;
  --sp-primary-ink: #FFFFFF;
  --sp-accent: #2D4DAE;
  --sp-accent-hover: #223C8C;
  --sp-accent-ink: #FFFFFF;
  --sp-success: #2D6A4E;
  --sp-success-ink: #FFFFFF;
  --sp-warning: #855708;
  --sp-warning-ink: #FFFFFF;
  --sp-danger: #A12F2A;
  --sp-danger-ink: #FFFFFF;
  --sp-focus-ring: #2D4DAE;
  --sp-overlay: rgba(12, 15, 22, 0.68);
  --sp-overlay-soft: rgba(12, 15, 22, 0.45);
  --sp-shadow: rgba(20, 25, 34, 0.10);
}

:root[data-mode="dark"] {
  color-scheme: dark;
  --sp-bg: #0E1117;
  --sp-surface: #151922;
  --sp-surface-raised: #1C212C;
  --sp-surface-sunken: #0A0C11;
  --sp-surface-glass: rgba(21, 25, 34, 0.88);
  --sp-border: #2A303C;
  --sp-border-strong: #6E7789;
  --sp-border-glass: rgba(255, 255, 255, 0.12);
  --sp-ink: #E8EBF1;
  --sp-ink-muted: #A3ABB9;
  --sp-ink-inverse: #0E1117;
  --sp-primary: #E8EBF1;
  --sp-primary-hover: #FFFFFF;
  --sp-primary-ink: #0E1117;
  --sp-accent: #8EA6EE;
  --sp-accent-hover: #AABDF3;
  --sp-accent-ink: #0E1117;
  --sp-success: #6EBD94;
  --sp-success-ink: #0E1117;
  --sp-warning: #DDB05A;
  --sp-warning-ink: #0E1117;
  --sp-danger: #EE8A80;
  --sp-danger-ink: #0E1117;
  --sp-focus-ring: #8EA6EE;
  --sp-overlay: rgba(0, 0, 0, 0.72);
  --sp-overlay-soft: rgba(0, 0, 0, 0.45);
  --sp-shadow: rgba(0, 0, 0, 0.40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;
    --sp-bg: #0E1117;
    --sp-surface: #151922;
    --sp-surface-raised: #1C212C;
    --sp-surface-sunken: #0A0C11;
    --sp-surface-glass: rgba(21, 25, 34, 0.88);
    --sp-border: #2A303C;
    --sp-border-strong: #6E7789;
    --sp-border-glass: rgba(255, 255, 255, 0.12);
    --sp-ink: #E8EBF1;
    --sp-ink-muted: #A3ABB9;
    --sp-ink-inverse: #0E1117;
    --sp-primary: #E8EBF1;
    --sp-primary-hover: #FFFFFF;
    --sp-primary-ink: #0E1117;
    --sp-accent: #8EA6EE;
    --sp-accent-hover: #AABDF3;
    --sp-accent-ink: #0E1117;
    --sp-success: #6EBD94;
    --sp-success-ink: #0E1117;
    --sp-warning: #DDB05A;
    --sp-warning-ink: #0E1117;
    --sp-danger: #EE8A80;
    --sp-danger-ink: #0E1117;
    --sp-focus-ring: #8EA6EE;
    --sp-overlay: rgba(0, 0, 0, 0.72);
    --sp-overlay-soft: rgba(0, 0, 0, 0.45);
    --sp-shadow: rgba(0, 0, 0, 0.40);
  }
}