/* ==========================================================================
   SMOVF FRAGRANCE — DESIGN TOKENS
   Single source of truth for the brand system.
   Do not hard-code colour, type or spacing values anywhere else.
   ========================================================================== */

:root {
  /* ---------- 1. BRAND COLOUR ------------------------------------------ */
  /* Official SMOVF brand colour. Never redefine this value. */
  --smovf-gold: #F7CD45;

  /* Supporting gold steps, derived for hover / borders / tints only.
     These are NOT alternate brand colours — the brand gold above is. */
  --smovf-gold-hover: #E8BC2C;
  --smovf-gold-deep:  #C9990E;
  --smovf-gold-tint:  rgba(247, 205, 69, 0.14);
  --smovf-gold-line:  rgba(247, 205, 69, 0.38);

  /* ---------- 2. CORE PALETTE ------------------------------------------ */
  --black:      #111111; /* headings, nav, footer, luxury contrast */
  --charcoal:   #262626; /* body emphasis, secondary dark sections */
  --white:      #FFFFFF; /* primary page background */
  --neutral:    #F8F7F3; /* alternate sections, category backgrounds */
  --grey-light: #EAEAEA; /* borders, dividers, form fields, disabled */

  /* ---------- 3. SEMANTIC ROLES ---------------------------------------- */
  --bg:            var(--white);
  --bg-alt:        var(--neutral);
  --bg-dark:       var(--black);
  --bg-dark-soft:  var(--charcoal);

  --text:          var(--charcoal);
  --text-heading:  var(--black);
  --text-muted:    #6B6B6B;
  --text-placeholder: #9A9A9A;
  --text-on-dark:  var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.66);
  --text-on-gold:  var(--black);

  --border:        var(--grey-light);
  --border-strong: #D3D3D3;
  --border-on-dark: rgba(255, 255, 255, 0.16);

  --accent:        var(--smovf-gold);

  /* Gold used as TEXT on light backgrounds. The brand gold is far too light to
     read as small type (#F7CD45 on white is 1.7:1), and even --smovf-gold-deep
     only reaches 2.6:1. This value clears WCAG AA on both white (5.3:1) and the
     soft neutral (4.9:1). Enforced by tools/check.mjs.
     Fills, borders, icons, badges and rules keep the true brand gold. */
  --accent-text:   #8A6608;

  /* Form errors. A deep oxblood rather than a signal red — it reads as a
     correction rather than an alarm, and clears AA on white (7.6:1) and on
     its own tint (6.7:1). Enforced by tools/check.mjs. */
  --error-text:    #9B2C1B;
  --error-tint:    #FBEFEC;

  /* Confirmation. The brand palette has no green, and it does not need one on
     the marketing pages — but "paid" and "shipped" are states a customer
     should be able to read at a glance, and a gold badge cannot say them
     apart from a warning. Deep enough to clear AA on white and on the tint it
     sits on, so it is a text colour rather than another fill. */
  --success-text:  #1F6B44;
  --success-tint:  #EDF5F0;

  --focus-ring:    var(--smovf-gold-deep);

  /* ---------- 4. TYPOGRAPHY -------------------------------------------- */
  /* Exactly two families. Heading = editorial serif. Body = clean sans. */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Jost", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* Fluid type scale — mobile-first, scales with viewport, capped for desktop */
  --fs-hero:  clamp(2.75rem, 1.6rem + 5.6vw, 6rem);
  --fs-h1:    clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --fs-h2:    clamp(1.75rem, 1.25rem + 2.2vw, 2.85rem);
  --fs-h3:    clamp(1.3rem, 1.08rem + 0.95vw, 1.75rem);
  --fs-h4:    clamp(1.08rem, 1rem + 0.4vw, 1.25rem);
  --fs-lead:  clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem);
  --fs-body:  1rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-label: 0.75rem;   /* section labels, badges, eyebrow text */

  --lh-tight: 1.06;
  --lh-heading: 1.16;
  --lh-body: 1.68;

  --ls-hero: -0.015em;
  --ls-heading: -0.005em;
  --ls-label: 0.18em;    /* generous tracking for uppercase labels */
  --ls-button: 0.11em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---------- 5. SPACING ----------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Vertical rhythm for full-width sections — generous white space */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --section-y-tight: clamp(2.5rem, 1.5rem + 4vw, 5rem);

  /* ---------- 6. LAYOUT ------------------------------------------------ */
  --container: 1280px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---------- 7. RADIUS / ELEVATION ------------------------------------ */
  /* Medium rounded corners — premium, never playful */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow:    0 6px 24px rgba(17, 17, 17, 0.07);
  --shadow-lg: 0 18px 50px rgba(17, 17, 17, 0.11);

  /* ---------- 8. MOTION ------------------------------------------------ */
  /* Restrained. Interaction feedback only — never decorative animation. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* ---------- 9. Z-INDEX ----------------------------------------------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 190;
  --z-toast: 300;

  /* ---------- 10. HEADER ------------------------------------------------ */
  --header-h: 68px;
}

@media (min-width: 1024px) {
  :root { --header-h: 84px; }
}

/* Respect user motion preferences — no exceptions. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}