/*
  DESIGN TOKENS — "Ningún Animal Atrás"
  ---------------------------------------------------------------------------
  Estas variables son la fuente única de verdad del sistema visual.
  Mapean 1:1 a lo que en la Fase 2 será el JSON de Theme/config del plugin
  CakePHP (paleta, tipografías, radios, espaciados) — no cambiar nombres
  sin actualizar esa correspondencia.

  Paleta extraída por muestreo directo del logotipo oficial:
  azul dominante #03298C. El resto de la paleta se construye alrededor de
  ese azul con un acento cálido reservado EXCLUSIVAMENTE para llamadas a
  la acción (firma, donar), para que nunca compita visualmente con nada más.
*/

:root {
  /* ---- Color: marca ---- */
  --color-blue-900: #041F66;
  --color-blue-800: #03298C;   /* azul de marca (logo) */
  --color-blue-700: #0A3AB4;
  --color-blue-600: #1449D6;
  --color-blue-100: #E7ECFB;
  --color-blue-50:  #F3F5FD;

  /* ---- Color: acento CTA (cálido, alto contraste, uso restringido) ---- */
  --color-accent-600: #FF4A23;
  --color-accent-700: #E23A17;
  --color-accent-100: #FFE4DB;

  /* ---- Color: neutros ---- */
  --color-ink-900: #0B0C10;
  --color-ink-700: #33353D;
  --color-ink-500: #676A75;
  --color-ink-300: #B7B9C2;
  --color-paper-0: #FFFFFF;
  --color-paper-50: #F7F7F9;
  --color-paper-100: #EDEEF2;

  /* ---- Color: estado ---- */
  --color-success: #1E8E5A;
  --color-error: #D6304A;

  /* ---- Superficies semánticas (para alternar ritmo claro/oscuro/azul) ---- */
  --surface-light-bg: var(--color-paper-0);
  --surface-light-fg: var(--color-ink-900);
  --surface-dark-bg: var(--color-ink-900);
  --surface-dark-fg: var(--color-paper-0);
  --surface-blue-bg: var(--color-blue-800);
  --surface-blue-fg: var(--color-paper-0);
  --surface-tint-bg: var(--color-blue-50);
  --surface-tint-fg: var(--color-ink-900);

  /* ---- Tipografía ----
     Anton SC no incluye una variante itálica real en Google Fonts (solo
     Regular 400). Para lograr el efecto "cursiva de impacto deportivo" que
     pedía el usuario, los titulares se inclinan con transform: skewX() en
     lugar de font-style — además refuerza el motivo de líneas diagonales
     del logo. Ver --skew-display más abajo y su uso en styles.css. */
  --font-display: 'Anton SC', 'Anton', 'Archivo Black', 'Barlow Condensed', Impact, sans-serif;
  --font-body: 'League Spartan', 'Inter', 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  --skew-display: skewX(-8deg);

  --fs-display-xl: clamp(3.15rem, 4.6vw + 1.7rem, 7.35rem);
  --fs-display-l:  clamp(2.4rem, 3.35vw + 1.15rem, 4.6rem);
  --fs-display-m:  clamp(1.85rem, 2.3vw + 0.95rem, 3rem);
  --fs-display-s:  clamp(1.4rem, 1.15vw + 1.05rem, 1.85rem);
  --fs-body-l: 1.125rem;
  --fs-body-m: 1rem;
  --fs-body-s: 0.875rem;
  --fs-eyebrow: 0.8rem;

  --lh-display: 0.98;
  --lh-body: 1.55;

  --ls-display: 0.01em;
  --ls-eyebrow: 0.18em;

  /* ---- Espaciado (escala 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Bordes / radios ---- */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 20px;
  --border-thick: 3px;

  /* ---- Motivo diagonal (velocidad, tomado del logo) ---- */
  --diag-angle: -6deg;
  --diag-clip-hero: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  --diag-clip-card: polygon(0 6%, 100% 0, 100% 100%, 0 94%);
  --diag-clip-tag: polygon(6% 0, 100% 0, 94% 100%, 0 100%);

  /* ---- Sombra: una sola, con propósito (elevar el módulo de firma) ---- */
  --shadow-raised: 0 24px 60px -24px rgba(3, 41, 140, 0.35);
  --shadow-soft: 0 8px 24px -12px rgba(11, 12, 16, 0.18);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  /* ---- Foco accesible ---- */
  --focus-ring: 3px solid var(--color-accent-600);
  --focus-offset: 3px;

  /* ---- Header / logo ---- */
  --header-height-top: 84px;      /* barra transparente al inicio de página */
  --header-height-scrolled: 108px; /* pastilla blanca, más alta, al hacer scroll */
  --hero-logo-w: clamp(150px, 24vw, 380px);
}