/* ============================================================================ Matchitfy — tokens ============================================================================ Los nombres son FUNCIONALES, no descriptivos. `--ok` y no `--green`: el dashboard va a heredar esta hoja y ahi el verde significa "concilia", no "verde". Un token llamado por su color obliga a renombrarlo el dia que el color cambie, y nadie lo renombra: se queda mintiendo. EL VERDE ES LA MARCA Y ES EL ESTADO CONCILIADO, a proposito. En software financiero el verde ya significa "cuadra". Usarlo tambien como acento de marca hace que el color de la marca signifique literalmente la promesa del producto. El ambar queda reservado para la brecha, que es lo que el producto existe para encontrar. oklch para que las variantes claras y oscuras tengan luminosidad perceptual pareja. En sRGB el mismo croma se ve mas sucio en oscuro. ============================================================================ */ :root { color-scheme: light dark; /* ── Superficies ─────────────────────────────────────────────────────── */ --bg: oklch(0.985 0.004 250); /* fondo de pagina */ --surface: oklch(1 0 0 ); /* tarjeta sobre el fondo */ --sunk: oklch(0.955 0.006 250); /* bloque hundido, CTA */ /* ── Texto ───────────────────────────────────────────────────────────── */ --ink: oklch(0.24 0.014 250); /* primario */ --ink-2: oklch(0.48 0.012 250); /* secundario */ --line: oklch(0.895 0.008 250); /* bordes y reglas */ /* ── Semanticos ──────────────────────────────────────────────────────── */ --ok: oklch(0.52 0.13 158); /* concilia */ --ok-soft: oklch(0.93 0.05 158); /* fondo de estado conciliado */ --gap: oklch(0.53 0.105 45); /* la brecha: lo que no cuadra */ --gap-soft: oklch(0.94 0.045 55); /* El azul de la casa. Es el unico token que NO es semantico de estado: pinta lo que tiene nombre propio y registro (la categoria, los mecanismos), que es como RemindLedger marca los suyos. Sale del cuadrado de `icon.svg` (#0065b4) para que la marca dibujada y la marca escrita sean el mismo azul. */ --mark: oklch(0.52 0.15 250); --mark-soft: oklch(0.94 0.04 250); /* fondo de pastilla */ /* ── Tipografia ──────────────────────────────────────────────────────── */ /* Fuentes del sistema a proposito en la landing: cero FOUT, cero FOIT, cero salto de layout. El producto SI va a querer una fuente propia, porque ahi se leen columnas de cifras durante horas, y ese es otro problema. */ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* ── Ritmo ───────────────────────────────────────────────────────────── */ --r: 6px; /* radio de control */ --r-lg: 10px; /* radio de tarjeta */ --gut: 24px; /* canal lateral */ --max: 1080px; } @media (prefers-color-scheme: dark) { :root { --bg: oklch(0.19 0.012 250); --surface: oklch(0.225 0.013 250); --sunk: oklch(0.245 0.013 250); --ink: oklch(0.955 0.006 250); --ink-2: oklch(0.74 0.011 250); --line: oklch(0.32 0.014 250); --ok: oklch(0.80 0.15 158); --ok-soft: oklch(0.30 0.05 158); --gap: oklch(0.80 0.10 55); --gap-soft: oklch(0.30 0.045 55); --mark: oklch(0.78 0.13 250); --mark-soft: oklch(0.30 0.05 250); } } /* Un selector explicito gana sobre la preferencia del sistema, en las dos direcciones. Todavia no hay conmutador de tema en la pagina; cuando lo haya, el script que estampa este atributo va SINCRONO en el y antes que cualquier otra cosa, o aparece el flash clasico: pinta claro y salta a oscuro. Ese script es la unica excepcion a `defer` en todo el sitio. */ /* `color-scheme` TAMBIEN, no solo los colores. Sin esta linea, alguien con el sistema en claro que elige el tema oscuro recibe una pagina oscura dentro de un navegador que sigue creyendose claro: el lienzo que se pinta ENTRE una pagina y la siguiente es blanco, las barras de scroll son claras y los controles de formulario tambien. El destello al navegar sale de ahi, no del documento: medido, el primer pintado de cada pagina ya trae contenido (FP = FCP), asi que dentro del documento no hay nada en blanco que ver. Medido el 2026-08-09: sistema en claro + tema oscuro elegido daba `color-scheme: light dark`, que resuelve a claro. */ :root[data-theme="dark"] { color-scheme: dark; --bg: oklch(0.19 0.012 250); --surface: oklch(0.225 0.013 250); --sunk: oklch(0.245 0.013 250); --ink: oklch(0.955 0.006 250); --ink-2: oklch(0.74 0.011 250); --line: oklch(0.32 0.014 250); --ok: oklch(0.80 0.15 158); --ok-soft: oklch(0.30 0.05 158); --gap: oklch(0.80 0.10 55); --gap-soft: oklch(0.30 0.045 55); --mark: oklch(0.78 0.13 250); --mark-soft: oklch(0.30 0.05 250); } :root[data-theme="light"] { color-scheme: light; --bg: oklch(0.985 0.004 250); --surface: oklch(1 0 0); --sunk: oklch(0.955 0.006 250); --ink: oklch(0.24 0.014 250); --ink-2: oklch(0.48 0.012 250); --line: oklch(0.895 0.008 250); --ok: oklch(0.52 0.13 158); --ok-soft: oklch(0.93 0.05 158); --gap: oklch(0.53 0.105 45); --gap-soft: oklch(0.94 0.045 55); --mark: oklch(0.52 0.15 250); --mark-soft: oklch(0.94 0.04 250); }