@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --clr-void:        hsl(0 0% 3%);
  --clr-base:        hsl(0 0% 10%);
  --clr-surface:     hsl(0 0% 20%);
  --clr-surface-2:   hsl(0 0% 23%);
  --clr-surface-3:   hsl(0 0% 26%);

  --clr-border:      hsl(38 45% 60% / 0.10);
  --clr-border-mid:  hsl(38 45% 60% / 0.22);
  --clr-border-bold: hsl(38 45% 60% / 0.40);

  --clr-gold:        hsl(38 45% 60%);
  --clr-gold-light:  hsl(38 52% 72%);
  --clr-gold-muted:  hsl(38 35% 48%);
  --clr-gold-glow:   hsl(38 45% 60% / 0.18);
  --clr-gold-subtle: hsl(38 45% 60% / 0.07);
  --clr-gold-brand:  #BEB076;

  --clr-text-primary: #333333;
  --clr-text-body:    #444444;
  --clr-text-muted:   #666666;
  --clr-text-sub:     #555555;
  --clr-text-faint:   hsl(25 6% 50%);

  --clr-success: hsl(145 42% 52%);
  --clr-error:   hsl(0 62% 52%);
  --clr-white:   hsl(0 0% 98%);

  --clr-light-bg:          #ffffff;
  --clr-light-border:      #e5e7eb;
  --clr-light-q:           #2c3e50;
  --clr-light-a:           #5a6c7d;
  --clr-light-a-bg:        #fdfbf7;
  --clr-blog-quote-bg:     #F8F6F1;
  --clr-callout-info-1:    #FDFBF7;
  --clr-callout-info-2:    #F5F3EE;
  --clr-callout-info-h:    #8a7a4a;
  --clr-callout-tip-1:     #F0F4F8;
  --clr-callout-tip-2:     #E8EEF4;
  --clr-callout-tip-h:     #4a5a7a;
  --clr-callout-success-1: #F0F9F4;
  --clr-callout-success-2: #E6F4ED;
  --clr-callout-success-h: #2e7a56;
  --clr-callout-warning-1: #FFF5F5;
  --clr-callout-warning-2: #FFEFEF;
  --clr-callout-warning-h: #a03030;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --text-xs:   0.70rem;
  --text-sm:   0.82rem;
  --text-base: 0.95rem;
  --text-md:   1.05rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.8rem;
  --text-4xl:  3.8rem;
  --text-hero: clamp(2.8rem, 6vw, 5.2rem);

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  3.5rem;
  --space-xl:  6rem;
  --space-2xl: 10rem;

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 50px;

  --shadow-card:     0 2px 20px hsl(0 0% 0% / 0.35);
  --shadow-card-up:  0 8px 40px hsl(0 0% 0% / 0.5);
  --glow-gold-soft:  0 0 80px -8px hsl(38 45% 60% / 0.45);
  --glow-gold-mid:   0 0 120px -8px hsl(38 45% 60% / 0.6);
  --glow-gold-ring:  0 0 0 1px hsl(38 45% 60% / 0.45), 0 0 60px -8px hsl(38 45% 60% / 0.4);

  --ease-default: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.28s;
  --dur-slow: 0.45s;

  --content-max: 1400px;
  --content-pad: 24px;
  --content-pad-mobile: 18px;
}

.on-dark,
body.dark-theme {
  --clr-text-primary: hsl(40 18% 92%);
  --clr-text-body:    hsl(30 8% 72%);
  --clr-text-muted:   hsl(30 5% 52%);
  --clr-text-faint:   hsl(30 4% 38%);
}

body.dark-theme {
  background-color: var(--clr-base);
}
/* ============================================================
   SECTION TOKEN ALIASES
   Append to the bottom of variables.css.

   luminex-sections.css uses shorthand tokens (--void, --gold
   etc). These aliases map them to the --clr- system already
   defined above, so section styles work on product pages.
   ============================================================ */

:root {

  /* ── Colour aliases ── */
  --void:      hsl(0 0% 3%);          /* = --clr-void    */
  --base:      hsl(0 0% 10%);         /* = --clr-base    */
  --base2:     hsl(0 0% 14%);
  --base3:     hsl(0 0% 17%);
  --gold:      #BEB076;               /* = --clr-gold-brand */
  --gold-l:    #D4C98A;
  --gold-d:    #9A8E56;
  --gold-dim:  rgba(190,176,118,.18);
  --gold-haze: rgba(190,176,118,.07);
  --blue:      #6B7A99;
  --purple:    #9B88B5;
  --purple-dim:rgba(155,136,181,.15);
  --cream:     #FDFBF7;
  --cream2:    #F5F3EE;
  --cream3:    #EDE9E1;
  --text:      #1A2535;
  --mid:       #4A5E70;
  --light:     #8A9CAE;
  --green:     #4A9B7F;
  --red:       #C85A54;
  --border:    #DDD9D1;
  --border-d:  rgba(255,255,255,.07);
  --border-d2: rgba(255,255,255,.12);
--purple-dark:    #7a6aa0;
--text-light:     #7A8C9E;   /* lighter body text, light pages */
--clr-light-faint:#9aacbb;   /* faint text on light pages */
--clr-light-page: #F4F4F2;   /* light page background */
--clr-border-gold: rgba(190,176,118,0.25); /* mid-weight gold border */

  /* ── Typography ── */
  --ff-d: 'Cormorant Garamond', serif;
  --ff-b: 'DM Sans', sans-serif;

  /* ── Radii ── */
  --r:    14px;
  --r-sm:  8px;
  --r-lg: 20px;

  /* ── Shadows ── */
  --shadow:      0 2px 16px rgba(0,0,0,.07);
  --shadow-md:   0 4px 24px rgba(0,0,0,.10);
  --shadow-gold: 0 8px 32px rgba(190,176,118,.22);
  --shadow-glow: 0 0 40px rgba(190,176,118,.18);

}