/* ============================================================
   KOOKOOS — Design Tokens
   The single source of truth for the "loud & punchy" system.
   ============================================================ */

@font-face {
  font-family: "Adumu";
  src: url("../fonts/Adumu.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* ---- Brand palette (locked) ---- */
  --orange: #F5821F;   /* primary brand, CTAs, nav */
  --deep:   #D96B0A;   /* darker orange, hovers */
  --yolk:   #FFC23D;   /* bright accent, highlights */
  --cream:  #FFF6EA;   /* warm canvas background */
  --char:   #1B1B1B;   /* near-black ink & dark bands */
  --brick:  #B4310A;   /* deep red, price tags, badges */
  --white:  #FFFFFF;

  /* ---- Ink / text ---- */
  --ink:        #1B1B1B;
  --ink-soft:   rgba(27, 27, 27, .72);
  --ink-mute:   rgba(27, 27, 27, .52);
  --on-dark:        #FFF6EA;
  --on-dark-soft:   rgba(255, 246, 234, .78);

  /* ---- Type ---- */
  --font-head: "Adumu", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-display: clamp(3.5rem, 8vw, 7.25rem);   /* hero H1 */
  --fs-h1:      clamp(2.75rem, 6vw, 5rem);      /* page hero */
  --fs-h2:      clamp(2.25rem, 4.4vw, 3.75rem); /* section titles */
  --fs-h3:      clamp(1.35rem, 2vw, 1.7rem);    /* card titles */
  --fs-lead:    clamp(1.1rem, 1.4vw, 1.3rem);   /* intro copy */
  --fs-body:    1.075rem;
  --fs-sm:      0.94rem;
  --fs-xs:      0.8rem;

  /* ---- Spacing scale (8pt-ish rhythm) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;

  /* Section vertical padding (fluid) */
  --section-y: clamp(4rem, 8vw, 7rem);

  /* ---- Layout ---- */
  --wrap: min(1200px, 92%);
  --wrap-wide: min(1360px, 94%);

  /* ---- Radius scale ---- */
  --r-sm:   14px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 6px 18px rgba(27, 27, 27, .08);
  --shadow-md: 0 14px 38px rgba(27, 27, 27, .14);
  --shadow-lg: 0 26px 60px rgba(27, 27, 27, .22);
  /* Hard "sticker" offset — the loud signature */
  --shadow-hard:    5px 5px 0 0 var(--char);
  --shadow-hard-lg: 8px 9px 0 0 var(--char);

  /* ---- Motion ---- */
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .2s;
  --dur:      .32s;
  --dur-slow: .6s;

  /* ---- Borders ---- */
  --bd-char: 3px solid var(--char);
  --bd-hair: 1.5px solid rgba(27, 27, 27, .12);
}