/**
 * Deep Perfume — Design Tokens
 * -----------------------------------------------------------------------------
 * Single source of truth for every color, font, spacing and radius on the site.
 * Loaded before any other stylesheet (see functions.php, priority 1).
 *
 * RULE: no hardcoded hex values anywhere downstream. Components reference the
 * semantic aliases (--c-bg, --c-cta, ...) not the raw brand names.
 *
 * Source: deep-perfume-build-brief.md §3.
 * -----------------------------------------------------------------------------
 */

:root {
  /* --- Brand palette (from the brand guideline) ------------------------- */
  --c-plum:        #330C4B;  /* primary: logo, headings, CTA buttons, key UI */
  --c-plum-deep:   #26093A;  /* hover / pressed state of plum                */
  --c-emerald:     #154230;  /* premium sections, collection blocks          */
  --c-brass:       #B08A52;  /* luxury accent — DARK surfaces only (see 3.2) */
  --c-brass-text:  #8A6838;  /* darkened brass for text on cream (AA 4.6:1)  */
  --c-stone:       #DED5CA;  /* cards, secondary surfaces — CONFIRM w/ owner */
  --c-cream:       #F7F3EC;  /* page background                              */
  --c-ink:         #26252A;  /* body text                                    */
  --c-ink-muted:   #5A575F;  /* captions, secondary text                     */
  --c-line:        #E2DACF;  /* hairlines, borders                           */

  /* --- Semantic aliases — USE THESE IN COMPONENTS ----------------------- */
  --c-bg:          var(--c-cream);
  --c-surface:     var(--c-stone);
  --c-text:        var(--c-ink);
  --c-text-muted:  var(--c-ink-muted);
  --c-cta:         var(--c-plum);
  --c-cta-hover:   var(--c-plum-deep);
  --c-inv-bg:      var(--c-plum);   /* inverted (dark) sections background   */
  --c-inv-text:    var(--c-cream);  /* text on inverted sections             */
  --c-inv-accent:  var(--c-brass);  /* brass accent on inverted sections     */

  /* --- Typography ------------------------------------------------------- */
  /* Arabic is primary. Latin is the secondary translation layer.           */
  --f-ar: "The Year of The Camel", "Noto Naskh Arabic", "Segoe UI", system-ui, sans-serif;
  --f-en: "Nyght Serif", "Playfair Display", Georgia, serif;

  /* Line-heights are set PER LANGUAGE, never globally (Arabic needs more).  */
  --lh-ar-body:    1.9;
  --lh-ar-head:    1.5;
  --lh-en-body:    1.6;
  --lh-en-head:    1.15;

  /* Fluid type scale (clamp: min = mobile, max = desktop) — brief §3.3.     */
  --fs-hero:  clamp(1.875rem, 1.2rem + 3.4vw, 3.75rem);  /* 30 -> 60px */
  --fs-h2:    clamp(1.5rem,   1.15rem + 1.6vw, 2.5rem);  /* 24 -> 40px */
  --fs-h3:    clamp(1.0625rem, 1rem + 0.3vw,  1.25rem);  /* 17 -> 20px */
  --fs-body:  clamp(1rem,     0.98rem + 0.1vw, 1.0625rem); /* 16 -> 17px */
  --fs-small: 0.875rem;  /* 14px */
  --fs-label: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem); /* 12 -> 13px */

  /* --- Radius — keep tight; ornament lives in the logo, not in boxes ---- */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* --- Shadow — two levels only ---------------------------------------- */
  --sh-1: 0 1px 2px rgb(38 37 42 / .06);
  --sh-2: 0 12px 32px rgb(51 12 75 / .12);

  /* --- Spacing scale — never use arbitrary values ---------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* --- Oud grade metallic accents (§5.2) --------------------------------
     Decorative only — used as label/ring tones on DARK grade cards, never as
     text on cream. Cream text always sits on the card's dark ground. */
  --grade-diamond:  #DDE3EC;  /* icy platinum-white */
  --grade-platinum: #B9BFC7;  /* cool silver-grey   */
  --grade-gold:     #C9A24B;  /* warm gold          */
  --grade-silver:   #9BA1A9;  /* muted silver       */
  --grade-bronze:   #A76F42;  /* warm bronze        */

  /* --- Layout ----------------------------------------------------------- */
  --container: 1280px;
  --gutter:    var(--s-4);

  /* --- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --dur-fast:  .18s;
  --dur-base:  .3s;
}

/* Respect reduced-motion globally — components inherit this baseline. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur-base: 0s;
  }
}