/* ==========================================================================
   Variables CSS — Tema claro y oscuro
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Brand accent.
       --primary-color es el rojo "RaceTracker". El hex coincide con
       Bootstrap $danger (#dc3545) por razones históricas — la app no
       cambia ese tono en modo claro para mantener identidad. En modo
       oscuro lo desaturamos un poco (ver bloque [data-bs-theme="dark"]
       más abajo) para que no zumbe contra el navy.
       Regla: el accent solo aparece en CTAs primarios y estados error
       inline. No para bordes decorativos de navbar/footer ni stripes
       laterales en alertas.
       ---------------------------------------------------------------------- */
    --primary-color: #dc3545;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --info-color: #0dcaf0;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --blue-color: #0d6efd;
    --red-color: #dc3545;
    --white-color: #ffffff;
    --black-color: #000000;

    /* Alturas para cálculos dinámicos */
    --navbar-height: 76px;
    --footer-height: 60px;

    /* ----------------------------------------------------------------------
       Easing tokens — curvas fuertes para microinteracción.
       Las curvas built-in (ease, ease-out) son débiles y le sacan punch a
       las animaciones. Usar estas variables en transitions y keyframes en
       lugar de "ease" / "ease-in-out" plano.
       ---------------------------------------------------------------------- */

    /* Para entradas/salidas y feedbacks de UI (hover, press, popovers...) */
    --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);

    /* Para movimiento on-screen (paneles que se reordenan, drawers...) */
    --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);

    /* Colores del tema claro */
    --bg-primary: #f4f6f9;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --navbar-bg: #212529;
    --footer-bg: #212529;

    /* ----------------------------------------------------------------------
       Override del focus-ring de Bootstrap.
       Por defecto Bootstrap usa rgba(13, 110, 253, 0.25) — el azul Bootstrap.
       Eso pintaba todos los anillos de foco de azul, incluso en CTAs rojas.
       Lo apuntamos a nuestra paleta para que el feedback de teclado/click
       sea consistente con la identidad de marca.
       ---------------------------------------------------------------------- */
    --bs-focus-ring-color: rgba(220, 53, 69, 0.25);
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: #b21f2d;
    --bs-link-color-rgb: 220, 53, 69;
    --bs-link-hover-color-rgb: 178, 31, 45;
}

/* Tema oscuro — paleta navy/azul oscuro profundo */
[data-bs-theme="dark"] {
    /* Rojo desaturado para dark — el #dc3545 de Bootstrap zumba contra
       el navy. Bajamos chroma manteniendo la identidad. */
    --primary-color: #e85565;

    --bg-primary: #0b1120;
    --bg-secondary: #111a2e;
    --bg-tertiary: #1a2540;
    --text-primary: #e8edf5;
    --text-secondary: #8b95a8;
    --text-muted: #5a6478;
    --border-color: #1e2d4a;
    --card-bg: #111a2e;
    --navbar-bg: #111a2e;
    --footer-bg: #111a2e;

    /* Focus-ring y links en dark también siguen el rojo desaturado */
    --bs-focus-ring-color: rgba(232, 85, 101, 0.3);
    --bs-link-color: #e85565;
    --bs-link-hover-color: #ff7280;
    --bs-link-color-rgb: 232, 85, 101;
    --bs-link-hover-color-rgb: 255, 114, 128;
}