/* ========================================================================== Design tokens · Dot · la única fuente de verdad -------------------------------------------------------------------------- REGLA: este es el único archivo donde se permiten valores crudos (px, hex, rgb, segundos). Todo lo demás —components/, pages/, utilities.css— consume estas variables. Si necesitas un valor que no está acá, el valor no falta: falta el token. La paleta, la tipografía y la curva de movimiento salen de la landing (landing/index.html), que es donde vive la identidad. El portal adopta la marca entera y adapta la densidad: es una herramienta de trabajo, no una página de venta, así que los radios son más contenidos y las sombras más discretas que allá. Legibilidad: el rango de usuarios es 18-100. Nada de texto por debajo de 12px. Botones, campos y controles sueltos van a 44px. La navegación de la barra lateral es la excepción: son enlaces apilados que ocupan todo el ancho, así que 38px de alto ya da un objetivo holgado y evita que el menú se coma la pantalla. ========================================================================== */ :root { /* ---------- Marca ---------- Los tres puntos del logo. Se usan como acento de acción (lima) y como tintes de categoría (los tres juntos). */ --brand-lime: 169 244 19; /* #A9F413 */ --brand-blue: 85 140 240; /* #558CF0 */ --brand-red: 246 47 47; /* #F62F2F */ --brand-slate: 90 115 142; /* #5A738E */ --brand-ink: 10 10 10; /* #0A0A0A */ --brand-paper: 251 251 249; /* #FBFBF9 */ /* ---------- Fondos ---------- */ --bg: 251 251 249; /* paper */ --bg-elev: 255 255 255; --bg-subtle: 246 246 243; /* ink 2% sobre paper */ --bg-muted: 237 237 233; /* ink 6% sobre paper */ --bg-inverted: 10 10 10; /* ---------- Texto ---------- Cuatro escalones de énfasis, todos por encima de 4.5:1 sobre paper. Se calcularon bajando la luminosidad del slate de marca sin tocarle el tono, así que la familia se mantiene y ninguno queda por debajo del mínimo para texto normal. El más tenue aterriza justo en el valor de marca: por debajo de ahí ya no es texto, es decoración. */ --fg: 10 10 10; /* ink · 19.1:1 */ --fg-muted: 69 88 109; /* #45586D · 7.1:1 */ --fg-subtle: 82 104 129; /* #526881 · 5.5:1 */ --fg-faint: 90 115 142; /* #5A738E slate · 4.7:1 */ --fg-inverted: 255 255 255; /* ---------- Bordes ---------- Translúcidos sobre ink, como en la landing, pero resueltos a un valor sólido para poder usarlos en `border-color` sin componer capas. */ --border: 230 230 226; /* ink 10% */ --border-strong: 209 210 205; /* ink 20% */ /* ---------- Acento ---------- Lima con texto ink: es la acción principal, igual que el "Get started" de la landing. Lima como *texto* se lava sobre casi-blanco, así que el lima siempre va de fondo y encima va ink. */ --accent: 169 244 19; --accent-fg: 10 10 10; --accent-hover: 183 247 56; /* ---------- Semánticos ---------- Error e información toman el rojo y el azul de marca. El éxito usa un verde propio: el lima ya significa "acción", y si también significara "salió bien" dejaría de decir ninguna de las dos cosas. */ --success: 21 134 53; /* #158635 · 4.5:1 */ --success-soft: 222 247 229; --warning: 162 103 4; /* #A26704 · 4.5:1 */ --warning-soft: 254 243 199; --danger: 224 36 36; /* rojo de marca, un punto más oscuro para texto */ --danger-soft: 254 228 228; --info: 43 104 226; /* azul de marca, un punto más oscuro para texto */ --info-soft: 226 235 253; /* El valor puro de marca, para puntos y rellenos donde no hay texto encima. */ --danger-pure: 246 47 47; --info-pure: 85 140 240; /* ---------- Gráficas ---------- Chart.js pinta sobre y no hereda ni una regla CSS. Si estos valores no viven acá, reaparecen sueltos dentro de cada página: es exactamente lo que pasaba antes en usage.html, con una paleta de diez hexadecimales copiada de otro sistema. El puente que los aplica es js/chart-theme.js. La serie categórica son los tres puntos del logo más el slate — el mismo recurso que ya usa la marca para separar categorías. Cuatro es el tope a propósito: si una gráfica necesita una quinta serie, lo que sobra no es color, es la gráfica. Una caja o una barra se dibuja con un trazo de 1px: es un objeto gráfico, y por debajo de 3:1 contra el fondo deja de verse. El lima de marca da 1.30:1 sobre papel —desaparece—, así que la serie usa un lima un punto más oscuro, igual que --danger y --info bajan un punto el rojo y el azul para poder usarse como tinta. Sobre ink no hace falta: ahí el lima de marca da 14.7:1 y vuelve a ser el de la landing. */ --series-1: 85 140 240; /* #558CF0 blue · 3.17:1 */ --series-2: 110 158 12; /* #6E9E0C lime · 3.09:1 */ --series-3: 246 47 47; /* #F62F2F red · 3.78:1 */ --series-4: 90 115 142; /* #5A738E slate · 4.74:1 */ /* El relleno sólo tiñe; el que dibuja la forma es el borde. */ --series-fill: 0.18; /* Alto de una gráfica dentro de una tarjeta. Fijo para que la tarjeta no salte entre el esqueleto y el primer dibujo. */ --chart-h: 256px; --chart-h-sm: 180px; /* ---------- Foco ---------- Ink sobre claro: el contraste máximo posible. Un anillo lima sobre casi-blanco se pierde, y el foco visible es lo que sostiene la navegación por teclado. */ --ring: 10 10 10; /* ---------- Sombras ---------- Más contenidas que en la landing: en una pantalla con veinte tarjetas, su sombra de 70px convierte la página en una cama de agua. */ --shadow-soft: 0 1px 2px 0 rgb(10 10 10 / 0.04), 0 2px 8px -2px rgb(10 10 10 / 0.06); --shadow-elev: 0 12px 32px -8px rgb(10 10 10 / 0.12), 0 4px 12px -4px rgb(10 10 10 / 0.06); --shadow-pop: 0 30px 70px -25px rgb(10 10 10 / 0.35); --shadow-accent: 0 10px 30px -8px rgb(169 244 19 / 0.55); /* ---------- Espacio ---------- Base 4px. Con la escala tipográfica más grande, el ritmo se mueve un punto hacia arriba: lo que antes respiraba con 8px ahora pide 10 o 12. */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---------- Tipografía ---------- Manrope, como la landing. Sube el suelo: la base pasa de 13 a 15px y nada baja de 12px. Se ven menos filas por pantalla; a cambio deja de hacer falta buena vista. */ --text-xs: 12px; --leading-xs: 16px; --text-sm: 13px; --leading-sm: 18px; --text-md: 14px; --leading-md: 20px; --text-base: 15px; --leading-base: 23px; --text-lg: 17px; --leading-lg: 25px; --text-xl: 20px; --leading-xl: 28px; --text-2xl: 24px; --leading-2xl: 32px; --text-3xl: 30px; --leading-3xl: 38px; --text-4xl: 38px; --leading-4xl: 46px; /* Se conserva por compatibilidad con código que lo pide, pero ya no baja de 12px: no hay texto más chico en el producto. */ --text-2xs: 12px; --leading-2xs: 16px; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --tracking-tight: -0.02em; --tracking-wide: 0.08em; --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---------- Radio ---------- La landing es muy redonda (24-28px). Acá se contiene: lo que se pulsa es píldora, las superficies llevan un radio medio. */ --radius-xs: 6px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 999px; /* ---------- Altura mínima de lo que se pulsa ---------- 44px es el mínimo cómodo para un dedo, y también para una mano que ya no apunta tan fino. */ --tap: 44px; --tap-sm: 36px; --control: 44px; /* ---------- Movimiento ---------- La curva firma viene de la landing. Es la que da el frenado suave que hace que todo parezca asentarse en vez de detenerse. */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --dur-fast: 0.15s; --dur: 0.2s; --dur-slow: 0.35s; --lift: -1px; /* elevación al hover en lo que se pulsa */ /* ---------- Capas ---------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; /* ---------- Layout ---------- */ --header-h: 64px; --sidebar-w: 236px; --sidebar-collapsed: 76px; /* ---------- Decoración ---------- Los tres puntos del logo, difuminados de fondo. */ --aurora-1: radial-gradient(55% 45% at 12% 15%, rgb(169 244 19 / 0.22), transparent 70%); --aurora-2: radial-gradient(60% 50% at 88% 5%, rgb(85 140 240 / 0.16), transparent 70%); --aurora-3: radial-gradient(55% 55% at 50% 100%, rgb(246 47 47 / 0.10), transparent 70%); } .dark { --bg: 10 10 10; /* ink */ --bg-elev: 17 17 17; /* #111 */ --bg-subtle: 23 23 23; --bg-muted: 36 36 36; --bg-inverted: 255 255 255; /* Mismos cuatro escalones, recalculados contra ink. Ninguno baja de 4.5:1. */ --fg: 255 255 255; /* 19.8:1 */ --fg-muted: 154 170 187; /* 8.3:1 */ --fg-subtle: 122 143 165; /* 5.9:1 */ --fg-faint: 108 122 137; /* #6C7A89 · 4.5:1 */ --fg-inverted: 10 10 10; --border: 40 40 40; /* blanco 10% sobre ink */ --border-strong: 71 71 71; /* El lima se sostiene igual de bien sobre negro: no cambia. */ --accent: 169 244 19; --accent-fg: 10 10 10; --accent-hover: 190 248 74; --success: 101 226 148; --success-soft: 18 64 36 / 0.55; --warning: 250 204 21; --warning-soft: 82 57 8 / 0.5; --danger: 248 113 113; --danger-soft: 92 22 22 / 0.5; --info: 129 175 255; --info-soft: 22 48 102 / 0.5; --danger-pure: 246 47 47; --info-pure: 85 140 240; /* Sobre ink el rojo puro quema y el slate se apaga. La serie toma los mismos tonos que ya usan los estados en oscuro; el lima se sostiene igual de bien y no cambia. El relleno sube un punto porque sobre negro un 18% casi no se ve. */ --series-1: 129 175 255; /* 8.97:1 */ --series-2: 169 244 19; /* 14.74:1 · el lima de marca, sin bajar */ --series-3: 248 113 113; /* 7.16:1 */ --series-4: 154 170 187; /* 8.34:1 */ --series-fill: 0.22; --ring: 255 255 255; --shadow-soft: 0 1px 2px 0 rgb(0 0 0 / 0.5), 0 2px 8px -2px rgb(0 0 0 / 0.5); --shadow-elev: 0 12px 32px -8px rgb(0 0 0 / 0.65), 0 4px 12px -4px rgb(0 0 0 / 0.5); --shadow-pop: 0 30px 70px -25px rgb(0 0 0 / 0.9); --shadow-accent: 0 10px 30px -8px rgb(169 244 19 / 0.4); --aurora-1: radial-gradient(55% 45% at 12% 15%, rgb(169 244 19 / 0.16), transparent 70%); --aurora-2: radial-gradient(60% 50% at 88% 5%, rgb(85 140 240 / 0.14), transparent 70%); --aurora-3: radial-gradient(55% 55% at 50% 100%, rgb(246 47 47 / 0.10), transparent 70%); }