/* ============================================================
   💧 TOKENS — Paleta Abanilla (navy + negro slate)
   Navy oscuro + slate-900 como primario + blanco dominante.
   Uso: rgb(var(--tok-primary))  /  rgb(var(--tok-primary) / 0.5)
   ============================================================ */

:root {

  /* ── Fondos — blanco dominante ──────────────────────────── */
  --tok-bg-page:            255 255 255;   /* blanco puro                 */
  --tok-bg-surface:         255 255 255;   /* blanco puro · superficie    */
  --tok-bg-white:           255 255 255;   /* blanco puro · inputs        */
  --tok-bg-hover:           241 245 249;   /* slate-100 hover             */
  --tok-bg-selected:        226 232 240;   /* slate-200 item seleccionado */

  /* ── Bordes ──────────────────────────────────────────────── */
  --tok-border:             226 232 240;   /* slate-200 neutro            */
  --tok-border-input:       203 213 225;   /* slate-300                   */
  --tok-border-btn:         203 213 225;   /* slate-300 neutro            */
  --tok-border-notif:       203 213 225;   /* slate-300 neutro            */
  --tok-border-danger:      240 186 170;   /* borde peligro               */

  /* ── Fondo oscuro (secciones dark tipo Servicios) ────────── */
  --tok-dark:               26  52  88;   /* #1A3458 navy — solo para secciones dark */
  --tok-dark-subtle:        180 205 235;   /* navy-soft luminoso sobre navy */
  --tok-dark-footer-text:   200 225 255;   /* azul claro sobre navy        */

  /* ── Tipografía ──────────────────────────────────────────── */
  --tok-text-dark:          26  45  74;   /* navy oscuro                 */
  --tok-text-base:          45  60  80;   /* navy base                   */
  --tok-text-muted:         100 116 139;  /* slate-500                   */
  --tok-text-label:         71  85  105;  /* slate-600 — etiquetas       */
  --tok-text-on-dark:       220 232 245;  /* azul muy claro sobre navy   */
  --tok-text-highlight:     15  23  42;   /* slate-900 — énfasis         */

  /* ── Primario — slate-900 near-black ──────────────────────── */
  --tok-primary:            15  23  42;   /* #0F172A · slate-900          */
  --tok-primary-hover:      30  41  59;   /* #1E293B · slate-800          */
  --tok-primary-end:        2   6   23;   /* slate-950 muy oscuro         */
  --tok-primary-text:       255 255 255;  /* texto sobre primario         */
  --tok-primary-soft:       148 163 184;  /* slate-400 suave              */
  --tok-primary-xsoft:      203 213 225;  /* slate-300 muy suave          */
  --tok-primary-medium:     100 116 139;  /* slate-500 medio              */
  --tok-primary-blob:       241 245 249;  /* slate-100 fondo              */

  /* ── Navy — texto headings, dark sections, dots timeline ──── */
  --tok-navy:               26  52  88;   /* #1A3458                      */
  --tok-navy-dark:          14  34  66;   /* #0E2242                      */
  --tok-navy-soft:          180 205 235;  /* navy suave                   */
  --tok-navy-xsoft:         220 232 245;  /* navy ultra suave             */

  /* ── Alias verde (compatibilidad — iconos semánticos GIS etc) */
  --tok-accent-green:       22  163 74;
  --tok-accent-green-hover: 21  128 61;
  --tok-accent-green-soft:  134 239 172;
  --tok-accent-green-xsoft: 187 247 208;
  --tok-accent-green-bg:    220 252 231;

  /* ── Secundario — navy medio (elementos UI intermedios) ──── */
  --tok-secondary-bg:       220 232 245;
  --tok-secondary-hover:    200 218 238;
  --tok-secondary-text:     26  52  88;

  /* ── Éxito ───────────────────────────────────────────────── */
  --tok-success:            34  197 94;
  --tok-success-bg:         220 252 231;
  --tok-success-text:       20  83  45;
  --tok-success-hover:      187 247 208;

  /* ── Proceso / Advertencia ───────────────────────────────── */
  --tok-warning-bg:         254 243 199;
  --tok-warning-text:       146 64  14;

  /* ── Peligro ─────────────────────────────────────────────── */
  --tok-danger:             220 38  38;
  --tok-danger-bg:          254 226 226;
  --tok-danger-text:        153 27  27;
  --tok-danger-hover:       252 202 202;
  --tok-danger-btn-text:    185 28  28;

  /* ── Botón notificación ──────────────────────────────────── */
  --tok-notif-bg:           241 245 249;  /* slate-100 fondo suave        */
  --tok-notif-hover:        226 232 240;  /* slate-200 hover              */
  --tok-notif-text:         71  85  105;  /* slate-600                    */
  --tok-notif-text-hover:   30  41  59;   /* slate-800                    */

  /* ── Overlay ─────────────────────────────────────────────── */
  --tok-overlay:            0   0   0;

  /* ── Módulos (homepage) ──────────────────────────────────── */
  --tok-module-news:        14  165 233;  /* sky-500 · Noticias           */
  --tok-module-gis:         22  163 74;   /* verde semántico · Visor GIS  */
  --tok-module-amber:       245 158 11;   /* ámbar · Socios / Clima sol   */

  /* ── Clima ───────────────────────────────────────────────── */
  --tok-wx-cloud:           148 163 184;
  --tok-wx-rain:            56  130 200;
  --tok-wx-storm:           14  60  110;

  /* ── Landing (específico) ────────────────────────────────── */
  --tok-landing-hero-text:  220 235 255;  /* azul muy claro sobre navy    */
  --tok-landing-card-bg:    36  70  115;
  --tok-landing-card-border: 58  98  162;
  --tok-landing-overlay:    10  22  44;
  --tok-landing-footer-bg:  14  30  58;

  /* ── Perte footer (específico) ───────────────────────────── */
  --tok-perte-footer-bg:    18  38  68;
  --tok-perte-footer-border: 36  68  115;
  --tok-perte-footer-text:  200 225 255;

  /* ── Acento ámbar (badges secundarios) ───────────────────── */
  --tok-accent:             245 158 11;
  --tok-accent-hover:       217 119 6;
  --tok-accent-soft:        253 230 138;

}