/* =============================================
   SORTEOS FLASH - Design Tokens (fuente única de verdad)
   Ver DESIGN_SYSTEM.md para la explicación completa.
   No declarar tokens de nuevo en otros archivos: solo consumir var(--token).
   Excepción documentada: rifa.html sobreescribe el bloque "modo oscuro"
   en su propio <style>, y THEME_CONFIG (public/js/themes.js) los
   sobreescribe en tiempo de ejecución por rifa — esos nombres están
   congelados y no deben renombrarse.
   ============================================= */

:root {
  /* ── Modo claro: admin, index.html, auth ── */
  --bg-dark: #f8fafc;
  --bg-card: #ffffff;
  --bg-card2: #f1f5f9;
  --border: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --accent-corp: #064e3b;
  --accent: #064e3b;
  --accent-hover: #0b6b52;
  --accent-bg: rgba(6, 78, 59, 0.08);
  --cta: #ea580c;
  --cta-hover: #c2410c;

  /* ── Estados de número/badge (antes incompletos en :root) ── */
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --green-border: #86efac;
  --yellow: #f59e0b;
  --yellow-bg: #fffbeb;
  --yellow-border: #fde68a;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --red-border: #fecaca;

  /* ── Modo oscuro: valores por defecto para rifa.html / THEME_CONFIG ── */
  --primary: #064e3b;
  --primary-dark: #0b6b52;
  --secondary: #f59e0b;
  --bg: #020617;
  --bg-alt: #0e1223;
  --text: #94a3b8;
  --text-bold: #f8fafc;
  --success: #10b981;
  --danger: #dc2626;
  --warning: #f59e0b;
  --shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.12);
  --shadow-neon: 0 0 24px rgba(6, 78, 59, 0.35);

  /* ── Tipografía ── */
  --font-heading: 'Rubik', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --font-main: 'Outfit', sans-serif; /* usado como default por THEME_CONFIG en rifa.html */

  /* ── Forma / movimiento ── */
  --radius: 14px;
  --radius-sm: 10px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Breakpoints (referencia documental; @media no puede usar var()) ── */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}