/* ============================================================
   VARIABLES.CSS — In Full Effect
   Color palette, typography tokens, spacing, transitions.
   Edit this file to restyle the entire site.
   ============================================================ */

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

:root {
  /* ── Palette ─────────────────────────────────────────── */
  --bg:           #F5F0E8;   /* Warm off-white — breathing room */
  --bg-dark:      #EDEAE0;   /* Slightly deeper off-white */
  --charcoal:     #1E1E1A;   /* Primary text + dark backgrounds */
  --sienna:       #C4541A;   /* Accent / punch — CTAs, highlights */
  --sienna-dark:  #a84614;   /* Sienna hover state */
  --green:        #3D5C4A;   /* Secondary accent — grounded */
  --stone:        #9A8F80;   /* Muted text, labels, meta */
  --stone-light:  #D4CFC7;   /* Borders, dividers */
  --white:        #FFFFFF;

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── Spacing scale ───────────────────────────────────── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   6rem;

  /* ── UI ──────────────────────────────────────────────── */
  --radius:     4px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm:  0 4px 20px rgba(30, 30, 26, 0.08);
  --shadow-md:  0 12px 48px rgba(30, 30, 26, 0.12);
  --shadow-lg:  0 24px 80px rgba(30, 30, 26, 0.14);
}