/* ============================================================
   tokens.css — Fundación 20 de Enero · Corazón Sabanero
   Design tokens: la única fuente de verdad del sistema visual.
   Para cambiar cualquier aspecto del diseño: editar AQUÍ.
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Work+Sans:ital,wght@0,300..700;1,300..700&display=swap');

:root {

  /* ── PALETA (extraída fielmente del logo) ─────────────── */
  --color-rojo:         #7A1424;
  --color-rojo-oscuro:  #5C0E1B;
  --color-dorado:       #C8941F;
  --color-dorado-claro: #E0B33D;
  --color-verde:        #1F4D2C;
  --color-verde-oscuro: #15351E;
  --color-crema:        #FAF6EE;
  --color-beige:        #F0E6D2;
  --color-tierra:       #2A1810;
  --color-tierra-suave: #5A4636;
  --color-blanco:       #FFFFFF;

  /* ── Aliases semánticos (evitar usar valores raw en componentes) ── */
  --c-brand-primary:    var(--color-rojo);
  --c-brand-accent:     var(--color-dorado);
  --c-brand-secondary:  var(--color-verde);
  --c-surface:          var(--color-crema);
  --c-surface-alt:      var(--color-beige);
  --c-text-primary:     var(--color-tierra);
  --c-text-secondary:   var(--color-tierra-suave);
  --c-text-inverse:     var(--color-crema);
  --c-border:           rgba(122, 20, 36, 0.12);
  --c-border-card:      rgba(122, 20, 36, 0.07);

  /* ── TIPOGRAFÍA ───────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Work Sans', system-ui, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  /* ── ESPACIADO (escala base 4px) ──────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-22: 5.5rem;    /* 88px */

  /* ── LAYOUT ───────────────────────────────────────────── */
  --max-width:        1180px;
  --container-px:     28px;
  --container-px-sm:  20px;
  --header-height:    80px;
  --header-height-sm: 64px;

  /* ── BORDES ───────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── SOMBRAS ──────────────────────────────────────────── */
  --shadow-soft: 0 4px 24px rgba(42, 24, 16, 0.08);
  --shadow-card: 0 8px 30px rgba(42, 24, 16, 0.12);
  --shadow-lg:   0 20px 60px rgba(0, 0, 0, 0.18);

  /* ── TRANSICIONES ─────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Z-INDEX (escala controlada) ──────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-nav:      99;
  --z-header:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}