/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Digital Expo Site
   La unica fuente de verdad de colores, fuentes y radios.
   Regla: si un valor se repite en dos componentes, vive aqui.
   Si se usa una sola vez en un solo componente, NO es token: va en
   el .razor.css de ese componente.

   Se enlaza PRIMERO en App.razor, antes que app.css y site.css.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Marca ──────────────────────────────────────────────────── */
    --red: #c41230;
    --red-rgb: 196, 18, 48; /* para rgba(var(--red-rgb), .12) */
    --red-dk: #7f0d1e; /* extremo de los degradados */
    --red-hover: #a50f28;
    --ri-dark: #0f172a;
    --ri-navy: #1e1b4b; /* degradados de hero y CTA */
    --ri-footer-bg: #07070c;
    /* ── Texto sobre fondo claro ────────────────────────────────── */
    --ri-text: #111827; /* titulos */
    --ri-body: #374151; /* cuerpo */
    --ri-muted: #6b7280; /* secundario */
    --ri-faint: #9ca3af; /* labels, contadores */
    /* ── Superficies claras ─────────────────────────────────────── */
    --ri-surface: #ffffff;
    --ri-border: #e5e7eb;
    --ri-border-soft: #f1f5f9;
    /* ── Tipografia ───────────────────────────────────────────────
       Hoy el CSS heredado declara "Arial, sans-serif" 32 veces y
       "Georgia, serif" 3. Se dejan igual para no mover el diseno.
       Cuando quieras usar Nunito/Nimbus (ya cargadas en wwwroot/fonts
       pero sin aplicar), se cambia aqui y en ningun otro lado. */
    --ri-font-ui: Arial, sans-serif;
    --ri-font-display: Georgia, serif;
    /* ── Radios ─────────────────────────────────────────────────── */
    --ri-radius-sm: 6px;
    --ri-radius: 8px;
    --ri-radius-lg: 14px;
    --ri-radius-pill: 99px;
    /* ═══════════════════════════════════════════════════════════════
       SECCION DE EVENTOS (tema oscuro)
       Valores reales de la clase .expo-dark del proyecto viejo.
       Se descarto el tema claro, asi que .expo-dark / .expo-light
       ya no existen: los valores se resuelven aqui de una vez.
       ═══════════════════════════════════════════════════════════════ */
    /* ── Superficies oscuras ────────────────────────────────────── */
    --ev-bg: #0a0a0f; /* era --events-bg / --bg-page */
    --ev-card-bg: #0f172a; /* era --bg-card */
    --ev-filter-bg: #111827; /* era --bg-filter (verificar si se usa) */
    --ev-border: rgba(255,255,255,.08); /* era --border */
    --ev-card-shadow: 0 3px 16px rgba(0,0,0,.3);
    --ev-card-shadow-hover: 0 16px 48px rgba(0,0,0,.4);
    /* ── Texto sobre fondo oscuro ───────────────────────────────── */
    --ev-text-h: #ffffff; /* era --text-h */
    --ev-text-muted: rgba(255,255,255,.45); /* era --text-muted */
    --ev-text-dim: rgba(255,255,255,.25); /* era --text-dim */
    /* ── Semaforo de estado ─────────────────────────────────────── */
    --ev-ok: #34d399; /* lugares disponibles */
    --ev-warn: #fbbf24; /* empieza hoy */
    --ev-alert: #f87171; /* en vivo / sin lugares */
    --ev-info: #93c5fd; /* etiqueta informativa */



    --ev-placeholder: #1e293b;
    --ev-destacado: rgba(201,168,76,.9);
    --ri-gold-brand: #c9a84c;
    --ri-gold-rgb: 201, 168, 76;
    /* ── Superficies y bordes claros ─────────────────────────────── */
    --ri-surface-2: #f8fafc; /* fondo de renglones y botones suaves */
    --ri-border-strong: #cbd5e1; /* bordes de boton, punteados */
    --ri-slate: #475569; /* texto de boton neutro */
    /* ── Estado: error ───────────────────────────────────────────── */
    --ri-danger: #dc2626;
    --ri-danger-bg: #fef2f2;
    --ri-danger-border: #fecaca;
    /* ── Estado: exito ───────────────────────────────────────────── */
    --ri-success: #15803d;
    --ri-success-bg: #f0fdf4;



    --ink: #0a0a0f;
    --cream: #f7f4ef;
    --gold: #c9a84c;
    --muted: #6b6b7a;
    --glass: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   BREAKPOINTS — no son tokens, son disciplina.
   var() NO funciona dentro de @media: las media queries se evaluan
   antes de resolver variables. Hay que escribir el numero a mano.

     480px    celular chico
     768px    celular / tablet vertical
     992px    tablet horizontal
     1200px   desktop
     1400px   desktop ancho

   Usa SOLO estos. Si necesitas otro, revisa el layout del componente.
   ═══════════════════════════════════════════════════════════════════ */