/* ============================================================
   AHCD — Design Tokens
   Fuente única de verdad para colores, spacing, tipografía y
   demás variables del sistema de diseño.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Colores
     ---------------------------------------------------------- */
  --c-red:        #C62828;   /* Decisión / CTAs críticos */
  --c-red-hover:  #B71C1C;
  --c-blue:       #1E3A5F;   /* Institucional / titulares */
  --c-blue-2:     #2C5282;   /* Navegación / links */
  --c-text:       #4A4A4A;   /* Cuerpo de texto */
  --c-bg:         #F5F5F5;   /* Fondo general */
  --c-line:       #BDBDBD;   /* Bordes y separadores */
  --c-white:      #FFFFFF;

  /* ----------------------------------------------------------
     Spacing (escala 4px)
     ---------------------------------------------------------- */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;

  /* ----------------------------------------------------------
     Tipografía — mobile first
     ---------------------------------------------------------- */
  --text-xs:   0.875rem;   /* 14px */
  --text-sm:   1rem;       /* 16px */
  --text-base: 1.125rem;   /* 18px */
  --text-md:   1.375rem;   /* 22px */
  --text-lg:   1.75rem;    /* 28px */
  --text-xl:   2.25rem;    /* 36px */
  --text-2xl:  3rem;       /* 48px */

  --font-family-head: 'Lato', sans-serif;
  --font-family-ui:   'Lato', sans-serif;
  --font-family-body: 'Merriweather', Georgia, serif;

  --font-system:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;

  --line-height-base:  1.65;
  --line-height-tight: 1.2;
  --line-height-loose: 1.8;

  /* ----------------------------------------------------------
     Border radius
     ---------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* ----------------------------------------------------------
     Sombras
     ---------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ----------------------------------------------------------
     Transiciones
     ---------------------------------------------------------- */
  --transition:      200ms ease;
  --transition-slow: 350ms ease;

  /* ----------------------------------------------------------
     Touch targets (accesibilidad)
     ---------------------------------------------------------- */
  --touch-min: 44px;

  /* ----------------------------------------------------------
     Z-index
     ---------------------------------------------------------- */
  --z-header:  100;
  --z-modal:   200;
  --z-tooltip: 300;

  /*
     Breakpoints de referencia (usar en @media, no con var()):
     --bp-tablet:  768px
     --bp-desktop: 1100px
  */
}