/* ═══════════════════════════════════════════════════════════════════
   LIVIA NATURALS — tokens.css
   Single source of truth for all design tokens.
   Extracted from real product photography — Anagenix & Dermagenix.
   TidyFactor Design Engine v1.4 · Zero per-page CSS
   ═══════════════════════════════════════════════════════════════════ */

/* Pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Fonts are loaded via high-performance <link> tags in HTML head */

:root {

  /* ─── BRAND IDENTITY COLORS ───────────────────────────────────────── */

  /* Livia Magenta — Anagenix product tube / primary CTA */
  --livia-magenta:       #C8256A;
  --livia-magenta-dark:  #9B1550;
  --livia-magenta-mid:   #D94B85;
  --livia-magenta-light: #F2D0E0;
  --livia-magenta-pale:  #FBF0F5;

  /* Livia Lilac — Dermagenix label / secondary identity */
  --livia-lilac:         #9B7FD4;
  --livia-lilac-dark:    #6B4DAA;
  --livia-lilac-soft:    #C9B8E8;
  --livia-lilac-pale:    #F0EBF8;
  --livia-lilac-ultra:   #F8F5FE;

  /* Champagne Gold — product collar ring / luxury accent */
  --livia-gold:          #C9A04A;
  --livia-gold-dark:     #A07830;
  --livia-gold-pale:     #F5EDD8;
  --livia-gold-ultra:    #FBF8F0;

  /* Base Neutrals */
  --livia-pearl:         #FAF7F9;
  --livia-blush:         #F7EDF2;
  --livia-marble:        #F4F2F0;
  --livia-white:         #FFFFFF;

  /* Typography Colors */
  --livia-ink:           #1E0A19;
  --livia-ink-soft:      #5C4068;
  --livia-ink-muted:     #8B7094;
  --livia-ink-ghost:     #C4B8CC;

  /* Structural */
  --livia-line:          #E8DEF2;
  --livia-line-dark:     #D0C0DE;
  --livia-overlay:       rgba(30, 10, 25, 0.55);
  --livia-overlay-deep:  rgba(30, 10, 25, 0.75);
  --livia-glass:         rgba(250, 247, 249, 0.85);
  --livia-glass-dark:    rgba(30, 10, 25, 0.7);

  /* Botanical (from ingredient props in photos) */
  --livia-botanical:     #4A7B5C;
  --livia-botanical-lt:  #E8F4ED;

  /* WhatsApp CRO */
  --wa-green:            #25D366;
  --wa-green-dark:       #128C5E;
  --wa-green-glow:       rgba(37, 211, 102, 0.35);

  /* ─── PRODUCT-SPECIFIC THEMES ─────────────────────────────────────── */

  /* Anagenix theme (applied via [data-product="anagenix"]) */
  --product-color:       var(--livia-magenta);
  --product-color-dark:  var(--livia-magenta-dark);
  --product-color-pale:  var(--livia-magenta-pale);
  --product-surface:     var(--livia-blush);

  /* ─── TYPOGRAPHY ──────────────────────────────────────────────────── */

  --font-display-en:     'Cormorant Garamond', Georgia, serif;
  --font-display-ar:     'El Messiri', 'Georgia', serif;
  --font-ui:             'Outfit', -apple-system, sans-serif;
  --font-body-en:        'Inter', -apple-system, sans-serif;
  --font-body-ar:        'Tajawal', Arial, sans-serif;

  /* i18n token aliases — maps to brand.json localization.arabicHeadingFont / arabicBodyFont */
  --font-heading-ar:     var(--font-display-ar);   /* El Messiri — per AGENTS.md brand rules */
  --font-body-ar-alias:  var(--font-body-ar);       /* Tajawal — body & UI in Arabic */

  /* Scale — Fluid Typography (clamp: mobile min, preferred, desktop max) */
  --text-xs:    clamp(0.70rem, 0.66rem + 0.18vw, 0.78rem);
  --text-sm:    clamp(0.85rem, 0.80rem + 0.25vw, 0.95rem);
  --text-base:  clamp(1.00rem, 0.95rem + 0.25vw, 1.10rem);
  --text-md:    clamp(1.10rem, 1.00rem + 0.50vw, 1.25rem);
  --text-lg:    clamp(1.25rem, 1.10rem + 0.75vw, 1.50rem);
  --text-xl:    clamp(1.50rem, 1.25rem + 1.25vw, 2.00rem);
  --text-2xl:   clamp(2.00rem, 1.50rem + 2.50vw, 3.00rem);
  --text-3xl:   clamp(2.75rem, 2.00rem + 3.75vw, 4.50rem);
  --text-4xl:   clamp(3.50rem, 2.50rem + 5.00vw, 6.00rem);
  --text-hero:  clamp(4.00rem, 3.00rem + 6.00vw, 7.50rem);

  /* ─── SPACING ─────────────────────────────────────────────────────── */

  --space-2xs:   0.25rem;
  --space-xs:    0.5rem;
  --space-sm:    0.75rem;
  --space-md:    1.25rem;
  --space-lg:    2.00rem;
  --space-xl:    3.00rem;
  --space-2xl:   5.00rem;
  --space-3xl:   8.00rem;
  --space-4xl:   12.00rem;

  /* ─── BORDERS & RADIUS ────────────────────────────────────────────── */

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   40px;
  --radius-full: 9999px;

  /* ─── SHADOWS ─────────────────────────────────────────────────────── */

  --shadow-sm:   0 1px 3px rgba(30,10,25,0.08), 0 1px 2px rgba(30,10,25,0.04);
  --shadow-md:   0 4px 12px rgba(30,10,25,0.10), 0 2px 4px rgba(30,10,25,0.06);
  --shadow-lg:   0 10px 30px rgba(30,10,25,0.12), 0 4px 8px rgba(30,10,25,0.08);
  --shadow-xl:   0 20px 50px rgba(30,10,25,0.16), 0 8px 16px rgba(30,10,25,0.08);
  --shadow-glow-magenta: 0 8px 32px rgba(200,37,106,0.30);
  --shadow-glow-lilac:   0 8px 32px rgba(155,127,212,0.30);
  --shadow-glow-gold:    0 8px 32px rgba(201,160,74,0.25);

  /* ─── MOTION ──────────────────────────────────────────────────────── */

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    600ms;
  --dur-slower:  900ms;
  --dur-cinematic: 1200ms;

  /* ─── LAYOUT ──────────────────────────────────────────────────────── */

  --container:       1200px;
  --container-wide:  1440px;
  --container-text:  720px;

  /* ─── Z-INDEX STACK ───────────────────────────────────────────────── */

  --z-base:     1;
  --z-above:    10;
  --z-nav:      100;
  --z-toolbar:  200;
  --z-modal:    500;
  --z-toast:    600;
  --z-float:    700;
  --z-overlay:  800;

}

/* ─── Anagenix product theme override ─────────────────────────────────── */
[data-product="anagenix"] {
  --product-color:      var(--livia-magenta);
  --product-color-dark: var(--livia-magenta-dark);
  --product-color-pale: var(--livia-magenta-pale);
  --product-surface:    var(--livia-blush);
  --product-gradient:   linear-gradient(135deg, var(--livia-magenta) 0%, #8B2252 100%);
}

/* ─── Dermagenix product theme override ───────────────────────────────── */
[data-product="dermagenix"] {
  --product-color:      var(--livia-lilac);
  --product-color-dark: var(--livia-lilac-dark);
  --product-color-pale: var(--livia-lilac-pale);
  --product-surface:    var(--livia-marble);
  --product-gradient:   linear-gradient(135deg, var(--livia-lilac) 0%, #4A2E8A 100%);
}