/*
 * ================================================================
 *  Aanra Theme — tokens.css
 *  ALL brand values live here as CSS custom properties.
 *
 *  EASY REBRAND GUIDE
 *  ──────────────────
 *  TO CHANGE BRAND COLORS  → edit --brand-dark, --brand-gold, etc.
 *  TO SWAP LOGO            → edit --logo-dark-bg, --logo-light-bg
 *  TO CHANGE FONTS         → edit --font-display, --font-body
 *
 *  These defaults are overridden at runtime by the inline <style>
 *  block output from the "Aanra Settings" ACF Options page in
 *  WordPress admin — change a color picker there and it updates
 *  everywhere instantly with zero code changes.
 * ================================================================
 */

:root {
  /* ── Brand Colors ─────────────────────────────────────────── */
  --brand-dark:          #3A1E17;
  --brand-gold:          #E5C37A;   /* UI gold — buttons, highlights */
  --brand-gold-rgb:      229, 195, 122;  /* rgb channels of --brand-gold, for rgba() use */
  --brand-gold-light:    #F2D79C;   /* lighter gold (was wrongly #B8920A) */
  --brand-accent:        #946E1F;   /* deep antique gold — headings, accents, primary surfaces */
  --brand-accent-rgb:    148, 110, 31;  /* rgb channels of --brand-accent, for rgba() use */
  --brand-ivory:         #FAF5E2;   /* page background */
  --brand-white:         #FFFFFF;
  --brand-gold-muted:    rgba(229, 195, 122, 0.55);
  --brand-gold-border:   rgba(229, 195, 122, 0.2);
  --brand-overlay-hero:  rgba(20, 5, 0, 0.55);
  --brand-text-body:     rgba(148, 110, 31, 0.65);

  /* ── Accent / Utility ─────────────────────────────────────── */
  --brand-price:      #B8820A;   /* product sale price */
  --brand-price-orig: #aaaaaa;   /* struck-through original price */
  --brand-subtext:    #999999;   /* light grey subtext */
  --brand-email-sub:  #5C3D2E;   /* email section body copy */
  --brand-whatsapp:   #25D366;   /* WhatsApp green */

  /* ── Logo ─────────────────────────────────────────────────── */
  /* Update these paths to swap the logo everywhere at once      */
  --logo-dark-bg:        none;
  --logo-light-bg:       none;
  --logo-height-desktop: 44px;
  --logo-height-mobile:  36px;

  /* ── Typography ───────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;

  /* ── Sizing & Spacing ─────────────────────────────────────── */
  --header-height-desktop:   64px;
  --header-height-mobile:    52px;
  --announcement-height:     25px;
  --header-offset-desktop:     calc(var(--announcement-height) + var(--header-height-desktop));
  --header-offset-mobile:     calc(var(--announcement-height) + var(--header-height-mobile));
  --section-padding-desktop: 64px 60px;
  --section-padding-mobile:  40px 20px;
  --max-content-width:       1200px;
}