/* ============================================================================
   THEME 1 · "Plum" — aubergine replaces espresso, whole palette lifted a step.
   Hot-swap: load AFTER site.css (last stylesheet). Tokens only; same names.
   Fonts: unchanged (Playfair Display / Montserrat / Lato).
   ============================================================================ */
:root {
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ---- Base palette ---- */
  --porcelain:   #FCF9F6;
  --cream:       #F7EFEA;
  --champagne:   #EDDFD9;
  --blush-nude:  #EAD8D2;
  --marble:      #FFFFFF;

  --gold-antique: #BCA268;
  --gold-leaf:    #D9C08A;
  --gold-deep:    #937C4A;

  --espresso:    #46213D;   /* the plum — everywhere espresso used to be */
  --taupe:       #7D6B77;
  --line:        #EADDDA;

  --gold-gradient: linear-gradient(135deg, #D9C08A 0%, #BCA268 55%, #937C4A 100%);
  --gold-lite:  #F3E6BC;
  --gold-mid:   #E4D2A0;
  --gold-metal: linear-gradient(135deg, #F3E6BC 0%, #E4D2A0 55%, #D9C08A 100%);

  --focus-ring: var(--gold-antique);

  --shadow-xs:  0 1px 2px rgba(56,26,49, 0.05);
  --shadow-sm:  0 2px 8px rgba(56,26,49, 0.06);
  --shadow:     0 8px 24px rgba(56,26,49, 0.08);
  --shadow-lg:  0 18px 48px rgba(56,26,49, 0.10);
  --shadow-gold: 0 6px 20px rgba(188,162,104, 0.16);
  --shadow-metal: 0 12px 32px rgba(188,162,104, 0.26);
  --shadow-metal-lg: 0 26px 60px rgba(188,162,104, 0.24);

  /* ---- Surfaces & remaps ---- */
  --bg-nav: rgba(252,249,246,0.86);
  --bg-band-dark:   #46213D;
  --bg-band-deep:   #38182F;
  --text-band-hi:   #FCF9F6;
  --text-band-title:#F7EFF2;
  --text-band-body: #DECFDA;
  --text-band-muted:#CDB9C6;
  --accent-band:    #D9C08A;
  --border-band:    #BCA268;

  /* Panels on the plum band are LIFTED, not sunk. The espresso scheme sank
     them (a near-black warm brown); against aubergine that same brown reads as
     a hole punched in the band, and it is the wrong hue besides. A step up in
     plum separates the card just as clearly without the weight. */
  --bg-band-panel:   #54294A;
  --text-band-dim:   #CFBCCA;
  --text-band-faint: #B3A0AF;

  --bg-footer:        #3E1C36;
  --bg-footer-deep:   #31142A;
  --text-footer-hi:   #FCF9F6;
  --text-footer-muted:#CDB9C6;
  --text-footer-dim:  #A18C9B;
  --text-footer-faint:#836F7D;
  --text-footer-ghost:#6B5866;
  --accent-footer:    #D9C08A;
  --line-footer:      rgba(255,255,255,0.10);

  --grad-warm-a: #F9F1EE;
  --grad-warm-b: #F0DFE0;

  --text-muted-soft: #A18C9B;   /* light-surface note, lifted off --taupe */

  --glow-rgb:        217,192,138;
  --glow-deep-rgb:   188,162,104;
  --glow-lite-rgb:   243,230,188;
  --glow-warm-rgb:   234,214,224;
  --glow-footer-rgb: 217,192,138;
  --ink-rgb:         56,26,49;
  --taupe-rgb:       125,107,119;
}

/* Hero photo frame (the -3px halo behind the hero image) — keep it whisper
   light rather than full brushed metal.
   Both spellings are needed: the markup ships the compact `inset:-3px`, but
   site.js writes to el.style on that element (reveal/hover animation), and the
   browser then re-serialises the whole attribute with spaces. Matching only
   the compact form silently stops working once the script has run. */
main div[style*="inset:-3px"],
main div[style*="inset: -3px"] { opacity: 0.35; }