/* ============================================================ tokens.css — Design tokens (THIS IS BP Performance Dashboard) ------------------------------------------------------------ Variables CSS para el rediseño. Coexisten con _legacy.css durante la migración. Las clases legacy usan --bg/--s/--t/etc. Las nuevas usan las variables documentadas aquí. Capas: tokens.css → base.css → shell.css → components.css → tables.css → charts.css → sections.css → responsive.css ============================================================ */ :root { /* ----- Brand & semantic colors ----- CRÍTICO: significado validado por el negocio (CLAUDE.md §3 brief). NO cambiar. */ --green: #34c759; /* positivo: ROAS bueno, delta ▲, Ganador, semáforo OK */ --red: #ff3b30; /* negativo: delta ▼, Bajo rendimiento, semáforo crit. */ --orange: #ff9500; /* warning: semáforo amarillo, pixel warning, cooldown */ --blue: #0071e3; /* acción / interactivo: refresh, links, TOFU stage */ --purple: #af52de; /* MOFU stage */ --indigo: #5e5ce6; /* loading state */ /* ----- Soft variants (10% alpha) ----- Para fondos de KPI cards, badges y status pills. Estilo Subcom / Quikstats — colores semánticos con poca saturación. */ --green-soft: color-mix(in srgb, var(--green) 10%, transparent); --red-soft: color-mix(in srgb, var(--red) 10%, transparent); --orange-soft: color-mix(in srgb, var(--orange) 10%, transparent); --blue-soft: color-mix(in srgb, var(--blue) 10%, transparent); --purple-soft: color-mix(in srgb, var(--purple) 10%, transparent); /* Border variants (20% alpha) para badges */ --green-border: color-mix(in srgb, var(--green) 20%, transparent); --red-border: color-mix(in srgb, var(--red) 20%, transparent); --orange-border: color-mix(in srgb, var(--orange) 20%, transparent); --blue-border: color-mix(in srgb, var(--blue) 20%, transparent); --purple-border: color-mix(in srgb, var(--purple) 20%, transparent); /* ----- Surfaces (light theme) ----- */ --bg-app: #fafafa; /* app background (body) */ --surface: #ffffff; /* cards, panels */ --surface-2: #f5f5f7; /* secondary (hover bg, sub-cards) */ --elevated: #ffffff; /* tooltips, modals */ --border: #e5e5e7; /* default border */ --border-strong: #d2d2d7; --border-soft: #f0f0f2; --header-bg: #e6e6eb; /* franja header: gris más oscuro que el body (modo claro) */ --header-h: 112px; /* alto de la franja header (alinea sidebar + contenido) */ /* ----- Legacy aliases (compatibilidad con vars --card/--bd/--bg2) ----- Algunos componentes JS usan estas vars cortas. Se mapean a los tokens. */ --card: var(--surface); /* alias: fondo de card genérica */ --bd: var(--border); /* alias: borde estándar */ --bg2: var(--surface-2); /* alias: surface secundaria */ /* ----- Text (light theme) ----- WCAG AA verificado sobre --bg-app #fafafa: text-1=15.3:1, text-2=8.7:1, text-3=4.7:1 */ --text-1: #1d1d1f; /* primary text, KPI values */ --text-2: #515154; /* secondary text, labels */ --text-3: #6e6e73; /* tertiary text, captions, table headers (subido de #86868b por WCAG AA) */ --text-4: #aeaeb2; /* disabled, placeholder */ /* ----- Spacing scale (base 4px) ----- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ----- Typography ----- Inter solo (ya cargada via Google Fonts en _legacy.css). */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif; /* Type scale */ --fs-display: clamp(36px, 4vw, 56px); /* Hero KPI */ --fs-h1: 28px; /* Page title */ --fs-h2: 18px; /* Section title */ --fs-h3: 14px; /* Sub-section */ --fs-kpi-hero: 32px; /* Heroes internos (NPS, C9b) */ --fs-kpi-lg: 20px; /* KPI cards (.kpi .v) */ --fs-kpi: 20px; /* KPI strip (.ch-kpi .v) — unified con kpi-lg */ --fs-body: 13px; /* Body default */ --fs-sm: 12px; /* Tabla, captions */ --fs-xs: 11px; /* Labels uppercase */ --fs-micro: 10px; /* Microcopy */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Tracking */ --tr-tight: -0.04em; /* hero KPIs */ --tr-condensed: -0.02em; /* KPIs secundarios */ --tr-normal: 0; --tr-wide: 0.06em; /* labels uppercase */ /* Line heights */ --lh-tight: 1; --lh-snug: 1.2; --lh-base: 1.4; --lh-loose: 1.6; /* ----- Radius ----- */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* ----- Shadow ----- */ --sh-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .02); --sh-2: 0 4px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04); --sh-3: 0 12px 32px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04); --sh-tooltip: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .08); --sh-focus: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); /* ----- Motion ----- */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 120ms; --t-med: 220ms; --t-slow: 400ms; /* ----- Layout ----- */ --sidebar-w: 240px; --sidebar-w-collapsed: 64px; --topbar-h: 64px; --content-max: 1400px; } /* ============================================================ Dark theme overrides ------------------------------------------------------------ Activación: Significado semántico de colores se mantiene; cambia solo surfaces/text. Los soft variants suben a 16% para visibilidad. */ :root[data-theme="dark"] { --bg-app: #0e0e0f; --surface: #161618; --surface-2: #1d1d1f; --elevated: #1f1f22; --border: #2a2a2c; --border-strong: #3a3a3c; --border-soft: #1f1f22; --header-bg: #26262b; /* franja header + sidebar: gris claramente más claro que cards (#161618) */ --text-1: #f5f5f7; --text-2: #c7c7cc; --text-3: #8e8e93; --text-4: #636366; /* Override LEGACY vars para que clases en _legacy.css también se adapten al dark mode sin tocar el archivo. */ --bg: #0e0e0f; --s: #161618; --sa: #1d1d1f; --b: #2a2a2c; --bl: #1f1f22; --t: #f5f5f7; --t2: #c7c7cc; --t3: #8e8e93; /* Soft variants en dark suben a 22% alpha (más vívidos que en light) */ --green-soft: color-mix(in srgb, var(--green) 22%, transparent); --red-soft: color-mix(in srgb, var(--red) 22%, transparent); --orange-soft: color-mix(in srgb, var(--orange) 22%, transparent); --blue-soft: color-mix(in srgb, var(--blue) 22%, transparent); --purple-soft: color-mix(in srgb, var(--purple) 22%, transparent); /* Borders más visibles en dark */ --green-border: color-mix(in srgb, var(--green) 30%, transparent); --red-border: color-mix(in srgb, var(--red) 30%, transparent); --orange-border: color-mix(in srgb, var(--orange) 30%, transparent); --blue-border: color-mix(in srgb, var(--blue) 30%, transparent); --purple-border: color-mix(in srgb, var(--purple) 30%, transparent); /* Shadow alpha más alto en dark */ --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 1px rgba(0, 0, 0, .2); --sh-2: 0 4px 12px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3); --sh-3: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3); --sh-tooltip: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4); }