/* =========================================================
   SHAFAAF PERFUMES — DESIGN TOKENS
   Single source of truth for the visual language. Every
   component reads from these custom properties instead of
   hard-coded values.
   ========================================================= */

:root {
  /* ---------- Color: neutrals ---------- */
  --c-ink: #1a1611;         /* primary text, near-black warm charcoal */
  --c-charcoal: #2a241d;    /* secondary dark surface */
  --c-espresso: #3d2a1f;    /* brand dark brown — header, footer, CTAs */
  --c-espresso-700: #4d3627;
  --c-ivory: #faf7f2;       /* page background */
  --c-ivory-2: #f4efe6;     /* alt section background */
  --c-offwhite: #fffdfb;    /* card background */
  --c-champagne: #e9dcc6;   /* soft accent surface */
  --c-line: #e6ddcf;        /* hairline borders */
  --c-line-strong: #d8cbb4;

  /* ---------- Color: metallic / accent ---------- */
  --c-gold: #ad8a54;        /* muted metallic gold — used sparingly */
  --c-gold-bright: #c6a15f;
  --c-gold-soft: #cdb48a;
  --c-amber: #8a5a34;

  /* ---------- Color: text on dark ---------- */
  --c-text-on-dark: #f3ead9;
  --c-text-on-dark-muted: #cdbfa9;

  /* ---------- Color: semantic ---------- */
  --c-success: #3f7a52;
  --c-success-bg: #eaf3ec;
  --c-error: #a3403b;
  --c-error-bg: #f7eae9;
  --c-whatsapp: #25d366;
  --c-whatsapp-dark: #1ebc59;

  /* ---------- Text ---------- */
  --c-text: var(--c-ink);
  --c-text-muted: #6c6357;
  --c-text-faint: #9a8f7d;

  /* ---------- Typography ---------- */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --fs-display-xl: clamp(2.75rem, 2rem + 3.2vw, 5rem);
  --fs-display-lg: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-display-md: clamp(1.85rem, 1.5rem + 1.5vw, 2.75rem);
  --fs-display-sm: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-xl: 1.375rem;
  --fs-lg: 1.125rem;
  --fs-md: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-2xs: 0.6875rem;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.14em;
  --ls-widest: 0.22em;

  /* ---------- Spacing scale (4px base) ---------- */
  --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;
  --sp-32: 8rem;

  /* ---------- Radius ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 1px 3px rgba(26, 22, 17, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 22, 17, 0.08);
  --shadow-lg: 0 20px 48px rgba(26, 22, 17, 0.14);
  --shadow-xl: 0 30px 70px rgba(26, 22, 17, 0.22);
  --shadow-gold: 0 10px 30px rgba(173, 138, 84, 0.25);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-normal: 280ms;
  --dur-slow: 500ms;
  --dur-cinematic: 900ms;

  /* ---------- Layout ---------- */
  --container-max: 1360px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 84px;
  --header-h-scrolled: 68px;

  /* ---------- Breakpoints (reference only, used in media queries) ---------- */
  /* xs: 0-479, sm: 480-767, md: 768-1023, lg: 1024-1279, xl: 1280-1535, 2xl: 1536+ */

  /* ---------- Z-index layers ---------- */
  --z-base: 1;
  --z-sticky: 10;
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 210;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
    --header-h-scrolled: 56px;
  }
}

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