/* Joco González — Color tokens
   Rule: máximo 3 colores por pieza. Nunca los 5 juntos. */

:root {
  /* ---- Brand palette (base) ---- */
  --navy:  #001141; /* fondo dominante */
  --lime:  #D1FF17; /* acento primario: titulares, badges, CTAs */
  --blue:  #1F2DD9; /* acento secundario: badges, bloques */
  --coral: #FD403C; /* urgencia / CTA — máx 20% de la pieza */
  --peach: #FFD9E0; /* acento suave — uso mínimo */

  --white: #FFFFFF;
  --black: #000000;

  /* ---- Tints / shades (para bloques y estados) ---- */
  --navy-900: #000B2B;
  --navy-800: #001141;
  --navy-700: #0A1E5C;
  --lime-600: #B8E000; /* hover/press del lime */
  --blue-700: #1824B0; /* hover/press del blue */
  --coral-700: #D62C29; /* hover/press del coral */

  /* ---- Semantic surfaces ---- */
  --surface-dominant: var(--navy);   /* fondo por defecto */
  --surface-light:    var(--white);  /* fondo institucional / patrón C */
  --surface-block-primary:   var(--lime);
  --surface-block-secondary: var(--blue);
  --surface-block-alert:     var(--coral);
  --surface-block-soft:      var(--peach);

  /* ---- Semantic text ---- */
  --text-on-dark:  var(--white);  /* sobre navy / blue */
  --text-accent-on-dark: var(--lime);
  --text-on-light: var(--navy);   /* sobre white / peach / lime */
  --text-on-lime:  var(--navy);
  --text-on-peach: var(--navy);
  --text-on-coral: var(--white);

  /* ---- CTA ---- */
  --cta-bg:   var(--coral);
  --cta-text: var(--white);
  --cta-bg-primary: var(--lime);
  --cta-text-primary: var(--navy);
}