/* ============================================================
   DESIGN TOKENS — BongoWear
   Change these variables to rebrand the entire site.
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-brand:        hsl(24, 55%, 48%);   /* Rich warm terracotta */
  --color-brand-hover:  hsl(24, 55%, 40%);
  --color-brand-light:  hsl(30, 50%, 94%);
  --color-brand-dark:   hsl(24, 55%, 28%);

  /* ── Neutrals — warm brown-tinted for beige harmony ── */
  --color-black:        hsl(25, 15%, 12%);
  --color-dark:         hsl(25, 12%, 18%);
  --color-charcoal:     hsl(25, 8%, 30%);
  --color-grey-700:     hsl(25, 6%, 40%);
  --color-grey-500:     hsl(25, 5%, 45%);
  --color-grey-400:     hsl(25, 5%, 56%);
  --color-grey-300:     hsl(30, 8%, 78%);
  --color-grey-200:     hsl(30, 12%, 87%);
  --color-grey-100:     hsl(33, 18%, 93%);
  --color-grey-50:      hsl(35, 25%, 96%);
  --color-white:        hsl(40, 20%, 99%);

  /* ── Surface Colors — premium beige layers ── */
  --color-surface:      hsl(37, 30%, 97%);   /* Main page background */
  --color-surface-alt:  hsl(35, 28%, 94%);   /* Alternating sections */
  --color-surface-card: hsl(40, 20%, 99%);   /* Card / elevated bg */

  /* ── Semantic ── */
  --color-success:      hsl(152, 45%, 40%);
  --color-warning:      hsl(38, 85%, 50%);
  --color-danger:       hsl(0, 62%, 50%);
  --color-info:         hsl(210, 50%, 48%);

  /* ── Sale / Badge ── */
  --color-sale:         hsl(0, 60%, 48%);
  --color-new:          hsl(24, 55%, 48%);
  --color-preorder:     hsl(210, 45%, 44%);
  --color-limited:      hsl(280, 40%, 46%);

  /* ── Typography ── */
  --font-heading:       'Outfit', sans-serif;
  --font-body:          'Inter', sans-serif;

  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  /* Desktop type scale */
  --fs-display:         clamp(2.5rem, 4vw, 3.75rem);
  --fs-h1:              clamp(2rem, 3vw, 2.75rem);
  --fs-h2:              clamp(1.5rem, 2.4vw, 2.25rem);
  --fs-h3:              clamp(1.125rem, 1.6vw, 1.5rem);
  --fs-h4:              1.125rem;
  --fs-body:            0.9375rem;
  --fs-body-lg:         1.0625rem;
  --fs-small:           0.8125rem;
  --fs-xs:              0.75rem;

  --lh-tight:           1.2;
  --lh-normal:          1.55;
  --lh-relaxed:         1.75;

  --ls-tight:           -0.02em;
  --ls-normal:          0;
  --ls-wide:            0.06em;
  --ls-wider:           0.12em;

  /* ── Spacing ── */
  --space-xs:           0.25rem;
  --space-sm:           0.5rem;
  --space-sm2:          0.75rem;
  --space-md:           1rem;
  --space-lg:           1.5rem;
  --space-xl:           2rem;
  --space-2xl:          3rem;
  --space-3xl:          4rem;
  --space-4xl:          6rem;
  --space-5xl:          8rem;

  /* ── Layout ── */
  --max-width:          1320px;
  --container-padding:  clamp(1rem, 3vw, 2rem);

  /* ── Borders / Radius ── */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-full:        9999px;

  /* ── Shadows ── */
  --shadow-xs:          0 1px 2px hsla(0,0%,0%,0.04);
  --shadow-sm:          0 2px 8px hsla(0,0%,0%,0.06);
  --shadow-md:          0 4px 16px hsla(0,0%,0%,0.08);
  --shadow-lg:          0 8px 32px hsla(0,0%,0%,0.1);

  /* ── Transitions ── */
  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:    250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-hero:    700ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-toast:            500;
}