/* Design tokens: mobile-first (base = 320px), then tablet 744+, then 820+ overrides */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --page-padding-x: 16px;
  --page-padding-top: 16px;
  --page-padding-bottom: 32px;

  --header-height: 64px;
  --header-inner-radius: 48px;
  --header-gap-content: 32px;
  --header-title-size: 32px;
  --header-logo-width: 44px;
  --header-logo-height: 42px;

  --control-height: 44px;
  --radius-card: 24px;
  --radius-card-lg: 32px;

  --text-body: 16px;
  --text-small: 14px;
  --text-title: 18px;
  --text-price: 16px;
}

@media (min-width: 744px) {
  :root {
    --page-padding-x: 40px;
    --page-padding-top: 24px;
    --page-padding-bottom: 48px;

    --header-height: 72px;
    --header-gap-content: 24px;
    --header-title-size: 40px;
    --header-logo-width: 52px;
    --header-logo-height: 49px;

    --control-height: 43px;
    --radius-card: 24px;
    --radius-card-lg: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-title-size: 54px;
    --control-height: 48px;
  }
}

@media (min-width: 1280px) and (max-width: 1311px) {
  :root {
    --page-padding-x: 54px;
  }
}

@media (min-width: 1312px) {
  :root {
    --page-padding-x: 0;
    --page-padding-top: 40px;
    --page-padding-bottom: 48px;

    --header-height: 96px;
    --header-gap-content: 48px;
    --header-title-size: 48px;
    --header-logo-width: 68px;
    --header-logo-height: 64px;

    --control-height: 52px;
    --radius-card: 32px;
    --radius-card-lg: 48px;
  }
}