:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  --touch-target: 48px;
  --height-button: 48px;
  --height-bar: 56px;
  --height-tab-bar: 56px;
  --height-list: 56px;
  --height-list-two: 72px;
  --height-badge: 24px;
  --icon-size: 24px;
  --icon-size-inline: 20px;

  --radius-control: 8px;
  --radius-surface: 12px;
  --radius-badge: 4px;
  --radius-full: 999px;

  --color-background: #f3f5f8;
  --color-surface: #ffffff;
  --color-surface-muted: #e7ecf2;
  --color-text-primary: #172033;
  --color-text-secondary: #526277;
  --color-text-tertiary: #5a6c7e;
  --color-border: #d5dee8;
  --color-primary: #0f4c81;
  --color-primary-fill: #0f4c81;
  --color-primary-pressed: #0c3d68;
  --color-on-primary: #ffffff;
  --color-primary-container: #e5f0fa;
  --color-on-primary-container: #0f4c81;
  --color-success: #176c45;
  --color-success-container: #e7f6ee;
  --color-warning: #8a5a00;
  --color-warning-container: #fbf3e4;
  --color-error: #b42318;
  --color-error-container: #fdecea;
  --color-danger-fill: #b42318;
  --color-switch-off: #c5d0dc;
  --color-scrim: rgba(16, 22, 29, 0.48);
  --shadow-overlay: 0 -8px 24px rgba(23, 32, 51, 0.12);

  color-scheme: light;
}

:root[data-theme="night"],
[data-theme="night"] {
  --color-background: #10161d;
  --color-surface: #1a2330;
  --color-surface-muted: #243140;
  --color-text-primary: #e8eef5;
  --color-text-secondary: #b7c3d1;
  --color-text-tertiary: #8b9aab;
  --color-border: #334155;
  --color-primary: #7eb6ea;
  --color-primary-fill: #2f6aab;
  --color-primary-pressed: #25598f;
  --color-on-primary: #ffffff;
  --color-primary-container: #1b334c;
  --color-on-primary-container: #7eb6ea;
  --color-success: #8fe0b8;
  --color-success-container: #143528;
  --color-warning: #f0c48a;
  --color-warning-container: #3a2e16;
  --color-error: #f6d4d0;
  --color-error-container: #3a2220;
  --color-danger-fill: #9a3b34;
  --color-switch-off: #3d4c5e;
  --color-scrim: rgba(8, 12, 16, 0.64);
  --shadow-overlay: 0 -8px 24px rgba(0, 0, 0, 0.36);

  color-scheme: dark;
}