/* Kresko Bretaro — tokens (rediseño premium, parte 1). ÚNICA fuente de colores de la app. Las 12 variables de la guía (diseno/LEEME-DISENO.md) con su valor en claro y en oscuro; el tema «negro» es una variante del oscuro con fondos negros. Todo lo demás (los nombres antiguos --surface-page, --text, --brand-teal…, la paleta apagada de las opciones --opc-* y las series de los gráficos) sale de estas 12 con alias o color-mix(): nada de colores sueltos en style.css, estudio.css ni en el JavaScript. Contraste del texto ≥ 4,5:1 (diseno/contraste.mjs). */ /* ---- Las 12 variables (claro) ---- */ :root, [data-theme="light"] { --fondo: #FBFBFA; --barra: #F4F5F3; /* menú lateral */ --superficie: #FFFFFF; /* tarjetas, tablas */ --borde-base: #E6E9E7; /* el borde sin capas encima: lo mezcla la capa Pro (no usar var(--borde): haría un ciclo) */ --borde: var(--borde-base); --borde-suave-base: #EFF1EF; /* entre filas */ --borde-suave: var(--borde-suave-base); --texto: #142322; --secundario: #55625F; --tenue: #64716E; /* conteos, encabezados (la guía dice #6B7875: daba 4,44:1 sobre --fondo y 4,20:1 sobre --barra) */ --acento: #1F7A4D; --acento-suave: #E7F1EB; --en-curso: #9A6210; --marca: #0F3D3E; /* logo */ /* Solo para acciones de borrar y errores (no es un acento): rojo apagado con 4,5:1 sobre fondo y superficie. */ --peligro: #B42318; /* Texto sobre el botón con relleno (verde) */ --sobre-acento: #FFFFFF; /* Paleta apagada de las opciones de Selección y Estado (muestras, tablero y grupos «Translúcidos»): tono legible como texto (≥ 4,5:1 sobre su propio tinte) y el tinte sale con color-mix() más abajo. */ --opc-teal: #1D6B66; --opc-lime: #3D6A1E; --opc-blue: #2D5E96; --opc-violet: #5B4A9C; --opc-pink: #933F66; --opc-red: #A3392F; --opc-orange: #9C4E16; --opc-amber: #8A5A10; --opc-brown: #775436; --opc-neutral: #55625F; --tinte: 12%; /* opacidad del tinte de una columna o grupo translúcido */ --tinte-tarjeta: 4%; /* las tarjetas, un poco más claras que su columna */ --tinte-pildora: 12%; /* etiquetas de color (Selección): fondo de la píldora sobre --superficie */ --tinte-cuadro: 10%; /* cuadros destacados con color (b.tono) sobre --superficie */ color-scheme: light; } /* ---- Las 12 variables (oscuro) ---- */ [data-theme="dark"], [data-theme="black"] { --shadow-card: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 24px -12px rgba(0, 0, 0, .55); --shadow-panel: 0 1px 2px rgba(0, 0, 0, .45), 0 24px 48px -18px rgba(0, 0, 0, .65); --fondo: #0D1211; --barra: #0A0F0E; --superficie: #121817; --borde-base: #1F2826; --borde: var(--borde-base); --borde-suave-base: #19211F; --borde-suave: var(--borde-suave-base); --texto: #E6ECEA; --secundario: #A2AEAB; --tenue: #808D8A; --acento: #4CC28A; --acento-suave: rgba(76, 194, 138, .13); --en-curso: #E0A443; --marca: #0F3D3E; --peligro: #F97066; --sobre-acento: #0D1211; --opc-teal: #6CC3BA; --opc-lime: #9CC77A; --opc-blue: #8DB5EA; --opc-violet: #AE9DEB; --opc-pink: #E59BBE; --opc-red: #EC8C82; --opc-orange: #EDA067; --opc-amber: #DDB063; --opc-brown: #C9A17E; --opc-neutral: #A2AEAB; --tinte: 18%; --tinte-tarjeta: 8%; --tinte-pildora: 18%; --tinte-cuadro: 20%; color-scheme: dark; } /* Tema negro (OLED): el oscuro con fondo y barra negros y superficie casi negra. */ [data-theme="black"] { --fondo: #000000; --barra: #000000; --superficie: #0A0F0E; } /* ---- Alias: los nombres de siempre apuntan a las 12 (así el resto del CSS no cambia de nombres) ---- */ :root, [data-theme] { --brand-ink: var(--marca); --brand-teal: var(--acento); --brand-teal-deep: var(--acento); --pop-lime: var(--acento); --surface-page: var(--fondo); --surface-sidebar: var(--barra); --surface-raised: var(--superficie); --surface-hover: color-mix(in srgb, var(--texto) 5%, var(--superficie)); --line: var(--borde); --line-soft: var(--borde-suave); --control-border: var(--borde); --text: var(--texto); --text-muted: var(--secundario); --text-faint: var(--tenue); --accent-text: var(--acento); --on-accent: var(--sobre-acento); --focus-ring: var(--acento); --success: var(--acento); --warning: var(--en-curso); --danger: var(--peligro); --info: var(--secundario); --violet: var(--secundario); /* Las «etiquetas de color» ya no tiñen (regla 4): fondos suaves derivados */ --tag-teal-bg: var(--acento-suave); --tag-lime-bg: var(--acento-suave); --tag-violet-bg: color-mix(in srgb, var(--texto) 6%, transparent); --tag-amber-bg: color-mix(in srgb, var(--en-curso) 12%, transparent); --tag-red-bg: color-mix(in srgb, var(--peligro) 12%, transparent); --tag-neutral-bg: color-mix(in srgb, var(--texto) 6%, transparent); /* Sombras en DOS capas (21/10, dirección del lienzo): una de contacto a 1 px que apoya la tarjeta en el fondo, y otra de altura, difusa y desplazada hacia abajo. Nunca una sola borrosa: una sola mancha se lee como suciedad, no como altura. */ --shadow-card: 0 1px 2px rgba(15, 42, 46, .05), 0 10px 24px -14px rgba(15, 42, 46, .22); --shadow-panel: 0 1px 2px rgba(15, 42, 46, .06), 0 24px 48px -20px rgba(15, 42, 46, .30); --shadow-accent: none; /* Velo detrás de paneles y ventanas */ --velo-color: color-mix(in srgb, var(--marca) 45%, transparent); } /* ---- Medidas: ritmo 4/8/12/16/24/32, radios anidados 13 / 20 / 36, letras ---- Los radios se anidan en vez de ser todos iguales: un control (13) metido en una tarjeta con 8 px de aire pide 21 de radio exterior ≈ 20; una tarjeta (20) dentro de una hoja con 16 px de aire pide 36. Esa es la regla: exterior = interior + relleno. Poner 8 y 12 en todo aplana la app entera por igual, y eso es justo lo que hace que parezca una plantilla. (21/10, del lienzo) */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 16px; /* antes 20: el ritmo no tiene 20 */ --space-6: 24px; --space-8: 32px; --space-12: 32px; /* antes 48: el ritmo llega a 32 */ --radius-xs: 8px; /* cosas diminutas: fichas, celdas resaltadas, iconos de página */ --radius-sm: 13px; /* controles: botones, campos, filas de la barra lateral */ --radius-md: 20px; /* tarjetas y bloques */ --radius-lg: 20px; --radius-hoja: 36px; /* la hoja que envuelve tarjetas (exterior = 20 + 16 de relleno) */ --radius-lamina: 20px; --radius-pill: 999px; --curva: cubic-bezier(.2, .8, .25, 1); /* la curva de todo el movimiento de Kresko */ --font-display: 'Space Grotesk', ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --font-body: 'DM Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif; --dur: 180ms; /* movimiento corto: 150–200 ms (regla 10) */ } /* --------------------------------------------------------------------------------------------------------------- CAPA PRO (latón). Se enciende poniendo data-pro="si" en cuando la Nube dice que la persona tiene Pro. NO es un tercer tema: es una capa encima del claro, del oscuro y del negro, así que el «modo blanco» sigue blanco. La decisión de diseño, por si hay que revisarla: el negro-y-oro como SUPERFICIE (fondos dorados, botones dorados) lee barato: es el lenguaje del casino y de las apps de cripto. El oro como ESTRUCTURA —una raya de 1 px, el filo de una tarjeta, el aro del logo— lee caro: es el lenguaje de un reloj y de una tarjeta de metal. Así que aquí el latón solo toca líneas y filos, nunca el fondo ni el texto, y nunca el acento de las acciones: el verde sigue significando «esto se puede pulsar». Si el oro también fuera el botón, el oro dejaría de significar nada. Latón apagado, no amarillo: #C8A567 en claro y #D4B578 en oscuro (más claro para que aguante sobre casi negro). */ [data-pro="si"] { --laton: #C8A567; /* Se mezcla sobre --borde-base (el borde SIN capas), nunca sobre --borde: esta misma regla lo redefine. */ --laton-filo: color-mix(in srgb, var(--laton) 55%, var(--borde-base)); /* filo de tarjeta */ --laton-raya: color-mix(in srgb, var(--laton) 38%, var(--borde-base)); /* separadores: más discreto todavía */ --laton-brillo: color-mix(in srgb, var(--laton) 14%, transparent); /* lavado tenue detrás del logo y los sellos */ --borde: var(--laton-raya); --borde-suave: color-mix(in srgb, var(--laton) 20%, var(--borde-suave-base)); } [data-pro="si"][data-theme="dark"], [data-pro="si"][data-theme="black"] { --laton: #D4B578; } /* El logo sobre una placa con filo de latón (el dibujo no se tiñe: teñir un SVG con filtros da colores impredecibles). */ [data-pro="si"] .k-sidebar__ws .logo { padding: 3px; border: 1px solid var(--laton-filo); border-radius: var(--radius-pill); background: var(--laton-brillo); box-sizing: content-box; } /* El nombre del espacio, en Space Grotesk, con el filo de latón debajo: una sola raya, no un marco. */ [data-pro="si"] .k-sidebar__ws-texto { box-shadow: 0 1px 0 var(--laton-brillo); } /* Sello «Pro» en las etiquetas de sección de la barra. */ [data-pro="si"] .k-sidebar__label { color: color-mix(in srgb, var(--laton) 70%, var(--tenue)); } /* La vía de una barra de avance usa --borde, así que con Pro se volvía latón: una barra VACÍA parecía llena de oro. Aquí vuelve a ser neutra. El oro marca estructura; el avance lo marca el verde y nada más. */ [data-pro="si"] .avance__barra { background: color-mix(in srgb, var(--texto) 12%, transparent); }