/* ============================================
   ANAHATA — Design Tokens
   --------------------------------------------
   Central source of truth for colors, typography,
   spacing, shadows. Change values here and they
   propagate across every page.
   ============================================ */

:root {
  /* ---- Color: Sage scale (primary brand) ---- */
  --sage-50:  #f5f6ee;
  --sage-100: #ecefe0;
  --sage-200: #d8dec4;
  --sage-300: #b9c39a;
  --sage-400: #94a370;
  --sage-500: #6f8049;
  --sage-600: #556334;
  --sage-700: #404a27;
  --sage-800: #2c331b;

  /* ---- Color: Cream / paper backgrounds ---- */
  --cream:    #faf8f1;
  --cream-2:  #f3eee2;

  /* ---- Color: Ink / text ---- */
  --ink:      #2a2e22;
  --ink-soft: #555a47;
  --ink-mute: #8a8e7a;

  /* ---- Color: Accent (warm clay) ---- */
  --accent:   #c0894a;
  --accent-2: #a86d2e;

  /* ---- Shadows ---- */
  --shadow-soft:  0 30px 80px -40px rgba(64, 74, 39, 0.35);
  --shadow-card:  0 8px 24px -8px rgba(64, 74, 39, 0.15);
  --shadow-hover: 0 20px 50px -20px rgba(64, 74, 39, 0.25);

  /* ---- Typography ---- */
  --font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-hand:  'Caveat', cursive;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: 32px;

  /* ---- Easing ---- */
  --ease-out:  cubic-bezier(.2, .8, .2, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ---- Mobile container padding ---- */
@media (max-width: 580px) {
  :root {
    --container-pad: 22px;
  }
}