/* =============================================================================
   Scoophescoope — design tokens
   -----------------------------------------------------------------------------
   Every colour, size, radius and duration used anywhere on the site is declared
   here and nowhere else. No component file contains a raw hex value or a magic
   number. In WordPress these become theme.json settings + Customizer controls,
   so the palette is editable without touching a stylesheet.
   ========================================================================== */

:root {

  /* --- colour ---------------------------------------------------------- */
  /* Deep teal + marigold on warm cream. Chosen to sit in the Indian gifting
     context (jewel tones read festive) while staying restrained enough to look
     premium — and to share nothing with the competitor's blush-pink floral. */

  --ink:            #1A1A18;
  --ink-soft:       #55554E;
  --ink-muted:      #6A6A62;   /* darkened for 4.5:1 on cream-deep */

  --cream:          #FAF6EF;
  --cream-deep:     #F1E9DC;
  --cream-warm:     #F6EFE4;
  --white:          #FFFFFF;

  --teal:           #0E4F4A;
  --teal-deep:      #083733;
  --teal-soft:      #DDEAE7;

  --marigold:       #E08A2C;
  --marigold-deep:  #C26F16;
  --marigold-soft:  #FBEBD3;

  --berry:          #8E2C4E;
  --berry-soft:     #F7E4EA;

  --success:        #1E7A4B;
  --success-soft:   #E2F2E9;
  --warning:        #966000;   /* darkened for 4.5:1 on marigold-soft */
  --danger:         #B3261E;
  --danger-soft:    #FBE9E7;

  --line:           rgba(26, 26, 24, 0.10);
  --line-strong:    rgba(26, 26, 24, 0.20);
  --overlay:        rgba(16, 16, 14, 0.48);

  /* Semantic aliases — components reference these, never the raw scale. */
  --bg:             var(--cream);
  --bg-alt:         var(--cream-deep);
  --surface:        var(--white);
  --text:           var(--ink);
  --text-soft:      var(--ink-soft);
  --brand:          var(--teal);
  --brand-hover:    var(--teal-deep);
  --accent:         var(--marigold);
  --sale:           var(--berry);

  /* --- typography ------------------------------------------------------- */

  --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style",
                  "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale. Min values are the 375px sizes, max are the 1440px sizes. */
  --fs-2xs:  0.6875rem;                              /* 11 */
  --fs-xs:   0.75rem;                                /* 12 */
  --fs-sm:   0.8125rem;                              /* 13 */
  --fs-base: 0.9375rem;                              /* 15 */
  --fs-md:   1rem;                                   /* 16 */
  --fs-lg:   clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);
  --fs-xl:   clamp(1.25rem, 0.6vw + 1.1rem, 1.375rem);
  --fs-2xl:  clamp(1.5rem, 1.1vw + 1.25rem, 1.75rem);
  --fs-3xl:  clamp(1.75rem, 1.9vw + 1.35rem, 2.25rem);
  --fs-4xl:  clamp(2.125rem, 3vw + 1.4rem, 3rem);
  --fs-5xl:  clamp(2.5rem, 4.4vw + 1.4rem, 3.75rem);

  --lh-tight:  1.12;
  --lh-snug:   1.28;
  --lh-normal: 1.55;
  --lh-relaxed: 1.68;

  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.015em;
  --tracking-display: -0.022em;

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

  /* --- spacing ---------------------------------------------------------- */
  /* 4px base. Section rhythm is deliberately generous: whitespace is most of
     what separates a premium storefront from a template. */

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-y: clamp(3rem, 5.5vw, 5.5rem);
  --gutter:    clamp(1rem, 3.2vw, 2.5rem);

  /* --- layout ----------------------------------------------------------- */

  --container:      1280px;
  --container-wide: 1440px;
  --container-text: 68ch;

  --header-h:       72px;
  --header-h-mobile: 60px;
  --announce-h:     38px;

  /* --- shape ------------------------------------------------------------ */
  /* Flat and bordered, not shadowed. A 1px hairline reads considered; a drop
     shadow at this price point reads like a template. */

  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  --border: 1px solid var(--line);

  --shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.05);
  --shadow-md: 0 6px 24px -12px rgba(26, 26, 24, 0.22);
  --shadow-lg: 0 24px 60px -28px rgba(26, 26, 24, 0.34);

  /* --- product imagery --------------------------------------------------- */
  /* 4:5 portrait. More product presence on a phone than the square the
     competitor uses, and it stops the grid feeling like a spreadsheet. */
  --ratio-product: 4 / 5;
  --ratio-category: 3 / 4;
  --ratio-wide: 16 / 9;

  /* --- motion ------------------------------------------------------------ */

  --dur-fast:  150ms;
  --dur-base:  220ms;
  --dur-slow:  320ms;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* --- z-index ------------------------------------------------------------ */

  --z-base:      1;
  --z-sticky:    50;
  --z-header:    100;
  --z-dropdown:  200;
  --z-overlay:   300;
  --z-drawer:    400;
  --z-modal:     500;
  --z-toast:     600;

  /* --- focus -------------------------------------------------------------- */

  /* marigold-deep, not marigold: the lighter tone only reaches 2.5:1 on
     cream and a focus ring has to clear 3:1 against its own background. */
  --focus-ring: 2px solid var(--marigold-deep);
  --focus-offset: 2px;
}

/* Motion is opt-out at the token level, so no component has to remember. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}