/* ==========================================================================
EasyCheck — Design tokens
Única fuente de verdad de color, tipografía, espaciado, radios y sombras.
Cargar SIEMPRE antes de components.css y screens.css.
========================================================================== */
:root {
/* ---------------------------------------------------------------- color */
/* Fondos y superficies (de más profundo a más elevado) */
--ec-bg: #0a1628; /* fondo de la aplicación */
--ec-surface: #0f1f38; /* tarjetas, tablas, barras sticky */
--ec-surface-2: #162540; /* header de tabla, botón secundario, input */
--ec-surface-3: #1c2e4a; /* badges de ranking, chips neutros */
--ec-surface-sunk: #0b1930; /* barra de ventana, tooltips, footer */
--ec-sidebar-top: #0f1f38; /* gradiente del sidebar — stop inicial */
--ec-sidebar-btm: #0a1628; /* gradiente del sidebar — stop final */
/* Bordes y divisores */
--ec-border: #1e3352; /* borde estándar de tarjeta, tabla, input */
--ec-border-strong: #2a4870; /* borde punteado, hover, scrollbar */
--ec-divider: #16283f; /* divisor interno, filas de tabla */
/* Texto (4 niveles de jerarquía) */
--ec-text-strong: #f3f7fc; /* títulos */
--ec-text: #e2eaf5; /* cuerpo, valores */
--ec-text-muted: #8fa9c4; /* párrafos secundarios */
--ec-text-soft: #6b8cae; /* labels, notas, ejes de gráfico */
--ec-text-faint: #3d6080; /* | , numeración, texto terciario */
/* Acento — verde institucional */
--ec-accent: #00c47a;
--ec-accent-hi: #0de48a; /* hover */
--ec-accent-dk: #00a366; /* segundo stop del gradiente */
--ec-accent-ink: #04150e; /* texto sobre relleno de acento */
--ec-accent-soft: rgba(0, 196, 122, .08); /* fondo tintado */
--ec-accent-line: rgba(0, 196, 122, .30); /* borde tintado */
--ec-accent-glow: rgba(0, 196, 122, .22); /* sombra del CTA */
/* Semánticos de estado */
--ec-warn: #f5a623;
--ec-warn-soft: rgba(245, 166, 35, .08);
--ec-warn-line: rgba(245, 166, 35, .28);
--ec-warn-text: #f0cf9a; /* texto sobre fondo de advertencia */
--ec-danger: #f06060;
--ec-danger-soft: rgba(240, 96, 96, .07);
--ec-danger-line: rgba(240, 96, 96, .28);
--ec-danger-text: #f3b5b5;
--ec-danger-dk: #b83a3a; /* rayado de excedente */
--ec-info: #4da6ff;
--ec-info-soft: rgba(77, 166, 255, .08);
--ec-info-line: rgba(77, 166, 255, .28);
/* Series de datos — solo para gráficos, NO son colores de interfaz */
--ec-data-1: #00c47a;
--ec-data-2: #4da6ff;
--ec-data-3: #a78bfa;
--ec-data-4: #f5a623;
--ec-data-5: #5ec8c0;
--ec-data-6: #c084fc;
--ec-data-rest: #4a6a94; /* categoría "resto" / "otros" */
/* ----------------------------------------------------------- tipografía */
--ec-font-display: 'Archivo', system-ui, -apple-system, sans-serif;
--ec-font-body: 'Inter', system-ui, -apple-system, sans-serif;
/* Pesos disponibles: Archivo 400/500/600/700 · Inter 400/500/600/700 */
--ec-weight-regular: 400;
--ec-weight-medium: 500;
--ec-weight-semibold: 600;
--ec-weight-bold: 700;
/* Escala de tamaños */
--ec-text-3xs: 10px; /* | , kickers, pills chicas */
--ec-text-2xs: 11px; /* notas al pie, numeración del índice */
--ec-text-xs: 12px; /* metadatos, chips, leyendas */
--ec-text-sm: 13px; /* celdas de tabla, cuerpo compacto */
--ec-text-md: 14px; /* cuerpo base */
--ec-text-lg: 16px; /* cuerpo destacado, botones grandes */
--ec-text-xl: 19px; /* título de tarjeta grande */
--ec-text-2xl: 21px; /* título de sección */
--ec-text-3xl: 25px; /* valor de métrica */
--ec-text-4xl: 33px; /* métrica protagonista */
--ec-text-hero: clamp(38px, 5.6vw, 66px); /* H1 de landing */
/* Tracking — la display se compensa negativo al crecer */
--ec-tracking-hero: -0.04em;
--ec-tracking-title: -0.035em;
--ec-tracking-value: -0.5px;
--ec-tracking-label: 0.07em;
--ec-tracking-kicker: 0.09em;
/* Interlineado */
--ec-leading-tight: 1.05;
--ec-leading-snug: 1.35;
--ec-leading-body: 1.6;
/* ------------------------------------------------------------ espaciado */
--ec-space-1: 4px;
--ec-space-2: 6px;
--ec-space-3: 8px;
--ec-space-4: 10px;
--ec-space-5: 12px;
--ec-space-6: 14px;
--ec-space-7: 16px;
--ec-space-8: 18px;
--ec-space-9: 20px;
--ec-space-10: 22px;
--ec-space-11: 26px;
--ec-space-12: 32px;
--ec-space-13: 40px;
--ec-space-14: 44px;
/* ---------------------------------------------------------------- radio */
--ec-radius-bar: 3px; /* barras de progreso y de gráfico */
--ec-radius-sm: 7px; /* botón chico, ítem de nav, acción de fila */
--ec-radius-md: 8px; /* botón, input, select, icono */
--ec-radius-lg: 10px; /* fila de lista, bloque de alerta */
--ec-radius-xl: 12px; /* tarjeta, tabla, barra de período */
--ec-radius-2xl: 16px; /* isotipo grande */
--ec-radius-pill: 20px; /* chips, pills de estado */
--ec-radius-full: 50%; /* avatar, badge de ranking */
/* --------------------------------------------------------------- sombra */
--ec-shadow-sm: 0 1px 3px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .12);
--ec-shadow-sticky: 0 6px 20px -12px rgba(0, 0, 0, .80);
--ec-shadow-lg: 0 24px 64px -28px rgba(0, 0, 0, .75);
--ec-shadow-accent: 0 4px 14px var(--ec-accent-glow);
--ec-shadow-cta: 0 6px 18px var(--ec-accent-glow);
/* ------------------------------------------------------------- métricas */
--ec-sidebar-w: 220px; /* ancho del menú lateral */
--ec-topbar-h: 68px; /* alto de la barra superior sticky */
--ec-index-w: 196px; /* ancho del índice de Reportes */
--ec-content-max: 1180px; /* medida máxima de contenido en landing */
--ec-hit: 44px; /* área táctil mínima */
/* ---------------------------------------------------------- transición */
--ec-ease: cubic-bezier(.4, 0, .2, 1);
--ec-duration: 140ms;
--ec-duration-chart: 320ms;
--ec-duration-enter: 420ms; /* entradas al scroll, landing */
}
|