/* ================================================================
   TOKENS.CSS — Design System Tokens
   Amarantlax · variables, fuentes, paleta, z-index, timing
================================================================ */

/* ── Google Fonts se importa en index.html ──────────────────── */

:root {
  /* Paleta principal */
  --g0:   #07150a;   /* verde oscuro / fondo dark */
  --g1:   #0f2414;
  --g2:   #193d20;
  --gm:   #266b2a;   /* verde medio (brand) */
  --gl:   #3a8f40;
  --gll:  #d4edd6;   /* verde muy claro */
  --gold: #c8930a;   /* dorado */
  --gld:  #e4a80c;
  --gldl: #fdf3d0;
  --cr:   #faf5e8;   /* crema fondo claro */
  --crw:  #ffffff;
  --wa:   #25D366;   /* WhatsApp */
  --wad:  #128C7E;
  --fb:   #1877F2;   /* Facebook */

  /* Tipografía */
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'DM Sans', system-ui, sans-serif;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Espaciado */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2rem;
  --sp-xl:  3rem;
  --sp-2xl: 5rem;
  --sp-3xl: 8rem;

  /* Bordes */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.12);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.08);
  --shadow-lg:  0 10px 40px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.10);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.20);
  --shadow-green: 0 8px 32px rgba(38,107,42,.25);
  --shadow-gold:  0 8px 32px rgba(200,147,10,.30);

  /* Z-index */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* Transiciones */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   600ms;
  --dur-lazy:   900ms;

  /* Layout */
  --max-w: 1260px;
  --nav-h: 72px;
}