/*
 * INORA design tokens.
 *
 * Every colour, size and rhythm value in the theme resolves back to this file.
 * Retheming the storefront should mean editing these custom properties and
 * nothing else.
 */

:root {
  /* ---- Grounds -------------------------------------------------------- */
  --c-ivory:        #faf8f3;  /* page background                            */
  --c-shell:        #efe9df;  /* hero panel, alternating band               */
  --c-cream:        #f2ede4;  /* USP bar, cards                             */
  --c-sand:         #e8e0d2;  /* image placeholder, hover ground            */
  --c-white:        #ffffff;

  /* ---- Ink ------------------------------------------------------------ */
  --c-olive:        #333a26;  /* footer, buttons, announcement bar          */
  --c-olive-deep:   #272c1c;  /* button hover                               */
  --c-ink:          #2c2c28;  /* body copy, headings                        */
  --c-muted:        #6b6b60;  /* secondary copy, meta                       */
  --c-faint:        #9a9a8c;  /* placeholder text, disabled                 */
  --c-line:         #ded6c6;  /* hairline rules on light grounds            */
  --c-line-dark:    #4a5139;  /* hairline rules on olive                    */

  /* ---- Accent --------------------------------------------------------- */
  --c-gold:         #b99a5b;
  --c-gold-soft:    #d9c69a;
  --c-gold-wash:    #f0e7d4;
  --c-sale:         #a8574a;
  --c-success:      #4f6b3f;

  /* ---- Semantic ------------------------------------------------------- */
  --c-bg:           var(--c-ivory);
  --c-text:         var(--c-ink);
  --c-heading:      var(--c-ink);
  --c-border:       var(--c-line);

  /* ---- Type families -------------------------------------------------- */
  --f-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --f-ui: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Type scale ----------------------------------------------------- */
  --t-hero:     clamp(3rem, 7.5vw, 5.75rem);   /* BOTANICAL                 */
  --t-script:   clamp(1.5rem, 3vw, 2.25rem);   /* Beauty in Every Detail    */
  --t-h1:       clamp(2.25rem, 4.5vw, 3.25rem);
  --t-h2:       clamp(1.75rem, 3vw, 2.375rem);
  --t-h3:       clamp(1.375rem, 2.2vw, 1.75rem);
  --t-h4:       1.1875rem;
  --t-lead:     1.0625rem;
  --t-body:     1rem;
  --t-small:    0.875rem;
  --t-micro:    0.75rem;
  --t-nano:     0.6875rem;

  /* Section eyebrows and nav sit at wide tracking; these keep it uniform. */
  --ls-wide:    0.18em;
  --ls-wider:   0.28em;
  --ls-widest:  0.42em;   /* the INORA wordmark                            */
  --ls-tight:   0.01em;

  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-body:    1.72;

  /* ---- Spacing (4px base) --------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* Vertical rhythm between major homepage bands. */
  --section-y: clamp(3.5rem, 7vw, 6rem);

  /* ---- Layout --------------------------------------------------------- */
  --container:      1240px;
  --container-wide: 1440px;
  --container-text: 720px;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --header-h: 84px;
  --announce-h: 38px;

  /* ---- Form / shape --------------------------------------------------- */
  --radius:    2px;   /* the brand is squared-off; keep this restrained     */
  --radius-lg: 3px;
  --border:    1px solid var(--c-border);

  /* Card image aspect ratio. Single source of truth for the product,
     collection and Instagram grids - change once, everything follows. */
  --card-ratio: 1 / 1;
  --hero-ratio: 4 / 3;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(51, 58, 38, 0.06);
  --shadow:    0 4px 20px rgba(51, 58, 38, 0.08);
  --shadow-lg: 0 18px 50px rgba(51, 58, 38, 0.13);

  /* ---- Motion --------------------------------------------------------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   160ms;
  --dur:        280ms;
  --dur-slow:   600ms;

  /* ---- Stacking ------------------------------------------------------- */
  --z-base:     1;
  --z-sticky:   50;
  --z-header:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-drawer:   400;
  --z-toast:    500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
}