/* ============================================================
   Aurelia Beauty — Shared brand palette (Malina 2 · "Crème d'Or")
   Single source of truth for the marketing/auth surfaces:
   landing.html, signup.html, login.html (each previously carried
   its own drifting copy of these variables).
   Warm creamy canvas, elegant gold accents, soft charcoal-brown
   ink. Serif display (Playfair) + Inter UI sans.
   The app SPA keeps its richer css/tokens.css (light/dark themes);
   these marketing pages are intentionally light-only.
   Variables only — no element styles, so linking this file can
   never change layout or typography by itself.
   ============================================================ */
:root {
  /* Surfaces — warm cream canvas, white cards for depth */
  --bg-base:        #FAF8F5;   /* page background — creamy off-white */
  --bg-elev-1:      #FFFFFF;   /* cards, sticky chrome */
  --bg-elev-2:      #FFFEFB;   /* form cards (hint of warmth) */
  --bg-elev-3:      #F5F0E6;   /* input fill — subtle cream */
  --bg-inset:       #F1EBDF;   /* recessed wells */

  /* Borders — warm-tinted, never harsh gray */
  --border-strong:  rgba(66, 55, 32, 0.26);
  --border:         rgba(66, 55, 32, 0.13);
  --border-soft:    rgba(66, 55, 32, 0.08);
  --divider:        rgba(66, 55, 32, 0.08);

  /* Gold ramp — elegant, slightly antiqued */
  --gold-50:        #FAF4E3;
  --gold-100:       #F1E6C8;
  --gold-200:       #E3CD92;
  --gold-300:       #C5A059;   /* PRIMARY CTA gold */
  --gold-400:       #B08D45;   /* hover — deepens */
  --gold-500:       #96742F;   /* pressed */
  --gold-600:       #7A5D22;

  /* Accent roles */
  --accent:         var(--gold-300);
  --accent-hover:   var(--gold-400);  /* hover deepens, never washes out */
  --accent-press:   var(--gold-500);
  --accent-strong:  #8A6B25;   /* text-safe gold on cream (≥4.5:1) */
  --accent-ink:     #2B2110;   /* text on gold buttons */
  --accent-tint:    rgba(197, 160, 89, 0.10);
  --accent-tint-2:  rgba(197, 160, 89, 0.18);
  --accent-border:  rgba(212, 175, 55, 0.30);

  /* Text — soft charcoal-brown, never pure black */
  --fg:             #2C2A26;
  --fg-strong:      #201E1A;
  --fg-muted:       #6D675C;
  --fg-dim:         #78705F;   /* ≥4.5:1 on cream surfaces */

  /* Status */
  --danger:         #B4524B;
  --danger-tint:    rgba(180, 82, 75, 0.10);
  --success:        #3F7D5C;

  /* Decorative accents — muted botanicals for the light canvas */
  --rose:           #A8624E;
  --teal:           #3E7266;

  /* Type */
  --font-display:   'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:      'Inter', -apple-system, sans-serif;

  /* Radii — intentional, not pill-everything */
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      14px;
  --radius-xl:      18px;
  --radius-2xl:     22px;
  --radius-btn:     12px;      /* buttons: smooth, grounded rectangles */
  --radius-pill:    999px;     /* reserved for chips/badges/status dots */

  /* Shadows — soft, diffused, multi-layered with warm gold cast */
  --shadow-sm:      0 1px 2px rgba(76, 60, 28, 0.05),
                    0 2px 4px -1px rgba(197, 160, 89, 0.08);
  --shadow-md:      0 4px 6px -1px rgba(197, 160, 89, 0.10),
                    0 2px 4px -1px rgba(197, 160, 89, 0.06),
                    0 12px 28px -12px rgba(76, 60, 28, 0.12);
  --shadow-lg:      0 4px 8px -2px rgba(197, 160, 89, 0.10),
                    0 12px 24px -6px rgba(76, 60, 28, 0.08),
                    0 32px 64px -24px rgba(76, 60, 28, 0.16);
  --ring-focus:     0 0 0 2px var(--bg-base), 0 0 0 4px var(--gold-300);

  /* Motion */
  --dur-fast:       120ms;
  --dur-med:        240ms;
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
}