/* ================= DESIGN TOKENS =================
 * Fuente unica de verdad para colores, radios, sombras, etc.
 * Cargar este archivo ANTES de los stylesheets especificos de cada pagina.
 * ================================================== */

:root {
  /* ---------- Brand ---------- */
  --color-brand: #0b315d;
  --color-brand-hover: #1b4c85;
  --color-brand-dark: #0b1220;

  /* ---------- Neutros (escala gris) ---------- */
  --color-text: #111;
  --color-text-soft: #222;
  --color-text-muted: #666;
  --color-text-subtle: #999;
  --color-bg: #fff;
  --color-bg-subtle: #fafafa;
  --color-bg-soft: #f5f5f5;
  --color-border: #e9e9e9;
  --color-border-soft: #eee;
  --color-border-strong: #ddd;

  /* ---------- Semanticos ---------- */
  --color-danger: #b00020;
  --color-warning: #ffd700;
  --color-wa: #25d366;
  --color-ig: #e1306c;

  /* ---------- Radios ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* Alias legacy (uso previo en styles.index.css) */
  --radius: var(--radius-xl);

  /* ---------- Sombras ---------- */
  --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.25);

  /* Alias legacy */
  --shadow: var(--shadow-md);

  /* ---------- Tipografia ---------- */
  --font-sans: system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Aliases legacy (mantener compat con styles.index.css) ---------- */
  --bg: var(--color-bg);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --border: var(--color-border);
  --black: var(--color-text);
  --footer: #2f343a;
  --wa: var(--color-wa);
  --ig: var(--color-ig);
  --accent: var(--color-brand);
  --accent-hover: var(--color-brand-hover);
  --header-bg: var(--color-brand-dark);
  --header-text: rgba(255, 255, 255, 0.92);
}