/* ================================================================= TALKPILOT · DESIGN TOKENS v1 ----------------------------------------------------------------- Sistema visual completo basado en la guía de marca aprobada. Todos los colores en OKLCH para garantizar percepción uniforme y un mapeo predecible a modo oscuro futuro. Convenciones: --brand-* color corporativo (azul TalkPilot) --signal-* atención / live / CTAs primarias (naranja) --ok / --err / --warn semántica --bg / --line / --ink-* superficies y tinta --font-* familias y escala tipográfica IMPORTANTE: este archivo se carga ANTES de custom.css. No tocar sin actualizar también la guía visual de TalkPilot v1. ================================================================= */ :root { /* -------- CORE · BRAND ---------------------------------------- */ --brand: oklch(0.42 0.09 255); --brand-ink: oklch(0.28 0.08 255); --brand-soft: oklch(0.95 0.02 255); /* -------- SIGNAL · live & attention -------------------------- */ --signal: oklch(0.7 0.17 55); --signal-ink: oklch(0.55 0.17 48); --signal-soft: oklch(0.96 0.03 65); /* -------- SEMÁNTICA ------------------------------------------ */ --ok: oklch(0.62 0.13 155); --ok-soft: oklch(0.96 0.04 155); --err: oklch(0.58 0.19 25); --err-soft: oklch(0.96 0.04 25); --warn: oklch(0.75 0.15 85); --warn-soft: oklch(0.97 0.05 85); /* -------- NEUTROS · superficies e ink ------------------------ */ --bg: oklch(0.99 0.005 260); --bg-sunken: oklch(0.97 0.005 260); --line: oklch(0.92 0.005 260); --ink: oklch(0.18 0.012 260); --ink-2: oklch(0.32 0.01 260); --ink-3: oklch(0.45 0.01 260); --ink-4: oklch(0.65 0.008 260); --ink-5: oklch(0.82 0.005 260); /* -------- TIPOGRAFÍA · familias ------------------------------ */ --font-ui: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-display: var(--font-ui); --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; /* -------- TIPOGRAFÍA · escala (px / line-height / tracking) -- */ --t-display: 72px; --t-display-lh: 0.98; --t-display-tr: -0.04em; --t-hero: 56px; --t-hero-lh: 1.02; --t-hero-tr: -0.035em; --t-xl: 36px; --t-xl-lh: 1.1; --t-xl-tr: -0.028em; --t-lg: 24px; --t-lg-lh: 1.2; --t-lg-tr: -0.02em; --t-md: 18px; --t-md-lh: 1.3; --t-md-tr: -0.015em; --t-sm: 13px; --t-sm-lh: 1.35; --t-sm-tr: -0.01em; --t-body: 14px; --t-body-lh: 1.5; --t-body-tr: -0.005em; --t-eyebrow: 11.5px; --t-eyebrow-lh: 1; --t-eyebrow-tr: 0.06em; /* -------- ELEVACIÓN · sombras (sutiles, hairline) ----------- */ --elev-0: none; --elev-1: 0 1px 0 oklch(0.85 0.005 260 / 0.5); --elev-2: 0 1px 2px oklch(0.18 0.012 260 / 0.06), 0 1px 0 oklch(0.85 0.005 260 / 0.4); --elev-3: 0 4px 12px oklch(0.18 0.012 260 / 0.08), 0 1px 0 oklch(0.85 0.005 260 / 0.4); /* -------- RADIOS --------------------------------------------- */ --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-pill: 9999px; /* -------- DURACIONES (animación) ----------------------------- */ --d-fast: 120ms; --d-normal: 220ms; --d-slow: 400ms; /* -------- ALIASES de retrocompatibilidad --------------------- */ /* Mantienen vivos los componentes legacy que usan brand-* y accent-* hasta que la migración página por página termine. NO usar en código nuevo. */ --brand-50: oklch(0.98 0.01 255); --brand-100: oklch(0.95 0.02 255); --brand-200: oklch(0.88 0.04 255); --brand-300: oklch(0.78 0.06 255); --brand-400: oklch(0.6 0.08 255); --brand-500: var(--brand); --brand-600: oklch(0.36 0.09 255); --brand-700: var(--brand-ink); --brand-800: oklch(0.22 0.07 255); --brand-900: oklch(0.16 0.05 255); --accent-50: var(--signal-soft); --accent-100: oklch(0.93 0.05 65); --accent-200: oklch(0.85 0.1 65); --accent-300: oklch(0.78 0.13 60); --accent-400: oklch(0.74 0.15 58); --accent-500: var(--signal); --accent-600: oklch(0.62 0.17 50); --accent-700: var(--signal-ink); --accent-800: oklch(0.45 0.15 45); --accent-900: oklch(0.35 0.12 45); } /* -------------------------------------------------------------- */ /* MODO OSCURO (preparado, off por defecto) */ /* Activar con cuando estemos listos. */ /* -------------------------------------------------------------- */ [data-theme="dark"] { --bg: oklch(0.16 0.01 260); --bg-sunken: oklch(0.13 0.01 260); --line: oklch(0.26 0.01 260); --ink: oklch(0.96 0.005 260); --ink-2: oklch(0.85 0.005 260); --ink-3: oklch(0.7 0.005 260); --ink-4: oklch(0.55 0.008 260); --ink-5: oklch(0.4 0.01 260); --brand-soft: oklch(0.25 0.05 255); --signal-soft: oklch(0.3 0.08 60); } /* -------------------------------------------------------------- */ /* UTILIDADES tipográficas (clases de la escala) */ /* -------------------------------------------------------------- */ .t-display { font-family: var(--font-display); font-size: var(--t-display); line-height: var(--t-display-lh); letter-spacing: var(--t-display-tr); font-weight: 600; } .t-hero { font-family: var(--font-display); font-size: var(--t-hero); line-height: var(--t-hero-lh); letter-spacing: var(--t-hero-tr); font-weight: 600; } .t-xl { font-family: var(--font-display); font-size: var(--t-xl); line-height: var(--t-xl-lh); letter-spacing: var(--t-xl-tr); font-weight: 600; } .t-lg { font-family: var(--font-ui); font-size: var(--t-lg); line-height: var(--t-lg-lh); letter-spacing: var(--t-lg-tr); font-weight: 500; } .t-md { font-family: var(--font-ui); font-size: var(--t-md); line-height: var(--t-md-lh); letter-spacing: var(--t-md-tr); font-weight: 500; } .t-sm { font-family: var(--font-ui); font-size: var(--t-sm); line-height: var(--t-sm-lh); letter-spacing: var(--t-sm-tr); font-weight: 500; } .t-body { font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--t-body-lh); letter-spacing: var(--t-body-tr); font-weight: 400; } .t-eyebrow { font-family: var(--font-ui); font-size: var(--t-eyebrow); line-height: var(--t-eyebrow-lh); letter-spacing: var(--t-eyebrow-tr); font-weight: 600; text-transform: uppercase; color: var(--ink-3); } .t-mono { font-family: var(--font-mono); font-size: var(--t-body); line-height: var(--t-body-lh); font-variant-numeric: tabular-nums slashed-zero; } /* Tabular nums para todo lo que sea KPI o timestamp por defecto. Las celdas que tengan .num o .col-num heredan tabular. */ .num, .col-num, .kpi-value { font-variant-numeric: tabular-nums slashed-zero; }