/* ============================================================
   RIA ART JEWELLERY — CSS CUSTOM PROPERTIES
   Loaded first on every page. No hardcoded values elsewhere.
   ============================================================ */

:root {
  /* ── MOOD LAYER (rose palette) — page backgrounds, editorial sections ── */
  --ria-bg-primary:       #FDF5F2;
  --ria-bg-secondary:     #F5DDD6;
  --ria-bg-tertiary:      #E8C4B8;
  --ria-bg-editorial:     #FAF0EC;

  /* ── STAGE LAYER (near-white) — product cards, nav, modals ── */
  --ria-surface-primary:  #FDFBF7;
  --ria-surface-secondary:#FDFCFB;
  --ria-surface-tertiary: #FAF8F6;

  /* ── GOLD SYSTEM ── */
  --ria-gold-primary:     #B8860B;
  --ria-gold-light:       #D4AF6B;
  --ria-gold-dark:        #8B6914;
  --ria-gold-shine:       #F0D060;
  --ria-gold-subtle:      rgba(184, 134, 11, 0.08);

  /* ── TEXT (WCAG 2.1 AA compliant) ── */
  --ria-text-primary:     #1A1A1A;
  --ria-text-secondary:   #2A2A2A;
  --ria-text-price:       #2C1A04;
  --ria-text-editorial:   #4A121A;
  --ria-text-editorial-sub:#331811;
  --ria-text-muted:       #6B5550;
  --ria-text-on-gold:     #FFFFFF;
  --ria-text-on-dark:     #FAF0EC;

  /* ── BORDERS ── */
  --ria-border-light:     #EDD5CC;
  --ria-border-medium:    #D4A898;
  --ria-border-product:   #F0EBE8;
  --ria-border-gold:      rgba(184, 134, 11, 0.3);

  /* ── UTILITY ── */
  --ria-white:            #FFFFFF;
  --ria-whatsapp:         #25D366;
  --ria-success:          #4A7C59;
  --ria-amber:            #D4860B;

  /* ── TYPOGRAPHY ── */
  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --font-accent:    'Cormorant SC', Georgia, serif;

  --text-hero:    clamp(2.8rem, 6vw, 5.5rem);
  --text-display: clamp(2rem, 4vw, 3.5rem);
  --text-heading: clamp(1.4rem, 2.5vw, 2rem);
  --text-subhead: clamp(1rem, 1.8vw, 1.25rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-micro:   0.75rem;

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

  /* ── BORDERS ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:   0 2px 8px rgba(61, 26, 18, 0.06);
  --shadow-md:   0 6px 20px rgba(61, 26, 18, 0.10);
  --shadow-lg:   0 12px 40px rgba(61, 26, 18, 0.14);
  --shadow-gold: 0 4px 24px rgba(184, 134, 11, 0.22);

  /* ── TRANSITIONS ── */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    0.15s;
  --dur-base:    0.3s;
  --dur-slow:    0.6s;

  /* ── GLASSMORPHISM 2.0 ── */
  --glass-nav-bg:           rgba(253, 252, 251, 0.88);
  --glass-nav-border:       0.5px solid rgba(240, 235, 232, 0.8);
  --glass-panel-bg:         rgba(255, 255, 255, 0.90);
  --glass-panel-border:     0.5px solid rgba(240, 235, 232, 0.9);
  --glass-modal-bg:         rgba(253, 252, 251, 0.97);
  --glass-editorial-bg:     rgba(253, 245, 242, 0.82);
  --glass-editorial-border: 0.5px solid rgba(212, 168, 152, 0.4);
  --glass-blur:             blur(12px);
  --glass-blur-mobile:      blur(8px);
  --glass-blur-strong:      blur(16px);
  --glass-shadow:           0 8px 32px rgba(61, 26, 18, 0.10);
  --glass-shadow-strong:    0 16px 60px rgba(61, 26, 18, 0.14);

  /* ── Z-INDEX ── */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-nav:     9000;
  --z-toast:   9999;
}