/* Spacing, grid and container widths.
   Figma collections "Basics / Space", "Desktop // Mobile", "Responsiu". */

:root {
  /* ── Space scale ───────────────────────────────────────────── */
  --basic-space-0-5: 2px;
  --basic-space-1: 4px;
  --basic-space-1-5: 6px;
  --basic-space-2: 8px;
  --basic-space-2-5: 10px;
  --basic-space-3: 12px;
  --basic-space-3-5: 14px;
  --basic-space-4: 16px;
  --basic-space-5: 20px;
  --basic-space-6: 24px;
  --basic-space-7: 28px;
  --basic-space-8: 32px;
  --basic-space-9: 36px;
  --basic-space-10: 40px;
  --basic-space-11: 44px;
  --basic-space-12: 48px;
  --basic-space-14: 56px;
  --basic-space-16: 64px;
  --basic-space-20: 80px;

  /* ── Breakpoint + page grid — desktop ──────────────────────── */
  --breakpoint-width: 1440px;
  --container-width-full: 1440px;
  --container-width-max: 1360px;
  --container-width-3-quarter: 1014px;
  --container-width-2-thirds: 899px;
  --container-width-half: 668px;
  --container-width-third: 437px;
  --container-width-quarter: 322px;
  --container-width-sixth: 206px;
  --container-width-twelfth: 92px;

  --grid-columns: 12;
  --grid-gutter: var(--basic-space-6);
  --grid-margin: var(--basic-space-10);

  /* ── Container padding — desktop ───────────────────────────── */
  --container-padding-null: 0px;
  --container-padding-xs: var(--basic-space-2);
  --container-padding-s: var(--basic-space-4);
  --container-padding-m: var(--basic-space-6);
  --container-padding-l: var(--basic-space-10);
  --container-padding-xl: var(--basic-space-16);
  --container-padding-2xl: var(--basic-space-20);
  --container-padding-vertical-null: 0px;
  --container-padding-vertical-s: var(--basic-space-4);
  --container-padding-vertical-l: var(--basic-space-10);
  --container-padding-vertical-full: var(--basic-space-20);

  /* ── Container gaps — desktop ──────────────────────────────── */
  --container-gap-xs: var(--basic-space-2);
  --container-gap-s: var(--basic-space-4);
  --container-gap-m: var(--basic-space-6);
  --container-gap-l: var(--basic-space-8);
  --container-gap-xl: var(--basic-space-10);
  --container-gap-2xl: var(--basic-space-12);
  --container-gap-3xl: var(--basic-space-16);
  --container-gap-4xl: var(--basic-space-20);
  --container-gap-grid: var(--basic-space-6);

  /* ── Vertical rhythm ──────────────────────────────────────── */
  --spacing-v-xxs: var(--basic-space-2);
  --spacing-v-xs: var(--basic-space-3);
  --spacing-v-s: var(--basic-space-4);
  --spacing-v-m: var(--basic-space-6);
  --spacing-v-l: var(--basic-space-10);
  --spacing-v-xl: var(--basic-space-20);
  --padding-h-default: var(--basic-space-10);

  /* ── Component sizing ─────────────────────────────────────── */
  --button-size: var(--basic-space-10);  /* 40px desktop, 44px mobile */
  --header-height: 80px;
  --hero-height-fullscreen: 811px;
}

:root[data-device='mobile'] {
  --breakpoint-width: 375px;
  --container-width-full: 375px;
  --container-width-max: 343px;
  --container-width-3-quarter: 343px;
  --container-width-2-thirds: 343px;
  --container-width-half: 343px;
  --container-width-third: 343px;
  --container-width-quarter: 343px;
  --container-width-sixth: 167.5px;
  --container-width-twelfth: 80px;

  --grid-columns: 4;
  --grid-gutter: var(--basic-space-2);
  --grid-margin: var(--basic-space-4);

  --container-padding-xs: var(--basic-space-2);
  --container-padding-s: var(--basic-space-2);
  --container-padding-m: var(--basic-space-4);
  --container-padding-l: var(--basic-space-4);
  --container-padding-xl: var(--basic-space-8);
  --container-padding-2xl: var(--basic-space-10);
  --container-padding-vertical-s: var(--basic-space-2);
  --container-padding-vertical-l: var(--basic-space-4);
  --container-padding-vertical-full: var(--basic-space-10);

  --container-gap-s: var(--basic-space-5);
  --container-gap-l: var(--basic-space-10);
  --container-gap-2xl: var(--basic-space-16);
  --container-gap-3xl: var(--basic-space-20);
  --container-gap-grid: var(--basic-space-2);

  --spacing-v-xxs: var(--basic-space-1);
  --spacing-v-xs: var(--basic-space-2);
  --spacing-v-s: var(--basic-space-3);
  --spacing-v-m: var(--basic-space-4);
  --spacing-v-l: var(--basic-space-6);
  --spacing-v-xl: var(--basic-space-10);
  --padding-h-default: var(--basic-space-4);

  --button-size: var(--basic-space-11);
  --hero-height-fullscreen: 740px;
}

@media (max-width: 767px) {
  :root {
    --grid-columns: 4;
    --grid-gutter: var(--basic-space-2);
    --grid-margin: var(--basic-space-4);
    --container-width-max: 343px;
    --padding-h-default: var(--basic-space-4);
    --button-size: var(--basic-space-11);
  }
}