/* ================================================
   VARIABLES — DESIGN TOKENS
   ================================================ */
:root {
  /* ── Colores ─────────────────────────────────── */
  --clr-bg:           #F4EFE9;
  --clr-bg-warm:      #FAF6F1;
  --clr-bg-card:      #ffffff;

  --clr-green-dark:   #1A2E28;
  --clr-green:        #2F4F46;
  --clr-green-mid:    #1E3830;
  --clr-brand-dark:   #1A0F08;

  --clr-gold:         #A8863E;
  --clr-gold-dark:    #8C6A28;
  --clr-gold-mid:     #C6A46A;
  --clr-gold-pale:    #E8C97A;

  --clr-text:         #5C5C5C;
  --clr-text-muted:   #888888;
  --clr-error:        #C0392B;

  /* ── Tipografía ──────────────────────────────── */
  --font-sans:        "Inter", sans-serif;
  --font-serif:       "Playfair Display", serif;
  --font-italic:      "Cormorant Garamond", serif;

  /* ── Layout ──────────────────────────────────── */
  --container-max:    1100px;
  --header-max:       1200px;

  /* ── Radios ──────────────────────────────────── */
  --radius-sm:        8px;
  --radius-md:        16px;
  --radius-lg:        20px;
  --radius-xl:        24px;
  --radius-btn:       30px;

  /* ── Sombras ─────────────────────────────────── */
  --shadow-card:      0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-hover:     0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-soft:      0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-soft-hover:0 12px 32px rgba(0, 0, 0, 0.10);

  /* ── Transiciones ────────────────────────────── */
  --transition-fast:  0.2s ease;
  --transition-base:  0.3s ease;
  --transition-slow:  0.4s ease;
}