/* ============================================================================ CANDY · TOKENS Tres capas, y el orden importa: 1. PALETA CRUDA (--c-*) valores. No se usan nunca en una pantalla. 2. SEMÁNTICA (--sup-*, ...) significado. Es lo que se usa. 3. COMPONENTE (candy.css) medidas concretas. Regla dura: ninguna pantalla escribe un hex. Si hace falta un color que no está aquí, falta una decisión, no un color. El oscuro es EL modo. El claro se define entero, no invirtiendo el oscuro. Las cifras «n:1» de los comentarios las comprueba `contraste.py`, y no están de adorno: la primera versión declaraba diez y CINCO estaban mal. Ninguna rompía nada, pero un número escrito a mano al lado de un color es un número que nadie vuelve a comprobar. ========================================================================= */ :root { /* Neutros oscuros. Azul levísimo (h≈225, croma mínimo): un gris puro junto a velas saturadas se ve sucio; un azul evidente se ve "cripto". */ --c-n0:#06070a; /* canvas del gráfico: el plano, lo más profundo */ --c-n1:#0b0d12; /* fondo de la aplicación */ --c-n2:#11141a; /* panel */ --c-n3:#171b23; /* panel elevado · hover de fila */ --c-n4:#1e232d; /* control, campo, celda activa */ --c-n5:#2a3140; /* borde marcado */ --c-n6:#3a4354; /* separador duro */ --c-n7:#5c6577; /* deshabilitado. 3.3:1 → NUNCA lleva un número */ --c-n8:#8b95a7; /* texto secundario. 6.4:1 */ --c-n9:#c2cad8; /* texto de dato. 11.8:1 */ --c-n10:#edf0f6; /* texto principal. 17.0:1 */ --c-l0:#ffffff; --c-l1:#f7f8fa; --c-l2:#ffffff; --c-l3:#f1f3f7; /* EL PLANO DEL MERCADO en claro: el gris azulado de candy2, literal. Es más oscuro que las superficies a propósito — sin eso la sombra de lo que flota no separa nada y los paneles desaparecen sobre el gráfico. */ --c-lienzo:#dde1e8; --c-l4:#e8ebf0; --c-l5:#d6dbe3; --c-l6:#b9c1cd; --c-l7:#8d97a6; --c-l8:#5c6676; --c-l9:#333c4a; --c-l10:#14181f; /* Semánticos oscuros (contraste medido sobre --c-n1) */ --c-gana-d:#2ec48d; /* 8.7:1 */ --c-pierde-d:#f0524d; /* 5.6:1 */ --c-aviso-d:#e8a33d; /* 9.0:1 */ --c-guardian-d:#8f7ae6; /* 5.6:1 · la voz de la plataforma, no del mercado */ /* EL ACENTO DE LA CASA. 4.8:1 · lo elegido y lo que TÚ accionas. NO EXISTE EN EL GRÁFICO, y esto es lo único que hay que recordar de él: en candy2 el acento y la vela bajista eran el mismo hexadecimal, así que un color significaba «marca» y «el precio cae» a la vez — o sea, nada. Aquí lleva únicamente cosas SIN dato: el logotipo, el anillo de foco, lo que está elegido y el canto del panel abierto. Nunca un estado, nunca una vela. Es magenta y no azul porque el magenta era el único tono libre de la paleta semántica (verde gana, rojo pierde, ámbar avisa, morado es el guardián, azul informa), y porque lleva componente azul: un protanopo o un deuteranopo lo separa del rojo, cosa que un rojo-naranja no consigue. El asesor de diseño propuso #c2447e. Da 4.09:1 y lo habría tumbado `contraste.py`. Se midió antes de creérselo. */ --c-marca-d:#d1508b; --c-info-d:#6fa8c7; --c-gana-l:#0d7f58; --c-pierde-l:#c0322d; --c-aviso-l:#96590a; --c-guardian-l:#5c43c4; --c-marca-l:#a3245f; --c-info-l:#1d6a8c; } :root, [data-tema="oscuro"] { color-scheme: dark; --sup-canvas:var(--c-n0); --sup-0:var(--c-n1); --sup-1:var(--c-n2); --sup-2:var(--c-n3); --sup-3:var(--c-n4); --txt-1:var(--c-n10); /* el dato que importa */ --txt-2:var(--c-n9); /* dato normal */ --txt-3:var(--c-n8); /* etiqueta, unidad, contexto */ --txt-4:var(--c-n7); /* apagado. Prohibido para cifras */ --linea-1:rgba(255,255,255,.07); --linea-2:rgba(255,255,255,.12); --linea-3:rgba(255,255,255,.22); --rejilla:rgba(255,255,255,.045); --gana:var(--c-gana-d); --pierde:var(--c-pierde-d); --aviso:var(--c-aviso-d); /* LA VELA NO ES EL DINERO. Hoy valen lo mismo, y a propósito: lo que se separa es el CANAL, no el color. Una vela que sube y un P/L en verde son dos cosas distintas —una es el mercado, la otra eres tú— y con un solo token no se puede tocar una sin tocar la otra. Es la lección que candy2 dejó escrita en su propio CSS y lo que le permitió tener velas hueca/sólida en claro. */ --vela-sube:var(--c-gana-d); --vela-baja:var(--c-pierde-d); --guardian:var(--c-guardian-d); --marca:var(--c-marca-d); --info:var(--c-info-d); --gana-f:color-mix(in srgb,var(--gana) 16%,transparent); --pierde-f:color-mix(in srgb,var(--pierde) 16%,transparent); --aviso-f:color-mix(in srgb,var(--aviso) 16%,transparent); --guardian-f:color-mix(in srgb,var(--guardian) 16%,transparent); --marca-f:color-mix(in srgb,var(--marca) 18%,transparent); /* LA RECETA DE LO QUE FLOTA, medida sobre candy2 en producción. Son tres ingredientes y ninguno sobra: una superficie casi opaca (94 %) con desenfoque por detrás, un borde de 1 px muy tenue, y una sombra GRANDE y MUY suave —40 px de difuminado al 14 %—. Esa sombra es lo que hace que una tarjeta parezca posada sobre el gráfico en vez de pegada a él, y es lo único de la lista que no se puede imitar con un borde. */ --flota-fondo:color-mix(in srgb,var(--c-n2) 94%,transparent); --r-flota:14px; --sombra-flota:0 14px 40px rgba(0,0,0,.5); --sombra-modal:0 24px 64px rgba(0,0,0,.6); /* El resplandor del botón que mueve el dinero: del color del acento, ancho y bajo. Es lo que lo levanta de la pantalla sin subirle el contraste. */ --brillo-acento:0 12px 34px color-mix(in srgb,var(--c-marca-d) 34%,transparent); /* Un solo anillo de foco en todo el producto: con dinero delante, saber dónde está el teclado no es accesibilidad, es no mandar la orden equivocada. */ --foco:0 0 0 2px var(--sup-0), 0 0 0 4px var(--c-marca-d); } [data-tema="claro"] { color-scheme: light; /* EL LIENZO ES MÁS OSCURO QUE LO QUE FLOTA, y esto es lo que hace que el tema claro funcione. Estaba al revés —canvas blanco puro y paneles blanco puro— y los paneles desaparecían sobre el gráfico: solo los distinguía el borde de 1 px. candy2 lo resuelve igual (fondo #dde1e8, paneles #f9fafc): la separación la hace la SOMBRA, y para que la sombra se vea tiene que caer sobre algo que no sea blanco. Es el `#dde1e8` de candy2. Con él, lo único que se lee DIRECTAMENTE sobre el lienzo —las etiquetas del eje del gráfico— tenía 4,43:1 con `--txt-3`, por debajo del mínimo de la casa. La solución no fue aclarar el fondo sino **subir el texto del eje a `--txt-2`**, que da 8,5:1: el eje se lee mejor Y el fondo separa. Medido, no estimado. */ --sup-canvas:var(--c-lienzo); --sup-0:var(--c-l1); --sup-1:var(--c-l2); --sup-2:var(--c-l3); --sup-3:var(--c-l4); --txt-1:var(--c-l10); --txt-2:var(--c-l9); --txt-3:var(--c-l8); --txt-4:var(--c-l7); --linea-1:rgba(10,14,22,.09); --linea-2:rgba(10,14,22,.14); --linea-3:rgba(10,14,22,.28); --rejilla:rgba(10,14,22,.06); --gana:var(--c-gana-l); --pierde:var(--c-pierde-l); --aviso:var(--c-aviso-l); --vela-sube:var(--c-gana-l); --vela-baja:var(--c-pierde-l); --guardian:var(--c-guardian-l); --marca:var(--c-marca-l); --info:var(--c-info-l); --gana-f:color-mix(in srgb,var(--gana) 12%,transparent); --pierde-f:color-mix(in srgb,var(--pierde) 12%,transparent); --aviso-f:color-mix(in srgb,var(--aviso) 14%,transparent); --guardian-f:color-mix(in srgb,var(--guardian) 12%,transparent); --marca-f:color-mix(in srgb,var(--marca) 12%,transparent); --flota-fondo:color-mix(in srgb,var(--c-l2) 94%,transparent); --r-flota:14px; /* La de candy2, literal: `0 14px 40px rgba(15,25,50,.14)`. */ --sombra-flota:0 14px 40px rgba(15,25,50,.14); --sombra-modal:0 24px 64px rgba(16,24,40,.18); --brillo-acento:0 12px 34px color-mix(in srgb,var(--c-marca-l) 30%,transparent); --foco:0 0 0 2px var(--sup-1), 0 0 0 4px var(--c-marca-l); } /* =========================================================================== LOS OTROS DOS TEMAS =========================================================================== candy2 tiene cuatro y Kike los usa: no es decoración, es que a distintas horas y con distinta luz se mira mejor con uno o con otro. Los dos de aquí abajo son los suyos, con los contrastes MEDIDOS sobre su propio fondo — no heredados del oscuro, que tiene otro. Y una regla que se mantiene en los cuatro: el acento NO existe en el gráfico. En «candy» eso obliga a un cuidado extra, porque allí el rosa es a la vez la marca y la vela bajista… en candy2. Aquí no: la vela bajista lee `--vela-baja`, que en este tema es un rosa DISTINTO del acento. Un color que significa «marca» y «el precio cae» a la vez no significa nada. */ /* --- CANDY: oscuro con la casa dentro ------------------------------------- */ [data-tema="candy"] { color-scheme: dark; --sup-canvas:#06070c; --sup-0:#0a0c14; --sup-1:#0f121c; --sup-2:#161a26; --sup-3:#1d2231; --txt-1:#eef1f8; --txt-2:#c6ccdb; --txt-3:#8b93a8; --txt-4:#5d6478; --linea-1:rgba(126,232,250,.06); --linea-2:rgba(126,232,250,.13); --linea-3:rgba(126,232,250,.24); --rejilla:rgba(126,232,250,.055); /* Contrastes sobre --sup-canvas (#06070c), medidos: */ --gana:#4ea1ff; /* 7.5:1 · en este tema el alza es AZUL, como en candy2 */ --pierde:#f2494b; /* 5.6:1 */ --aviso:#ffb547; /* 11.5:1 */ --guardian:#c9a3ff; /* 9.7:1 */ --marca:#ff3d81; /* 6.0:1 · el rosa de la casa */ --info:#7ee8fa; /* 14.2:1 */ /* LA VELA BAJISTA ES EL ROSA, y NO es el mismo token que la marca: en candy2 comparten hexadecimal y por eso allí el acento no puede significar nada dentro del gráfico. Aquí son dos cosas y se pueden mover por separado. */ --vela-sube:#4ea1ff; --vela-baja:#ff5c92; --gana-f:color-mix(in srgb,var(--gana) 16%,transparent); --pierde-f:color-mix(in srgb,var(--pierde) 16%,transparent); --aviso-f:color-mix(in srgb,var(--aviso) 16%,transparent); --guardian-f:color-mix(in srgb,var(--guardian) 16%,transparent); --marca-f:color-mix(in srgb,var(--marca) 18%,transparent); --flota-fondo:color-mix(in srgb,#0f121c 92%,transparent); --r-flota:14px; --sombra-flota:0 14px 40px rgba(0,0,0,.55); --sombra-modal:0 24px 64px rgba(0,0,0,.7); --brillo-acento:0 12px 34px rgba(255,61,129,.34); --foco:0 0 0 2px var(--sup-0), 0 0 0 4px #ff3d81; } /* --- MATRIX: verde sobre negro, y la letra en mono ------------------------- */ [data-tema="matrix"] { color-scheme: dark; --sup-canvas:#000600; --sup-0:#01120a; --sup-1:#01160c; --sup-2:#03210f; --sup-3:#052d15; --txt-1:#b6ffcf; --txt-2:#8fe8b4; --txt-3:#4fd88a; --txt-4:#2c8f5c; --linea-1:rgba(0,255,128,.10); --linea-2:rgba(0,255,128,.22); --linea-3:rgba(0,255,128,.45); --rejilla:rgba(0,255,128,.09); /* Contrastes sobre --sup-canvas (#000600), medidos: */ --gana:#00ff88; /* 15.3:1 */ --pierde:#f2494b; /* 5.7:1 · el rojo NO se vuelve verde: perder es perder */ --aviso:#d4ff5c; /* 17.8:1 */ --guardian:#9fd8e8; /* 13.1:1 */ --marca:#00ff88; /* 15.3:1 */ --info:#57ffe0; /* 16.4:1 */ --vela-sube:#00ff88; --vela-baja:#f2494b; --gana-f:color-mix(in srgb,var(--gana) 14%,transparent); --pierde-f:color-mix(in srgb,var(--pierde) 16%,transparent); --aviso-f:color-mix(in srgb,var(--aviso) 14%,transparent); --guardian-f:color-mix(in srgb,var(--guardian) 16%,transparent); --marca-f:color-mix(in srgb,var(--marca) 16%,transparent); --flota-fondo:color-mix(in srgb,#01160c 92%,transparent); --r-flota:14px; --sombra-flota:0 14px 40px rgba(0,0,0,.65); --sombra-modal:0 24px 64px rgba(0,0,0,.8); --brillo-acento:0 12px 34px rgba(0,255,136,.28); --foco:0 0 0 2px var(--sup-0), 0 0 0 4px #00ff88; /* Toda la letra en mono. Es lo que hace que este tema sea este tema. */ --tipo:var(--tipo-mono); } /* --- TIPOGRAFÍA ------------------------------------------------------------ Una familia. Los números NO van en monoespaciada: `tabular-nums` + `slashed-zero` alinea igual y ahorra ~12 % de anchura, y aquí la anchura es presupuesto (una columna de dinero de más son 88 px que la tabla no tiene). La mono queda para identificadores: ticket, id de orden, hash. */ :root { --tipo:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif; --tipo-mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace; /* Cada tamaño trae su interlineado. Nunca se eligen por separado. */ --t-11:11px; --lh-11:14px; /* etiqueta, unidad, micro-copia */ --t-12:12px; --lh-12:16px; /* dato secundario, tabla ultradensa */ --t-13:13px; --lh-13:18px; /* CUERPO Y DATO. El tamaño por defecto */ --t-15:15px; --lh-15:22px; --t-18:18px; --lh-18:24px; /* título de panel */ --t-22:22px; --lh-22:28px; /* cifra principal de tarjeta */ --t-28:28px; --lh-28:34px; /* la cifra del disparo */ --t-36:36px; --lh-36:42px; /* solo fuera de la operativa */ --peso-normal:400; --peso-dato:500; --peso-fuerte:600; /* 700 no existe: en 28 filas, si todo destaca no destaca nada. */ --track-etiqueta:.04em; } /* --- ESPACIO, RADIO, ALTURAS ---------------------------------------------- */ :root { --e-1:2px; --e-2:4px; --e-3:6px; --e-4:8px; --e-5:12px; --e-6:16px; --e-7:20px; --e-8:24px; --e-9:32px; --e-10:40px; --e-11:48px; --e-12:64px; /* Radios pequeños a propósito. El 14 px de candy2 a esta densidad come píxeles útiles y da aire de app de consumo. El gráfico no tiene radio: es un plano cartesiano, no una tarjeta. */ --r-0:0; --r-1:3px; --r-2:6px; --r-3:10px; --r-max:999px; --borde:1px; --alto-denso:24px; --alto-normal:32px; --alto-ancho:40px; --fila-ultra:22px; --fila-densa:28px; --fila-comoda:36px; } /* --- MOVIMIENTO ------------------------------------------------------------ · Un arrastre NO tiene curva: el stop va donde está el ratón, 0 ms. Suavizarlo es mentir sobre el precio que estás poniendo. · Un número NO se anima nunca (nada de contar hacia arriba): sugiere que el valor pasó por sitios por los que no pasó. · Un solo elemento con movimiento continuo en pantalla: el gráfico. */ :root { --v-control:80ms; --v-panel:120ms; --v-vista:200ms; --v-pulso:600ms; /* el pulso del guardián. UNA vez al día, sin bucle */ --curva:cubic-bezier(.2,0,0,1); } @media (prefers-reduced-motion: reduce){ :root{--v-control:0ms;--v-panel:0ms;--v-vista:0ms;--v-pulso:0ms} *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;transition-duration:.001ms!important} } /* --- LAS TRAMAS DEL SISTEMA ------------------------------------------------ No son decoración: son el canal que separa HECHO de PRONÓSTICO sin color. Van aquí porque deben ser idénticas en cien pantallas: si en una el rayado va a 45° y en otra a 30°, deja de ser un código y pasa a ser un adorno. */ :root { --trama-proyectado:repeating-linear-gradient(45deg,currentColor 0 2px,transparent 2px 6px); --trama-desconocido:repeating-linear-gradient(-45deg,var(--txt-4) 0 1px,transparent 1px 5px); --guion-proyectado:5 4; /* algo que puede no ocurrir */ --guion-guardian:6 3 1 3; /* punto-raya: único en el sistema */ --guion-referencia:2 3; /* informativo, no accionable */ }