/* ============================================================ TOOLONIUM — Design tokens (fuente de verdad) Versión 1.0 · 2026-10-10 · TecnoInfante SpA Uso: Modo oscuro = default. Modo claro con o con el sistema en claro cuando no hay data-theme. ============================================================ */ /* ---------- Colores de marca (NO cambian entre modos) ---------- */ :root { --tl-brand: #2B45FF; /* Azul voltaje · navegación, links, acción primaria */ --tl-brand-hover: #1F36E0; --tl-brand-ink: #FFFFFF; /* texto sobre --tl-brand */ --tl-signal: #C6F000; /* Lima señal · RESULTADO, éxito, highlight */ --tl-signal-ink: #16181D; /* texto sobre --tl-signal (nunca blanco) */ --tl-navy: #0B1220; /* fondo del app icon y del modo oscuro */ --tl-ink: #16181D; /* tinta del logo en claro */ /* ---------- Tipografía ---------- */ --tl-font-display: "Manrope", "Inter", system-ui, sans-serif; /* títulos, cifras grandes */ --tl-font-body: "Inter", system-ui, -apple-system, sans-serif; /* texto, UI */ --tl-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* fórmulas, código, símbolos de familia */ --tl-text-hero: clamp(40px, 6vw, 64px); /* Manrope 800, lh 1.05, ls -0.03em */ --tl-text-h1: clamp(28px, 4vw, 36px); /* Manrope 800, lh 1.15, ls -0.02em */ --tl-text-h2: 22px; /* Manrope 700 */ --tl-text-h3: 17px; /* Inter 600 */ --tl-text-body: 15px; /* Inter 400, lh 1.6 */ --tl-text-small: 13px; --tl-text-label: 11px; /* Inter 600, uppercase, ls .08em */ --tl-text-result: clamp(48px, 8vw, 72px); /* Manrope 800, tabular-nums */ /* ---------- Forma y espacio ---------- */ --tl-radius-sm: 8px; /* inputs, chips */ --tl-radius-md: 12px; /* cards, paneles */ --tl-radius-lg: 16px; /* hero, panel resultado */ --tl-radius-pill: 999px; --tl-space-1: 4px; --tl-space-2: 8px; --tl-space-3: 12px; --tl-space-4: 16px; --tl-space-5: 24px; --tl-space-6: 32px; --tl-space-7: 48px; --tl-space-8: 72px; --tl-maxw: 1120px; --tl-ring: 0 0 0 3px color-mix(in srgb, var(--tl-brand) 25%, transparent); /* focus */ /* ---------- Familias (fichas tipo tabla periódica) ---------- Cada familia tiene tinte de fondo + color de símbolo/texto. Se redefinen abajo por modo. */ } /* ============================================================ MODO OSCURO (default) ============================================================ */ :root, :root[data-theme="dark"] { color-scheme: dark; --tl-bg: #0B1220; /* página */ --tl-surface: #1A2338; /* cards, header, paneles */ --tl-surface-2: #223052; /* inputs, hover, superficie elevada */ --tl-border: #2D3855; --tl-border-strong: #3E4B6E; --tl-text: #F8FAFC; /* alto */ --tl-text-muted: #B4BBC7; /* medio · subido desde #9CA3AF por contraste */ --tl-text-faint: #7C8597; /* labels, placeholders */ --tl-link: #8F9BFF; /* azul legible sobre navy; el botón sigue siendo --tl-brand */ --tl-brand-soft: #1B2560; /* fondo tenue azul (badges, tab activa) */ --tl-signal-soft: #2B3A0E; /* fondo tenue lima */ --tl-result-bg: #16211A; /* panel que contiene el bloque lima */ --tl-result-border: #3F5A12; --tl-fam-fi-bg: #16214A; --tl-fam-fi-fg: #8FA0FF; /* Finance · azul */ --tl-fam-dv-bg: #1F1D4A; --tl-fam-dv-fg: #A79DFF; /* Developer · índigo */ --tl-fam-im-bg: #2A1B45; --tl-fam-im-fg: #C89BFF; /* Image · lila */ --tl-fam-mk-bg: #3C2114; --tl-fam-mk-fg: #FF9B5E; /* Marketing · naranja */ --tl-fam-cv-bg: #12301F; --tl-fam-cv-fg: #4ADE80; /* Convert · verde */ --tl-fam-gn-bg: #2A3611; --tl-fam-gn-fg: #C6F000; /* Generate · lima */ --tl-fam-ev-bg: #3A2D0C; --tl-fam-ev-fg: #FACC15; /* Everyday · ámbar (reservada) */ --tl-fam-lo-bg: #0F2F33; --tl-fam-lo-fg: #5EEAD4; /* Local · teal (reservada) */ } /* ============================================================ MODO CLARO ============================================================ */ :root[data-theme="light"] { color-scheme: light; --tl-bg: #F5F5F1; --tl-surface: #FFFFFF; --tl-surface-2: #F0F0EA; --tl-border: #E5E5DE; --tl-border-strong: #D1D1C8; --tl-text: #16181D; --tl-text-muted: #5F6470; --tl-text-faint: #9A9DA4; --tl-link: #2B45FF; --tl-brand-soft: #E8EEFF; --tl-signal-soft: #F0FCE2; --tl-result-bg: #F6FCEB; --tl-result-border: #D7F08E; --tl-fam-fi-bg: #E8EEFF; --tl-fam-fi-fg: #2B45FF; --tl-fam-dv-bg: #EDEBFF; --tl-fam-dv-fg: #5B4BE0; --tl-fam-im-bg: #F3EAFF; --tl-fam-im-fg: #8A3FD9; --tl-fam-mk-bg: #FFEBDD; --tl-fam-mk-fg: #D9561A; --tl-fam-cv-bg: #E3F6E9; --tl-fam-cv-fg: #15803D; --tl-fam-gn-bg: #F0FCE2; --tl-fam-gn-fg: #4D7C0F; --tl-fam-ev-bg: #FFF4D6; --tl-fam-ev-fg: #A16207; --tl-fam-lo-bg: #E0F7F5; --tl-fam-lo-fg: #0F766E; } /* Sistema en claro y sin data-theme → claro */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --tl-bg: #F5F5F1; --tl-surface: #FFFFFF; --tl-surface-2: #F0F0EA; --tl-border: #E5E5DE; --tl-border-strong: #D1D1C8; --tl-text: #16181D; --tl-text-muted: #5F6470; --tl-text-faint: #9A9DA4; --tl-link: #2B45FF; --tl-brand-soft: #E8EEFF; --tl-signal-soft: #F0FCE2; --tl-result-bg: #F6FCEB; --tl-result-border: #D7F08E; --tl-fam-fi-bg: #E8EEFF; --tl-fam-fi-fg: #2B45FF; --tl-fam-dv-bg: #EDEBFF; --tl-fam-dv-fg: #5B4BE0; --tl-fam-im-bg: #F3EAFF; --tl-fam-im-fg: #8A3FD9; --tl-fam-mk-bg: #FFEBDD; --tl-fam-mk-fg: #D9561A; --tl-fam-cv-bg: #E3F6E9; --tl-fam-cv-fg: #15803D; --tl-fam-gn-bg: #F0FCE2; --tl-fam-gn-fg: #4D7C0F; --tl-fam-ev-bg: #FFF4D6; --tl-fam-ev-fg: #A16207; --tl-fam-lo-bg: #E0F7F5; --tl-fam-lo-fg: #0F766E; } } /* ============================================================ Base mínima (opcional, pero recomendada) ============================================================ */ html { background: var(--tl-bg); color: var(--tl-text); } body { margin: 0; font-family: var(--tl-font-body); font-size: var(--tl-text-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, .tl-display { font-family: var(--tl-font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } h3 { font-family: var(--tl-font-body); font-weight: 600; margin: 0; } a { color: var(--tl-link); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--tl-signal); color: var(--tl-signal-ink); } :focus-visible { outline: 2px solid var(--tl-brand); outline-offset: 2px; } code, pre, .tl-mono { font-family: var(--tl-font-mono); }