:root {
  color-scheme: light;
  --color-background: #f7f7f9;
  --color-surface: #ffffff;
  --color-text-primary: #1c1c1e;
  --color-text-secondary: #6e6e73;
  --color-border: #d8d8dc;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --radius-small: 10px;
  --radius-normal: 14px;
  --radius-large: 16px;
  --font-size-body: 1rem;
  --font-size-title: clamp(2rem, 8vw, 3rem);
  --header-height: 56px;
  --bottom-navigation-height: 56px;
  --touch-target-size: 44px;
  --icon-size: 22px;
  --motion-duration: 200ms;
  --application-max-width: 960px;
  --page-padding-inline: 12px;
  --z-index-content: 1;
  --z-index-overlay: 10;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-background: #000000;
  --color-surface: #1c1c1e;
  --color-text-primary: #f5f5f7;
  --color-text-secondary: #98989d;
  --color-border: #38383a;
}