/* OsCare — sistema de temas (Paso 34). * * Un solo lugar para los colores de toda la app. Las plantillas usan * var(--token) en su CSS inline; acá se define qué valor toma cada token * según el tema. El tema se elige con dos atributos en : * data-theme="claro|oscuro" → el fondo (y el set de grises) * data-accent="ambar|azul|…" → el color de las teclas/títulos * * El servidor rendea esos atributos desde settings (theme_mode / accent), así * que el tema correcto ya está aplicado en el primer paint — no hay parpadeo * de oscuro antes de que cargue el JS. La pantalla de acceso es pre-login (no * hay settings): no pone los atributos y cae al default de :root (oscuro+ámbar). * * Por qué CSS custom properties (variables): es el equivalente CSS de tener * los colores en un %config y referenciarlos, en vez de repetir el literal * en cada regla. Cambiar un atributo en re-resuelve todas las var() * de una. */ /* --- Tokens estructurales: default = tema oscuro (el look histórico) ------- */ :root { --bg: #111; /* fondo de la página */ --bg-panel: #1a1a1a; /* paneles densos (Configuración, modal de Mis frases) */ --surface: #222; /* botones y tarjetas */ --surface-2: #333; /* hover */ --surface-3: #444; /* active (apretado) */ --border: #444; /* bordes de botones/inputs */ --border-soft: #2a2a2a;/* separadores sutiles (filas de tabla) */ --fg: #f5f5f5; /* texto principal */ --fg-muted: #aaa; /* texto secundario (hints, encabezados de tabla) */ --fg-faint: #777; /* texto tenue ("—" de tecla vacía, placeholders) */ /* Acento default (ámbar oscuro). Los bloques [data-accent] de abajo lo pisan; ámbar usa este valor base. */ --accent: #ffd34a; } /* --- Acentos en modo oscuro: brillantes para contrastar sobre fondo oscuro - */ html[data-accent="azul"] { --accent: #5ab0ff; } html[data-accent="verde"] { --accent: #5fd97a; } html[data-accent="violeta"] { --accent: #c08cff; } html[data-accent="rosa"] { --accent: #ff7ab0; } /* --- Tema claro: fondo claro + grises invertidos -------------------------- */ /* Misma especificidad (0,1,1) que los [data-accent] de arriba, pero va después en el archivo: gana en el cascade y reescribe el acento ámbar a su tono oscuro (legible sobre claro). Los acentos no-ámbar en claro se definen en el bloque combinado de abajo (0,2,1), que gana sobre este. */ html[data-theme="claro"] { --bg: #f4f4f5; --bg-panel: #ffffff; --surface: #ffffff; --surface-2: #ececef; --surface-3: #dddde1; --border: #cfcfd4; --border-soft: #e6e6e9; --fg: #1a1a1a; --fg-muted: #5f5f66; --fg-faint: #9a9aa2; --accent: #936c00; /* ámbar oscuro: contraste sobre fondo claro */ } /* --- Acentos en modo claro: tonos saturados/oscuros ----------------------- */ /* Especificidad (0,2,1): gana sobre html[data-theme="claro"] y sobre html[data-accent="…"]. Garantizan contraste del texto sobre fondo claro. */ html[data-theme="claro"][data-accent="azul"] { --accent: #1565c0; } html[data-theme="claro"][data-accent="verde"] { --accent: #2e7d32; } html[data-theme="claro"][data-accent="violeta"] { --accent: #6a1b9a; } html[data-theme="claro"][data-accent="rosa"] { --accent: #c2185b; } /* --- Swatches de acento (grilla del tema en Configuración) ---------------- */ /* El color de cada chip. Usamos los tonos vivos (los del modo oscuro) como identidad estable del acento, sin importar el tema activo: el chip es una etiqueta de color, no un preview del render final. La especificidad (0,2,0) gana sobre el `button:hover` global de config.html, así el chip no cambia de color al pasarle el mouse. */ .accent-swatch[data-accent="ambar"] { background: #ffd34a; } .accent-swatch[data-accent="azul"] { background: #5ab0ff; } .accent-swatch[data-accent="verde"] { background: #5fd97a; } .accent-swatch[data-accent="violeta"] { background: #c08cff; } .accent-swatch[data-accent="rosa"] { background: #ff7ab0; }