/* ─────────────────────────────────────────────────────────────
   SPACING — Long Hair Don't Care
───────────────────────────────────────────────────────────── */

:root {
  /* ── Base scale (4px grid) ── */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-18:  4.5rem;    /* 72px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-30:  7.5rem;    /* 120px */
  --space-32:  8rem;      /* 128px */

  /* ── Semantic spacing ── */
  --section-padding-x: 5%;
  --section-padding-y: var(--space-16);
  --section-gap:       var(--space-12);
  --container-max:     80rem;   /* 1280px */
  --container-lg:      48rem;
  --container-md:      35rem;

  /* ── Component tokens ── */
  --radius-button: 6.25rem;   /* 100px — pill */
  --radius-card:   1rem;      /* 16px  */
  --radius-input:  0.75rem;   /* 12px  */
  --radius-badge:  6.25rem;
  --radius-image:  1rem;

  --border-card:   1px;
  --border-divider: 1px;

  /* ── Z-index layers ── */
  --z-base:    0;    /* @kind other */
  --z-raised:  10;   /* @kind other */
  --z-overlay: 100;  /* @kind other */
  --z-nav:     999;  /* @kind other */
  --z-modal:   1000; /* @kind other */
}

@media (min-width: 768px) {
  :root {
    --section-padding-y: var(--space-24);
  }
}

@media (min-width: 992px) {
  :root {
    --section-padding-y: var(--space-28);
  }
}