/* ============================================================ PureAnalyt — Design Tokens v2.0 · Fuente de verdad de la línea gráfica Aplica data-theme="dark" | "light" en . Ambos temas son de primera clase. ============================================================ */ :root { /* ---- Familias tipográficas ---- */ --font-display: "Schibsted Grotesk", system-ui, sans-serif; /* titulares, hero, números grandes */ --font-sans: "Hanken Grotesk", system-ui, sans-serif; /* texto, UI */ --font-mono: "JetBrains Mono", ui-monospace, monospace; /* datos, métricas, labels, código */ /* ---- Escala tipográfica (rem · base 16px) ---- */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-md: 0.9375rem; /* 15 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 3rem; /* 48 */ --text-5xl: 4rem; /* 64 */ --text-6xl: 5.25rem; /* 84 */ --leading-tight: 1.05; --leading-snug: 1.18; --leading-normal: 1.55; --tracking-tight: -0.025em; --tracking-snug: -0.01em; --tracking-wide: 0.16em; /* eyebrows / labels en mayúsculas */ /* ---- Espaciado (base 4px) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ---- Radios ---- */ --radius-xs: 5px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --radius-pill: 999px; /* ---- Movimiento ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.14s; --dur: 0.22s; --dur-slow: 0.42s; } /* ============================================================ TEMA OSCURO (modo instrumento) ============================================================ */ :root, [data-theme="dark"] { color-scheme: dark; /* Lienzo y superficies — slate frío, croma muy bajo */ --bg: #0b0e15; --bg-grad: radial-gradient(120% 90% at 50% -20%, #121726 0%, #0b0e15 58%); --panel: #12161f; --panel-2: #181d28; --panel-3: #1f2533; --line: rgba(226, 231, 247, 0.09); --line-strong: rgba(226, 231, 247, 0.17); /* Texto */ --ink: #e9edf7; --ink-2: #c0c8da; --muted: #8590a6; --muted-2: #5c6678; /* Marca — azul azure eléctrico + iris */ --brand: #5479ff; --brand-600: #6f8dff; --brand-700: #91a7ff; --brand-ink: #06091a; /* texto sobre superficies brand */ --iris: #9b73ff; --brand-soft: rgba(84, 121, 255, 0.14); --iris-soft: rgba(155, 115, 255, 0.14); /* Gradiente de marca (azure → iris) — uso medido */ --grad-brand: linear-gradient(105deg, #5479ff 0%, #9b73ff 100%); --grad-brand-soft: linear-gradient(105deg, rgba(84,121,255,.18) 0%, rgba(155,115,255,.18) 100%); /* Semánticos */ --success: #2fd296; --info: #5479ff; --warn: #f0a93b; --danger: #ff5e74; --success-soft: rgba(47, 210, 150, 0.13); --info-soft: rgba(84, 121, 255, 0.13); --warn-soft: rgba(240, 169, 59, 0.13); --danger-soft: rgba(255, 94, 116, 0.13); /* Paleta categórica para visualización (analitos) */ --viz-1: #5479ff; /* azure */ --viz-2: #2bc4d6; /* cian */ --viz-3: #2fd296; /* teal */ --viz-4: #9b73ff; /* iris */ --viz-5: #f0a93b; /* ámbar */ --viz-6: #ff6b9d; /* rosa */ /* Sombras + glow */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: 0 10px 28px rgba(0,0,0,0.5); --shadow-lg: 0 28px 64px rgba(0,0,0,0.6); --glow: 0 0 0 1px rgba(84,121,255,0.28), 0 12px 40px rgba(84,121,255,0.16); --ring: 0 0 0 3px var(--brand-soft); } /* ============================================================ TEMA CLARO (web / impresión) ============================================================ */ [data-theme="light"] { color-scheme: light; /* Lienzo y superficies — blanco frío, croma muy bajo */ --bg: #f4f6fb; --bg-grad: radial-gradient(120% 90% at 50% -20%, #ffffff 0%, #f4f6fb 58%); --panel: #ffffff; --panel-2: #eef1f8; --panel-3: #e4e9f4; --line: rgba(16, 22, 44, 0.10); --line-strong: rgba(16, 22, 44, 0.17); /* Texto */ --ink: #0e1320; --ink-2: #3a4256; --muted: #626b80; --muted-2: #8b93a6; /* Marca — azure algo más profundo para contraste sobre blanco */ --brand: #3a5cf0; --brand-600: #2e4ee0; --brand-700: #2640c4; --brand-ink: #ffffff; --iris: #7c4ff0; --brand-soft: rgba(58, 92, 240, 0.10); --iris-soft: rgba(124, 79, 240, 0.10); --grad-brand: linear-gradient(105deg, #3a5cf0 0%, #7c4ff0 100%); --grad-brand-soft: linear-gradient(105deg, rgba(58,92,240,.12) 0%, rgba(124,79,240,.12) 100%); /* Semánticos (ajustados a fondo claro) */ --success: #0f9d6b; --info: #3a5cf0; --warn: #c47a16; --danger: #df3b54; --success-soft: rgba(15, 157, 107, 0.11); --info-soft: rgba(58, 92, 240, 0.10); --warn-soft: rgba(196, 122, 22, 0.11); --danger-soft: rgba(223, 59, 84, 0.10); /* Paleta categórica (legible sobre claro) */ --viz-1: #3a5cf0; --viz-2: #0e9fc0; --viz-3: #0f9d6b; --viz-4: #7c4ff0; --viz-5: #d6881a; --viz-6: #e84d80; --shadow-sm: 0 1px 2px rgba(20,28,56,0.06); --shadow-md: 0 12px 32px rgba(20,28,56,0.09); --shadow-lg: 0 28px 64px rgba(20,28,56,0.13); --glow: 0 0 0 1px rgba(58,92,240,0.30), 0 14px 40px rgba(58,92,240,0.15); --ring: 0 0 0 3px var(--brand-soft); }