/* Spacing Tokens — styles / spacing
 * Desktop-first: default = L (≥1280px), @max-width 79.9375rem (1279px) = M, @max-width 63.9375rem (1023px) = S
 * Note: spacing is not strictly scaled — values are adjusted per breakpoint (Figma note)
 */

/* --- Container Padding (horizontal) --- */
:root {
  --dk-space-container-l:      12rem;    /* 192px */
  --dk-space-container-m:      7.5rem;   /* 120px */
  --dk-space-container-m-hero: 11.25rem; /* 180px */
  --dk-space-container-s:      6rem;     /* 96px */
  --dk-space-container-xs:     2rem;     /* 32px */

  /* Standard page inline padding: L=120px, M=20px, S=12px */
  --dk-space-page-inline:      7.5rem;  /* 120px at L */
  /* Wide page inline padding for modules with 192px at L: L=192px, M=20px, S=12px */
  --dk-space-page-inline-wide: 12rem;   /* 192px at L */
}

@media (max-width: 79.9375rem) {
  :root {
    --dk-space-container-l:      12rem;    /* 192px — M same as L */
    --dk-space-container-m:      1.25rem;  /* 20px */
    --dk-space-container-m-hero: 7.5rem;   /* 120px */
    --dk-space-container-s:      1.25rem;  /* 20px */
    --dk-space-container-xs:     1.75rem;  /* 28px */

    --dk-space-page-inline:      1.25rem;  /* 20px at M */
    --dk-space-page-inline-wide: 1.25rem;  /* 20px at M */
  }
}

@media (max-width: 63.9375rem) {
  :root {
    --dk-space-container-l:      0.75rem;  /* 12px */
    --dk-space-container-m:      0.75rem;  /* 12px */
    --dk-space-container-m-hero: 0.75rem;  /* 12px */
    --dk-space-container-s:      0.75rem;  /* 12px */
    --dk-space-container-xs:     1.5rem;   /* 24px */

    --dk-space-page-inline:      0.75rem;  /* 12px at S */
    --dk-space-page-inline-wide: 0.75rem;  /* 12px at S */
  }
}

/* --- Section Spacing (vertical) --- */
:root {
  --dk-space-section-xl:  15rem;    /* 240px */
  --dk-space-section-l:   6rem;     /* 96px */
  --dk-space-section-m:   5rem;     /* 80px */
  --dk-space-section-s:   3.5rem;   /* 56px */
  --dk-space-section-xs:  2rem;     /* 32px */
  --dk-space-section-xxs: 1.25rem;  /* 20px */
}

@media (max-width: 79.9375rem) {
  :root {
    --dk-space-section-m:   4rem;     /* 64px */
    --dk-space-section-s:   3rem;     /* 48px */
    --dk-space-section-xs:  1.75rem;  /* 28px */
    --dk-space-section-xxs: 1.125rem; /* 18px */
  }
}

@media (max-width: 63.9375rem) {
  :root {
    --dk-space-section-xl:  7.5rem;   /* 120px */
    --dk-space-section-l:   4.5rem;   /* 72px */
    --dk-space-section-m:   3.5rem;   /* 56px */
    --dk-space-section-s:   2.5rem;   /* 40px */
    --dk-space-section-xs:  1.5rem;   /* 24px */
    --dk-space-section-xxs: 1rem;     /* 16px */
  }
}

/* --- Component Spacing --- */
:root {
  --dk-space-00:              0.25rem; /* 4px — fixed */
  --dk-space-01:              0.5rem;  /* 8px — fixed */
  --dk-space-02:              0.75rem; /* 12px */
  --dk-space-03:              1rem;    /* 16px */
  --dk-space-04:              1.25rem; /* 20px */
  --dk-space-05:              1.5rem;  /* 24px */
  --dk-space-06:              2rem;    /* 32px */
  --dk-space-07:              2.5rem;  /* 40px */
  --dk-space-08:              3rem;    /* 48px */
  --dk-space-09:              3.5rem;  /* 56px */
  --dk-space-10:              4.5rem;  /* 72px */
  --dk-space-11:              5rem;    /* 80px */
  --dk-space-12-hero:         5rem;    /* 80px */
  --dk-space-13:              10rem;   /* 160px */
  --dk-space-teaser-2-clmns:  1.25rem; /* 20px */
}

@media (max-width: 79.9375rem) {
  :root {
    --dk-space-02:              0.5rem;   /* 8px */
    --dk-space-03:              1rem;     /* 16px — M same as L */
    --dk-space-04:              1.125rem; /* 18px */
    --dk-space-05:              1.25rem;  /* 20px */
    --dk-space-06:              1.75rem;  /* 28px */
    --dk-space-07:              2rem;     /* 32px */
    --dk-space-08:              2.75rem;  /* 44px */
    --dk-space-09:              3rem;     /* 48px */
    --dk-space-10:              3.5rem;   /* 56px */
    --dk-space-11:              4.5rem;   /* 72px */
    --dk-space-12-hero:         4.5rem;   /* 72px */
    --dk-space-13:              7.5rem;   /* 120px */
    --dk-space-teaser-2-clmns:  1.125rem; /* 18px */
  }
}

@media (max-width: 63.9375rem) {
  :root {
    --dk-space-02:              0.5rem;  /* 8px */
    --dk-space-03:              0.75rem; /* 12px */
    --dk-space-04:              1rem;    /* 16px */
    --dk-space-05:              1.125rem;/* 18px */
    --dk-space-06:              1.5rem;  /* 24px */
    --dk-space-07:              1.25rem; /* 20px */
    --dk-space-08:              2.5rem;  /* 40px */
    --dk-space-09:              2.5rem;  /* 40px */
    --dk-space-10:              3rem;    /* 48px */
    --dk-space-11:              4rem;    /* 64px */
    --dk-space-12-hero:         7rem;    /* 112px */
    --dk-space-13:              5rem;    /* 80px */
    --dk-space-teaser-2-clmns:  3.5rem;  /* 56px */
  }
}