/*
 * RED VECINAL — Design tokens (fuente única de verdad de colores, tipografía y espaciado).
 *
 * Reglas:
 *  - Ningún otro archivo CSS, template o JS define colores hexadecimales: siempre var(--rv-*).
 *  - Cada par texto/fondo usado en la interfaz está verificado contra WCAG 2.2 AA
 *    (texto ≥ 4.5:1, texto grande y elementos gráficos ≥ 3:1).
 *  - Si cambias o agregas un color, ejecuta:
 *      python3 .claude/skills/redvecinal-ui/check_contrast.py
 *    y documenta el uso en .claude/skills/redvecinal-ui/SKILL.md.
 */

:root {
  /* ── Marca ─────────────────────────────────────────────────────────── */
  --rv-navy: #1B2A4A;            /* Azul profundo. Texto principal, sidebar, encabezados. 14.22:1 sobre blanco */
  --rv-navy-700: #24365E;        /* Hover sobre navy (sidebar). Texto blanco 11.90:1 */
  --rv-navy-600: #2A3D66;        /* Ítem activo del sidebar. Texto blanco 10.73:1 */
  --rv-blue: #2D6FF2;            /* Azul tecnológico de marca. SOLO decorativo/gráfico (≥3:1), nunca texto sobre gris */
  --rv-blue-strong: #1A56C9;     /* Azul para texto, enlaces y botones primarios. 6.52:1 sobre blanco */
  --rv-blue-hover: #154AAE;      /* Hover de botón primario. 8.01:1 */
  --rv-blue-active: #123F96;     /* Activo/presionado. 9.65:1 */
  --rv-blue-subtle: #EAF1FE;     /* Fondo informativo / selección. Texto navy 12.54:1, texto blue-strong 5.75:1 */
  --rv-green: #17B890;           /* Verde de marca. SOLO acentos y fondos con texto navy (5.62:1). Nunca texto blanco encima (2.53:1) */
  --rv-green-strong: #0B6E56;    /* Verde para texto y botones con texto blanco. 6.21:1 */
  --rv-green-hover: #095C48;     /* Hover de botón verde. 7.97:1 */
  --rv-green-subtle: #E7F6F1;    /* Fondo de éxito. Texto green-strong 5.58:1 */

  /* ── Neutros ───────────────────────────────────────────────────────── */
  --rv-white: #FFFFFF;
  --rv-canvas: #F4F6F8;          /* Fondo general de la aplicación */
  --rv-surface: #FFFFFF;         /* Tarjetas, formularios, tablas */
  --rv-text: #1B2A4A;            /* = navy */
  --rv-text-secondary: #4A5260;  /* 7.87:1 blanco · 7.27:1 canvas */
  --rv-text-muted: #5B6472;      /* Ayudas y metadatos. 5.98:1 blanco · 5.52:1 canvas. No usar más claro */
  --rv-border: #D5DAE1;          /* Separadores decorativos (no transmiten información) */
  --rv-border-strong: #6B7585;   /* Bordes de campos de formulario y controles. 4.66:1 (WCAG 1.4.11 exige ≥3:1) */
  --rv-gray-subtle: #EEF0F3;     /* Fondo de estados neutros. Texto secondary 6.90:1 */
  --rv-sidebar-text: #FFFFFF;    /* Sobre navy 14.22:1 */
  --rv-sidebar-text-muted: #C3CDE0; /* Sobre navy 8.89:1 */

  /* ── Semánticos (siempre con ícono + texto, nunca solo color) ──────── */
  --rv-success: #0B6E56;   --rv-success-bg: #E7F6F1;   /* 5.58:1 */
  --rv-info: #1A56C9;      --rv-info-bg: #EAF1FE;      /* 5.75:1 */
  --rv-warning: #8A4B00;   --rv-warning-bg: #FFF6E5;   /* 6.34:1 */
  --rv-warning-accent: #F5A524;                        /* Borde/ícono decorativo; texto navy encima 6.97:1 */
  --rv-danger: #B42318;    --rv-danger-bg: #FEF3F2;    /* 6.05:1 · botón con texto blanco 6.57:1 */
  --rv-danger-hover: #912018;                          /* 8.66:1 */

  /* ── Foco (WCAG 2.4.7 / 2.4.13) ────────────────────────────────────── */
  --rv-focus: #1A56C9;           /* Anillo sobre fondos claros */
  --rv-focus-on-dark: #6FA0FF;   /* Anillo sobre navy. 5.52:1 */
  --rv-focus-ring: 0 0 0 3px var(--rv-white), 0 0 0 6px var(--rv-focus);

  /* ── Gráficos y capas del mapa (≥3:1 sobre blanco, distinguibles; acompañar con patrón/etiqueta) ── */
  --rv-chart-1: #1A56C9;   /* azul    6.52 */
  --rv-chart-2: #0B6E56;   /* verde   6.21 */
  --rv-chart-3: #B54708;   /* naranja 5.43 */
  --rv-chart-4: #6941C6;   /* morado  6.62 */
  --rv-chart-5: #C11574;   /* magenta 5.79 */
  --rv-chart-6: #1B2A4A;   /* navy   14.22 */

  /* ── Tipografía ────────────────────────────────────────────────────── */
  --rv-font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rv-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rv-text-sm: 1rem;        /* 16px — mínimo absoluto (metadatos, pies) */
  --rv-text-base: 1.125rem;  /* 18px — cuerpo */
  --rv-text-lg: 1.25rem;     /* 20px — texto destacado, botones grandes */
  --rv-text-xl: 1.5rem;      /* 24px — h3 */
  --rv-text-2xl: 1.875rem;   /* 30px — h2 */
  --rv-text-3xl: 2.25rem;    /* 36px — h1 de aplicación */
  --rv-text-4xl: 3rem;       /* 48px — hero (clamp en landing) */
  --rv-leading: 1.6;
  --rv-leading-tight: 1.25;
  --rv-measure: 70ch;        /* Ancho máximo de párrafos */

  /* ── Espaciado (grilla de 4px) ─────────────────────────────────────── */
  --rv-space-1: 0.25rem;  --rv-space-2: 0.5rem;  --rv-space-3: 0.75rem;  --rv-space-4: 1rem;
  --rv-space-5: 1.5rem;   --rv-space-6: 2rem;    --rv-space-7: 3rem;     --rv-space-8: 4rem;

  /* ── Forma y profundidad ───────────────────────────────────────────── */
  --rv-radius-sm: 8px;
  --rv-radius: 12px;
  --rv-radius-lg: 16px;
  --rv-radius-pill: 999px;
  --rv-shadow-sm: 0 1px 2px rgba(27, 42, 74, 0.06), 0 1px 3px rgba(27, 42, 74, 0.10);
  --rv-shadow: 0 4px 12px rgba(27, 42, 74, 0.08), 0 2px 4px rgba(27, 42, 74, 0.06);
  --rv-shadow-lg: 0 12px 32px rgba(27, 42, 74, 0.12);

  /* ── Controles ─────────────────────────────────────────────────────── */
  --rv-control-height: 3rem;       /* 48px: botones */
  --rv-input-height: 3.25rem;      /* 52px: campos */
  --rv-touch-target: 3rem;         /* 48px: cualquier elemento interactivo */
  --rv-sidebar-width: 17.5rem;     /* 280px */
  --rv-bottom-nav-height: 4.5rem;  /* 72px */

  /* ── Movimiento ────────────────────────────────────────────────────── */
  --rv-transition: 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root { --rv-transition: 0ms; }
}