/* * ============================================================ * KoniRod — kr-tokens.css * Fuente única de variables de paleta (--kr-*) * * Importar en base.html ANTES de kr-components.css: * * * La paleta activa se controla con una clase en : * body → Graphite (default, oscuro) * body.kr-theme-espresso → Espresso (oscuro cálido) * body.kr-theme-slate → Slate (oscuro azulado) * body.kr-theme-classic → Nebula Purple (el original) * body.kr-light → Modo claro (sobre cualquier tema) * * Para agregar una paleta nueva: copiar un bloque y cambiar hex. * Nunca hardcodear colores en componentes: usar var(--kr-*). * ============================================================ */ /* ============================================================ GRAPHITE — default · oscuro · carbón neutro + púrpura sobrio ============================================================ */ :root { --kr-base: #1D2026; --kr-sidebar: #16181D; --kr-surface: #23262E; --kr-surface-alt: #101216; --kr-primario: #6B4FC8; --kr-acento: #A892F0; --kr-bastones: #8B7AD8; --kr-texto-1: rgba(255,255,255,0.92); --kr-texto-2: rgba(210,205,225,0.66); --kr-texto-3: rgba(180,172,210,0.40); --kr-borde-1: rgba(168,146,240,0.10); --kr-borde-2: rgba(168,146,240,0.20); --kr-borde-3: rgba(168,146,240,0.38); /* Nav */ --kr-nav-item: rgba(255,255,255,0.46); --kr-nav-activo: #ffffff; --kr-nav-bg-activo: #6B4FC8; --kr-nav-borde-activo: #6B4FC8; /* Wordmark */ --kr-wordmark-koni: rgba(255,255,255,0.92); --kr-wordmark-rod: #A892F0; --kr-icon-bastones: #8B7AD8; /* Semánticos — comunes a todos los temas oscuros */ --kr-success: #5DCAA5; --kr-warning: #EF9F27; --kr-danger: #F09595; --kr-info: #85B7EB; /* Scrollbar */ --kr-scrollbar-track: rgba(168,146,240,0.04); --kr-scrollbar-thumb: rgba(168,146,240,0.18); /* Profundidad de cards */ --kr-card-shadow: 0 1px 2px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.20); --kr-card-glow: inset 0 1px 0 rgba(168,146,240,0.09); --kr-card-border-t: rgba(168,146,240,0.16); /* Bootstrap overrides */ --bs-body-color: rgba(255,255,255,0.92); --bs-body-bg: #101216; --bs-card-bg: #1D2026; --bs-card-color: rgba(255,255,255,0.92); --bs-border-color: rgba(168,146,240,0.10); --bs-secondary-color: rgba(210,205,225,0.66); } /* ============================================================ ESPRESSO — oscuro · carbón cálido + acento bronce ============================================================ */ body.kr-theme-espresso { --kr-base: #221E19; --kr-sidebar: #1A1714; --kr-surface: #2A251F; --kr-surface-alt: #14110D; --kr-primario: #B07D2E; --kr-acento: #D8A24A; --kr-bastones: #C68F3C; --kr-texto-1: rgba(255,255,255,0.92); --kr-texto-2: rgba(225,210,185,0.66); --kr-texto-3: rgba(200,170,130,0.42); --kr-borde-1: rgba(216,162,74,0.10); --kr-borde-2: rgba(216,162,74,0.20); --kr-borde-3: rgba(216,162,74,0.38); --kr-nav-item: rgba(255,255,255,0.46); --kr-nav-activo: #ffffff; --kr-nav-bg-activo: #B07D2E; --kr-nav-borde-activo: #B07D2E; --kr-wordmark-koni: rgba(255,255,255,0.92); --kr-wordmark-rod: #D8A24A; --kr-icon-bastones: #C68F3C; /* Verde más neutro para no chocar con el bronce del acento */ --kr-success: #7FC9A0; --kr-warning: #E8B45A; --kr-danger: #E89086; --kr-info: #8FB4C9; --kr-scrollbar-track: rgba(216,162,74,0.04); --kr-scrollbar-thumb: rgba(216,162,74,0.18); --kr-card-shadow: 0 1px 2px rgba(0,0,0,0.36), 0 4px 12px rgba(0,0,0,0.22); --kr-card-glow: inset 0 1px 0 rgba(216,162,74,0.09); --kr-card-border-t: rgba(216,162,74,0.16); --bs-body-color: rgba(255,255,255,0.92); --bs-body-bg: #14110D; --bs-card-bg: #221E19; --bs-card-color: rgba(255,255,255,0.92); --bs-border-color: rgba(216,162,74,0.10); --bs-secondary-color: rgba(225,210,185,0.66); } /* ============================================================ SLATE — oscuro · gris azulado frío + acento teal ============================================================ */ body.kr-theme-slate { --kr-base: #1B232B; --kr-sidebar: #141A1F; --kr-surface: #212B33; --kr-surface-alt: #0E1318; --kr-primario: #1D9E75; --kr-acento: #4FD1B5; --kr-bastones: #3FBBA0; --kr-texto-1: rgba(255,255,255,0.92); --kr-texto-2: rgba(200,215,225,0.66); --kr-texto-3: rgba(150,180,200,0.45); --kr-borde-1: rgba(120,160,180,0.12); --kr-borde-2: rgba(120,160,180,0.22); --kr-borde-3: rgba(120,160,180,0.40); --kr-nav-item: rgba(255,255,255,0.46); --kr-nav-activo: #ffffff; --kr-nav-bg-activo: #1D9E75; --kr-nav-borde-activo: #1D9E75; --kr-wordmark-koni: rgba(255,255,255,0.92); --kr-wordmark-rod: #4FD1B5; --kr-icon-bastones: #3FBBA0; /* Success usa azul para no confundirse con el acento teal */ --kr-success: #6FB8E0; --kr-warning: #EF9F27; --kr-danger: #F09595; --kr-info: #85B7EB; --kr-scrollbar-track: rgba(120,160,180,0.05); --kr-scrollbar-thumb: rgba(120,160,180,0.20); --kr-card-shadow: 0 1px 2px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.20); --kr-card-glow: inset 0 1px 0 rgba(120,160,180,0.10); --kr-card-border-t: rgba(120,160,180,0.18); --bs-body-color: rgba(255,255,255,0.92); --bs-body-bg: #0E1318; --bs-card-bg: #1B232B; --bs-card-color: rgba(255,255,255,0.92); --bs-border-color: rgba(120,160,180,0.12); --bs-secondary-color: rgba(200,215,225,0.66); } /* ============================================================ CLASSIC — Nebula Purple original (azul medianoche + lavanda) ============================================================ */ body.kr-theme-classic { --kr-base: #131F33; --kr-sidebar: #0D1628; --kr-surface: #1C2E46; --kr-surface-alt: #080F1A; --kr-primario: #6B4FC8; --kr-acento: #B8A4FF; --kr-bastones: #7F77DD; --kr-texto-1: rgba(255,255,255,0.88); --kr-texto-2: rgba(200,184,255,0.65); --kr-texto-3: rgba(184,164,255,0.35); --kr-borde-1: rgba(184,164,255,0.10); --kr-borde-2: rgba(184,164,255,0.20); --kr-borde-3: rgba(184,164,255,0.38); --kr-nav-item: rgba(255,255,255,0.42); --kr-nav-activo: #ffffff; --kr-nav-bg-activo: #6B4FC8; --kr-nav-borde-activo: #6B4FC8; --kr-wordmark-koni: rgba(255,255,255,0.90); --kr-wordmark-rod: #B8A4FF; --kr-icon-bastones: #7F77DD; --kr-success: #5DCAA5; --kr-warning: #EF9F27; --kr-danger: #F09595; --kr-info: #85B7EB; --kr-scrollbar-track: rgba(184,164,255,0.04); --kr-scrollbar-thumb: rgba(184,164,255,0.18); --kr-card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.18); --kr-card-glow: inset 0 1px 0 rgba(184,164,255,0.10); --kr-card-border-t: rgba(184,164,255,0.18); --bs-body-color: rgba(255,255,255,0.88); --bs-body-bg: #080F1A; --bs-card-bg: #131F33; --bs-card-color: rgba(255,255,255,0.88); --bs-border-color: rgba(184,164,255,0.10); --bs-secondary-color: rgba(200,184,255,0.65); } /* ============================================================ MODO CLARO — body.kr-light Se combina con cualquier tema. Definido al final para ganar especificidad sobre los temas oscuros de arriba. ============================================================ */ body.kr-light { --kr-base: #FFFFFF; --kr-sidebar: #FFFFFF; --kr-surface: #F7F9FC; --kr-surface-alt: #EEF3F8; --kr-texto-1: #102033; --kr-texto-2: #475569; --kr-texto-3: #7B8798; --kr-borde-1: rgba(15,32,51,0.08); --kr-borde-2: rgba(15,32,51,0.14); --kr-borde-3: rgba(107,79,200,0.28); --kr-nav-item: #64748B; --kr-nav-activo: #ffffff; --kr-wordmark-koni: #102033; --kr-scrollbar-track: rgba(15,32,51,0.04); --kr-scrollbar-thumb: rgba(15,32,51,0.18); --kr-card-shadow: 0 1px 2px rgba(15,32,51,0.05), 0 10px 26px rgba(15,32,51,0.07); --kr-card-glow: inset 0 1px 0 rgba(255,255,255,0.90); --kr-card-border-t: rgba(255,255,255,0.90); --bs-body-color: #102033; --bs-body-bg: #EEF3F8; --bs-card-bg: #FFFFFF; --bs-card-color: #102033; --bs-border-color: rgba(15,32,51,0.10); --bs-secondary-color: #64748B; } /* En claro, cada tema conserva SU color de acento/primario/nav. Solo se neutralizan superficies y textos arriba; el acento se hereda del tema activo, salvo el default Graphite: */ body.kr-light { --kr-primario: #6B4FC8; --kr-acento: #6B4FC8; --kr-bastones: #6B4FC8; --kr-nav-bg-activo: #6B4FC8; --kr-nav-borde-activo: #6B4FC8; --kr-wordmark-rod: #6B4FC8; --kr-icon-bastones: #6B4FC8; } body.kr-light.kr-theme-espresso { --kr-primario: #B07D2E; --kr-acento: #B07D2E; --kr-bastones: #B07D2E; --kr-nav-bg-activo: #B07D2E; --kr-nav-borde-activo: #B07D2E; --kr-wordmark-rod: #B07D2E; --kr-icon-bastones: #B07D2E; } body.kr-light.kr-theme-slate { --kr-primario: #0F6E56; --kr-acento: #0F6E56; --kr-bastones: #0F6E56; --kr-nav-bg-activo: #1D9E75; --kr-nav-borde-activo: #1D9E75; --kr-wordmark-rod: #0F6E56; --kr-icon-bastones: #0F6E56; }