/* =========================================================
   PUSHPANJALI VILLA — DESIGN TOKENS
   Single source of truth for the entire site.
   Every other CSS file reads from here. Nothing here is
   page-specific — if a page needs a one-off color, that's
   a sign it belongs in this file, not inline.
   ========================================================= */

:root{
  /* ---- Color ---- */
  --bg:            #FAF8F4;
  --card:          #FFFFFF;
  --gold:          #C8A96A;
  --gold-dark:     #A9884F;
  --gold-light:    #E4D4B0;
  --ink:           #171310;   /* the dark sections / footer */
  --text:          #1A1A1A;
  --text-soft:     #6E6E6E;
  --border:        #ECE8E1;
  --white:         #FFFFFF;
  --overlay-dark:  rgba(20,16,10,0.55);

  /* ---- Type ---- */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;

  --fs-h1: 4.2rem;
  --fs-h2: 2.6rem;
  --fs-h3: 1.5rem;
  --fs-body: 1rem;
  --fs-small: .85rem;
  --fs-eyebrow: .75rem;

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 100px;

  /* ---- Radius / shadow ---- */
  --radius: 2px;
  --shadow-card: 0 20px 45px rgba(26,26,26,.08);
  --shadow-btn: 0 10px 24px rgba(200,169,106,.25);

  /* ---- Motion ---- */
  --ease-luxury: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .3s;
  --dur-med: .6s;
  --dur-slow: .9s;

  /* ---- Breakpoints (reference only — used in responsive.css) ---- */
  --bp-xs: 320px;
  --bp-sm: 375px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
}