/*
* Tema por defecto de Bifrost.
*
* Este archivo define TODAS las variables de diseño del mantenedor (colores,
* tipografías, radios, sombras). Se carga como aparte, ANTES del CSS
* compilado de Tailwind (ver templates/layouts/base.html), así que sus
* valores están disponibles para los tokens de Tailwind
* (theme/static_src/src/styles.css) y para CSS custom.
*
* Todas las variables usan el prefijo --rs- (Roland Spaarwater) para no
* chocar con los nombres de tokens que genera Tailwind (--color-*, --font-*,
* etc.) cuando se mapean en el @theme de theme/static_src/src/styles.css.
*
* Esto es el tema del MANTENEDOR (panel interno de Bifrost/RS Online), no el
* de los sitios de marca (KTM, HQV, GasGas, Voge) — esos son Laravel
* independientes con su propio diseño.
*
* Para personalizar el mantenedor sin tocar el resto del código:
* 1. Copiar este archivo a static/css/themes/.css
* 2. Cambiar los valores de las variables que se quieran personalizar
* 3. Apuntar ACTIVE_THEME = "" en config/settings.py (o .env)
* No es necesario recompilar Tailwind para cambiar de tema: los valores son
* variables CSS resueltas en el navegador.
*/
:root {
/* ---- Colores de marca (panel interno, blanco y negro sobrio) ---- */
--rs-primary: #111111;
--rs-primary-hover: #000000;
--rs-on-primary: #ffffff;
--rs-secondary: #ffffff;
--rs-secondary-hover: #f5f5f5;
--rs-on-secondary: #111111;
--rs-accent: #404040;
/* ---- Colores de estado (funcionales) ---- */
--rs-success: #16a34a;
--rs-success-bg: #f0fdf4;
--rs-warning: #d97706;
--rs-warning-bg: #fffbeb;
--rs-danger: #dc2626;
--rs-danger-bg: #fef2f2;
--rs-info: #0891b2;
--rs-info-bg: #ecfeff;
/* ---- Superficie / layout ---- */
--rs-surface: #ffffff;
--rs-surface-muted: #fafafa;
--rs-border: #e5e5e5;
--rs-text: #111111;
--rs-text-muted: #6b6b6b;
/* ---- Tipografía ---- */
--rs-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
--rs-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
/* ---- Radios (sobrios, sin exceso de curvatura) ---- */
--rs-radius-sm: 0.25rem;
--rs-radius-md: 0.375rem;
--rs-radius-lg: 0.5rem;
--rs-radius-full: 9999px;
/* ---- Sombras (sutiles) ---- */
--rs-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
--rs-shadow-md: 0 2px 8px -2px rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
--rs-shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 0.1), 0 2px 6px -2px rgb(0 0 0 / 0.06);
/* ---- Transiciones ---- */
--rs-transition-fast: 150ms ease-in-out;
--rs-transition-base: 200ms ease-in-out;
}
/*
* Modo oscuro — mismas variables, sobreescritas. Como todas las clases de
* Tailwind (bg-primary, text-text, etc.) leen estas variables en runtime, no
* hace falta usar el variant dark: de Tailwind en los templates: basta con
* activar el modo oscuro acá.
*
* Se activa con el atributo data-theme en , controlado por
* static/js/theme.js (toggle persistido en localStorage). Por defecto
* respeta la preferencia del sistema operativo (prefers-color-scheme), salvo
* que el usuario haya elegido explícitamente un modo.
*/
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--rs-primary: #f5f5f5;
--rs-primary-hover: #ffffff;
--rs-on-primary: #111111;
--rs-secondary: #1a1a1a;
--rs-secondary-hover: #262626;
--rs-on-secondary: #f5f5f5;
--rs-accent: #a3a3a3;
--rs-success-bg: #052e16;
--rs-warning-bg: #451a03;
--rs-danger-bg: #450a0a;
--rs-info-bg: #083344;
--rs-surface: #171717;
--rs-surface-muted: #0a0a0a;
--rs-border: #2e2e2e;
--rs-text: #f5f5f5;
--rs-text-muted: #a3a3a3;
--rs-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--rs-shadow-md: 0 2px 8px -2px rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
--rs-shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.3);
}
}
:root[data-theme="dark"] {
--rs-primary: #f5f5f5;
--rs-primary-hover: #ffffff;
--rs-on-primary: #111111;
--rs-secondary: #1a1a1a;
--rs-secondary-hover: #262626;
--rs-on-secondary: #f5f5f5;
--rs-accent: #a3a3a3;
--rs-success-bg: #052e16;
--rs-warning-bg: #451a03;
--rs-danger-bg: #450a0a;
--rs-info-bg: #083344;
--rs-surface: #171717;
--rs-surface-muted: #0a0a0a;
--rs-border: #2e2e2e;
--rs-text: #f5f5f5;
--rs-text-muted: #a3a3a3;
--rs-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--rs-shadow-md: 0 2px 8px -2px rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
--rs-shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.3);
}