/* ========================================================================== theme.css - tokens de color -------------------------------------------------------------------------- ARCHIVO GENERADO por scripts/tema.py a partir de TEMA.md. NO EDITAR A MANO: cualquier cambio se pierde en la proxima regeneracion. python3 scripts/tema.py El script valida las 38 parejas de contraste de TEMA.md (WCAG 2.1) y aborta si alguna baja de su minimo. Este archivo define TOKENS, no componentes. LA PAGINA VA EN TEMA CLARO, con FONDO BLANCO PURO (--fondo: #FFFFFF). Para eso el HTML tiene que declararlo explicitamente: Estructura del archivo (sin cambios): :root define el tema OSCURO, que es el default de la cascada; [data-tema="claro"] lo pisa entero. El atributo gana siempre, tambien sobre prefers-color-scheme, asi que con data-tema="claro" la pagina es blanca para todo el mundo. Si algun dia se saca el atributo, la pagina cae al oscuro (o al claro si el sistema lo pide). En el tema claro --fondo es blanco y las tarjetas se despegan hacia el verdoso: --superficie #EFFDF2 y --superficie-2 #E0F8E4. Las rampas son POR ROL, no por luminosidad absoluta: --neutro-900 es "superficie profunda" y --neutro-300 es "texto de cuerpo" en LOS DOS temas. En el tema claro el indice se espeja (N -> 1000-N), asi un mismo nombre de variable sirve para los dos. --marca (#45AD3B, el logo) nunca espeja. Cada color se emite dos veces: en hex (--x) y como triplete sRGB separado por espacios (--x-rgb), para poder escribir en Tailwind rgb(var(--x-rgb) / ) y conservar los modificadores de opacidad. ========================================================================== */ /* --- tema oscuro (principal) ------------------------------------------ */ :root { color-scheme: dark; /* rampa de marca (por rol) */ --verde-50: #EFFDF2; --verde-50-rgb: 239 253 242; --verde-100: #E0F8E4; --verde-100-rgb: 224 248 228; --verde-200: #C2EDC6; --verde-200-rgb: 194 237 198; --verde-300: #9ADC9C; --verde-300-rgb: 154 220 156; --verde-400: #6DC469; --verde-400-rgb: 109 196 105; --verde-500: #45AD3B; --verde-500-rgb: 69 173 59; --verde-600: #288601; --verde-600-rgb: 40 134 1; --verde-700: #296705; --verde-700-rgb: 41 103 5; --verde-800: #214A00; --verde-800-rgb: 33 74 0; --verde-900: #152D01; --verde-900-rgb: 21 45 1; --verde-950: #0C1C00; --verde-950-rgb: 12 28 0; /* rampa neutra tenida: 8% del croma de marca, mismo tono */ --neutro-50: #F0F8EF; --neutro-50-rgb: 240 248 239; --neutro-100: #E3EAE2; --neutro-100-rgb: 227 234 226; --neutro-200: #CDD5CC; --neutro-200-rgb: 205 213 204; --neutro-300: #BAC2B9; --neutro-300-rgb: 186 194 185; --neutro-400: #A7AFA6; --neutro-400-rgb: 167 175 166; --neutro-500: #878E86; --neutro-500-rgb: 135 142 134; --neutro-600: #6C726B; --neutro-600-rgb: 108 114 107; --neutro-700: #525951; --neutro-700-rgb: 82 89 81; --neutro-800: #3C423B; --neutro-800-rgb: 60 66 59; --neutro-900: #262C25; --neutro-900-rgb: 38 44 37; --neutro-950: #151A14; --neutro-950-rgb: 21 26 20; /* semanticos */ --marca: #45AD3B; --marca-rgb: 69 173 59; --marca-legible: #6DC469; --marca-legible-rgb: 109 196 105; --fondo: #0C1C00; --fondo-rgb: 12 28 0; --superficie: #152D01; --superficie-rgb: 21 45 1; --superficie-2: #214A00; --superficie-2-rgb: 33 74 0; --texto: #EFFDF2; --texto-rgb: 239 253 242; --suave: #C2EDC6; --suave-rgb: 194 237 198; --tenue: #A7AFA6; --tenue-rgb: 167 175 166; --acento: #6DC469; --acento-rgb: 109 196 105; --sobre-acento: #0C1C00; --sobre-acento-rgb: 12 28 0; --borde: #262C25; --borde-rgb: 38 44 37; --borde-fuerte: #3C423B; --borde-fuerte-rgb: 60 66 59; /* degradados (regla 3: siempre in oklab) */ --grad-marca: linear-gradient(135deg in oklab, #C2EDC6 0%, #45AD3B 100%); --grad-acento: linear-gradient(135deg in oklab, #6DC469 0%, #45AD3B 100%); --grad-superficie: linear-gradient(180deg in oklab, #152D01 0%, #214A00 100%); --grad-borde: linear-gradient(180deg in oklab, #262C25 0%, #3C423B 100%); --grad-hero: linear-gradient(160deg in oklab, #214A00 0%, #0C1C00 100%); } /* --- tema claro (opt-in explicito) ------------------------------------ */ [data-tema="claro"] { color-scheme: light; /* rampa de marca (por rol) */ --verde-50: #0C1C00; --verde-50-rgb: 12 28 0; --verde-100: #152D01; --verde-100-rgb: 21 45 1; --verde-200: #214A00; --verde-200-rgb: 33 74 0; --verde-300: #296705; --verde-300-rgb: 41 103 5; --verde-400: #288601; --verde-400-rgb: 40 134 1; --verde-500: #45AD3B; --verde-500-rgb: 69 173 59; --verde-600: #6DC469; --verde-600-rgb: 109 196 105; --verde-700: #9ADC9C; --verde-700-rgb: 154 220 156; --verde-800: #C2EDC6; --verde-800-rgb: 194 237 198; --verde-900: #E0F8E4; --verde-900-rgb: 224 248 228; --verde-950: #EFFDF2; --verde-950-rgb: 239 253 242; /* rampa neutra tenida: 8% del croma de marca, mismo tono */ --neutro-50: #151A14; --neutro-50-rgb: 21 26 20; --neutro-100: #262C25; --neutro-100-rgb: 38 44 37; --neutro-200: #3C423B; --neutro-200-rgb: 60 66 59; --neutro-300: #525951; --neutro-300-rgb: 82 89 81; --neutro-400: #6C726B; --neutro-400-rgb: 108 114 107; --neutro-500: #878E86; --neutro-500-rgb: 135 142 134; --neutro-600: #A7AFA6; --neutro-600-rgb: 167 175 166; --neutro-700: #BAC2B9; --neutro-700-rgb: 186 194 185; --neutro-800: #CDD5CC; --neutro-800-rgb: 205 213 204; --neutro-900: #E3EAE2; --neutro-900-rgb: 227 234 226; --neutro-950: #F0F8EF; --neutro-950-rgb: 240 248 239; /* semanticos */ --marca: #45AD3B; --marca-rgb: 69 173 59; --marca-legible: #296705; --marca-legible-rgb: 41 103 5; --fondo: #FFFFFF; --fondo-rgb: 255 255 255; --superficie: #EFFDF2; --superficie-rgb: 239 253 242; --superficie-2: #E0F8E4; --superficie-2-rgb: 224 248 228; --texto: #0C1C00; --texto-rgb: 12 28 0; --suave: #214A00; --suave-rgb: 33 74 0; --tenue: #525951; --tenue-rgb: 82 89 81; --acento: #296705; --acento-rgb: 41 103 5; --sobre-acento: #FFFFFF; --sobre-acento-rgb: 255 255 255; --borde: #C2EDC6; --borde-rgb: 194 237 198; --borde-fuerte: #A7AFA6; --borde-fuerte-rgb: 167 175 166; /* degradados (regla 3: siempre in oklab) */ --grad-marca: linear-gradient(135deg in oklab, #288601 0%, #152D01 100%); --grad-acento: linear-gradient(135deg in oklab, #288601 0%, #296705 100%); --grad-superficie: linear-gradient(180deg in oklab, #EFFDF2 0%, #E0F8E4 100%); --grad-borde: linear-gradient(180deg in oklab, #C2EDC6 0%, #9ADC9C 100%); --grad-hero: linear-gradient(160deg in oklab, #E0F8E4 0%, #EFFDF2 100%); } /* --- tema claro automatico: solo si NO hay [data-tema] ---------------- */ /* La eleccion explicita del usuario siempre gana. */ @media (prefers-color-scheme: light) { :root:not([data-tema]) { color-scheme: light; /* rampa de marca (por rol) */ --verde-50: #0C1C00; --verde-50-rgb: 12 28 0; --verde-100: #152D01; --verde-100-rgb: 21 45 1; --verde-200: #214A00; --verde-200-rgb: 33 74 0; --verde-300: #296705; --verde-300-rgb: 41 103 5; --verde-400: #288601; --verde-400-rgb: 40 134 1; --verde-500: #45AD3B; --verde-500-rgb: 69 173 59; --verde-600: #6DC469; --verde-600-rgb: 109 196 105; --verde-700: #9ADC9C; --verde-700-rgb: 154 220 156; --verde-800: #C2EDC6; --verde-800-rgb: 194 237 198; --verde-900: #E0F8E4; --verde-900-rgb: 224 248 228; --verde-950: #EFFDF2; --verde-950-rgb: 239 253 242; /* rampa neutra tenida: 8% del croma de marca, mismo tono */ --neutro-50: #151A14; --neutro-50-rgb: 21 26 20; --neutro-100: #262C25; --neutro-100-rgb: 38 44 37; --neutro-200: #3C423B; --neutro-200-rgb: 60 66 59; --neutro-300: #525951; --neutro-300-rgb: 82 89 81; --neutro-400: #6C726B; --neutro-400-rgb: 108 114 107; --neutro-500: #878E86; --neutro-500-rgb: 135 142 134; --neutro-600: #A7AFA6; --neutro-600-rgb: 167 175 166; --neutro-700: #BAC2B9; --neutro-700-rgb: 186 194 185; --neutro-800: #CDD5CC; --neutro-800-rgb: 205 213 204; --neutro-900: #E3EAE2; --neutro-900-rgb: 227 234 226; --neutro-950: #F0F8EF; --neutro-950-rgb: 240 248 239; /* semanticos */ --marca: #45AD3B; --marca-rgb: 69 173 59; --marca-legible: #296705; --marca-legible-rgb: 41 103 5; --fondo: #FFFFFF; --fondo-rgb: 255 255 255; --superficie: #EFFDF2; --superficie-rgb: 239 253 242; --superficie-2: #E0F8E4; --superficie-2-rgb: 224 248 228; --texto: #0C1C00; --texto-rgb: 12 28 0; --suave: #214A00; --suave-rgb: 33 74 0; --tenue: #525951; --tenue-rgb: 82 89 81; --acento: #296705; --acento-rgb: 41 103 5; --sobre-acento: #FFFFFF; --sobre-acento-rgb: 255 255 255; --borde: #C2EDC6; --borde-rgb: 194 237 198; --borde-fuerte: #A7AFA6; --borde-fuerte-rgb: 167 175 166; /* degradados (regla 3: siempre in oklab) */ --grad-marca: linear-gradient(135deg in oklab, #288601 0%, #152D01 100%); --grad-acento: linear-gradient(135deg in oklab, #288601 0%, #296705 100%); --grad-superficie: linear-gradient(180deg in oklab, #EFFDF2 0%, #E0F8E4 100%); --grad-borde: linear-gradient(180deg in oklab, #C2EDC6 0%, #9ADC9C 100%); --grad-hero: linear-gradient(160deg in oklab, #E0F8E4 0%, #EFFDF2 100%); } }