/* Number tokens (text/radius/space) — desktop is the base scale, mobile overrides below.
   Breakpoint matches the layout breakpoint already used in index.html (max-width: 1160px). */
:root {
  --text-title-l: 24px;
  --text-title-m: 20px;
  --text-title-s: 16px;
  --text-body-l: 18px;
  --text-body-m: 16px;
  --text-body-s: 14px;
  --text-label-l: 16px;
  --text-label-m: 14px;
  --text-label-s: 12px;
  --radius-100: 4px;
  --radius-200: 8px;
  --radius-300: 12px;
  --radius-400: 16px;
  --radius-500: 20px;
  --radius-600: 24px;
  --radius-700: 32px;
  --radius-1000: 9999px;
  --space-100: 4px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-500: 20px;
  --space-600: 24px;
  --space-700: 32px;
  --space-800: 40px;
  --space-900: 48px;
  --space-1000: 64px;
}

@media (max-width: 1160px) {
  :root {
    --text-title-l: 20px;
    --text-title-m: 16px;
    --text-title-s: 14px;
    --text-body-l: 16px;
    --text-body-m: 14px;
    --text-body-s: 12px;
    --text-label-l: 14px;
    --text-label-m: 12px;
    --text-label-s: 11px;
    --radius-100: 4px;
    --radius-200: 6px;
    --radius-300: 10px;
    --radius-400: 12px;
    --radius-500: 16px;
    --radius-600: 20px;
    --radius-700: 24px;
    --radius-1000: 9999px;
    --space-100: 4px;
    --space-200: 6px;
    --space-300: 10px;
    --space-400: 12px;
    --space-500: 16px;
    --space-600: 20px;
    --space-700: 24px;
    --space-800: 28px;
    --space-900: 32px;
    --space-1000: 40px;
  }
}