/* ══════════════════════════════════════════════════════
   variables.css — Design tokens & custom properties
   ══════════════════════════════════════════════════════ */

:root {
  /* ── Colores de marca ── */
  --color-green-dark:   #1a5c3a;
  --color-green-mid:    #236b44;
  --color-green-bright: #2d8653;
  --color-green-light:  #e8f5ed;
  --color-gold:         #ffd45e;

  /* ── Grises / neutros ── */
  --color-bg:           #f0f0ef;
  --color-bg-off:       #fafaf8;
  --color-white:        #ffffff;
  --color-gray-dark:    #333333;
  --color-gray-mid:     #666666;
  --color-black-ui:     #111111;

  /* ── Tipografías ── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-heading:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:     'Barlow', 'Helvetica Neue', Arial, sans-serif;

  /* ── Espaciado ── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* ── Transiciones ── */
  --transition-fast:   0.5s ease;
  --transition-normal: 0.7s ease;
  --transition-slow:   1.0s ease;

  /* ── Navbar ── */
  --navbar-height: 72px;

  /* ── Sombras ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.12);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.18);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.25);

  /* ── Border radius ── */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-full: 9999px;

  /* ── Z-index layers ── */
  --z-float:   900;
  --z-navbar:  1000;
  --z-modal:   2000;
}