/* ============================================================================= KYRION · Design System v3 — TOKENS Fuente única de valores. Se edita acá y sólo acá. Derivado de la imagen de referencia del 22/09/2026 (dashboard oscuro con panel claro invertido, shell flotante, acento lima). Sistema NUEVO: no es una migración del v2.0 — ver ../design-system/ para el histórico. Novedad estructural respecto del v2.0: existen DOS contextos de superficie. · contexto OSCURO → el chrome, el canvas, los paneles de datos · contexto CLARO → el panel invertido (`.ctx-light`), los listados largos Cada uno tiene su propia escala de tinta, borde y semáforo. Un componente no elige su color: lo hereda del contexto en el que cae. Todo ratio de contraste de este archivo está MEDIDO, no estimado. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. RAMPA NEUTRA OSCURA — negro cálido con cast verde-oliva El cast no es decorativo: hace que el lima se lea como parte de la familia y no pegado encima. #0B0D07 y #14170F están medidos de kyrion-demo.vercel.app; el resto interpola hacia la tinta del logo. --------------------------------------------------------------------- */ --k-dark-1000: #060704; /* detrás del shell · scrim de modal */ --k-dark-950: #0B0D07; /* canvas de la app · TINTA SOBRE LIMA */ --k-dark-900: #0F120A; /* panel hundido · track */ --k-dark-850: #14170F; /* panel — la superficie por defecto */ --k-dark-800: #1C2015; /* tile · input · card anidada */ --k-dark-700: #252A1B; /* hover */ --k-dark-600: #2F3524; /* borde */ --k-dark-500: #434B33; /* borde fuerte */ --k-dark-400: #6B7553; /* texto disabled · placeholder (exento WCAG) */ --k-dark-300: #8E9878; /* texto muted — 5.96:1 sobre panel ✓ AA */ --k-dark-200: #B6BFA3; /* texto secondary — 9.46:1 ✓ AAA */ --k-dark-100: #D6DCC8; /* énfasis medio */ --k-dark-0: #EDF0E6; /* texto primary — 15.71:1 ✓ AAA */ /* --------------------------------------------------------------------- 2. RAMPA NEUTRA CLARA — la inversión #F2F0EA es la tinta del wordmark del logo, no un blanco elegido. Blanco puro queda reservado para la elevación DENTRO del panel claro: si el panel ya fuera blanco, no quedaría a dónde subir. --------------------------------------------------------------------- */ --k-light-0: #FFFFFF; /* elevación dentro del panel claro · fila activa */ --k-light-50: #F7F6F0; /* hover de fila */ --k-light-100: #F2F0EA; /* PANEL CLARO — tinta del logo */ --k-light-200: #E7E5DB; /* track · superficie hundida en claro */ --k-light-300: #D2CFC0; /* borde en claro — 1.37:1, separa sin dibujar */ --k-light-400: #B9B6A6; /* borde fuerte en claro */ --k-light-500: #9AA08C; /* texto disabled en claro (exento WCAG) */ --k-light-600: #646B58; /* texto muted en claro — 4.87:1 ✓ AA */ --k-light-800: #4A5140; /* texto secondary — 7.25:1 ✓ AAA */ --k-light-900: #14170F; /* texto primary — 15.90:1 ✓ AAA */ /* --------------------------------------------------------------------- 3. MARCA — el lima es el stop final de los 18 gradientes del logo. No es una elección de diseño y no se cambia sin cambiar la marca. --------------------------------------------------------------------- */ --k-brand-300: #B8F766; /* realce */ --k-brand-400: #A5F541; /* MARCA — 13.58:1 sobre panel oscuro ✓ AAA */ --k-brand-500: #8FDC2E; /* hover */ --k-brand-600: #74B81F; /* pressed */ /* Los dos verdes salen del gradiente del logo, no de oscurecer el lima a ojo. Antes eran #4E7D13 y #3D6410, derivados por mí: daban contrastes parecidos pero eran colores que la marca no tiene. */ --k-brand-700: #258409; /* verde MEDIO del logo · marca de dato sobre claro — 3.79:1 contra el canal ✓ WCAG 1.4.11 */ --k-brand-800: #115708; /* verde OSCURO del logo · TEXTO sobre claro — 7.71:1 ✓ AAA */ --k-brand-900: #1B2A0E; /* fondo de badge lima en oscuro */ --k-brand-wash:#E4F7C4; /* fondo de badge lima en claro */ /* --------------------------------------------------------------------- 4. SEMÁFORO — una escala, dos contextos. Elegidos por distancia de hue al lima, no por convención. Distancias RGB medidas contra #A5F541: error 180 · warning 125 · success 144 · info 227. El par warning/error queda a 82 — por encima del umbral de 76, y los dos llevan SIEMPRE ícono y texto, así que el color nunca es el único canal. --------------------------------------------------------------------- */ /* sobre oscuro */ --k-error: #FF5C5C; /* 5.98:1 ✓ AA · hue 0° */ --k-warning: #FFA02E; /* 8.90:1 ✓ AAA · hue 31° */ --k-success: #3FE0A5; /* 10.71:1 ✓ AAA · hue 160° */ --k-info: #8C7CFF; /* 5.56:1 ✓ AA · hue 247° */ --k-error-bg: #2C1814; --k-warning-bg: #2A2110; --k-success-bg: #0E2A1F; --k-info-bg: #1B1830; /* sobre claro — mismos hues, oscurecidos hasta AA */ --k-error-ink: #B3291B; /* 5.67:1 ✓ AA */ --k-warning-ink: #8A4F00; /* 5.76:1 ✓ AA */ --k-success-ink: #0E7A55; /* 4.68:1 ✓ AA */ --k-info-ink: #4A3DBF; /* 6.80:1 ✓ AA */ --k-error-wash: #F7E0DD; /* + tinta = 5.13:1 ✓ */ --k-warning-wash: #F7EBD6; /* + tinta = 5.57:1 ✓ */ --k-success-wash: #DCF2E8; /* + tinta = 4.55:1 ✓ */ --k-info-wash: #E4E1F7; /* + tinta = 6.05:1 ✓ */ /* --------------------------------------------------------------------- 5. ROLES SEMÁNTICOS — contexto OSCURO (el default) Los componentes consumen SIEMPRE estos, nunca la rampa directa. Cambiar de contexto es redefinir este bloque, y nada más. --------------------------------------------------------------------- */ --bg-deep: var(--k-dark-1000); --bg-canvas: var(--k-dark-950); --bg-sunken: var(--k-dark-900); --bg-panel: var(--k-dark-850); --bg-tile: var(--k-dark-800); --bg-hover: var(--k-dark-700); --bg-elevated: var(--k-dark-700); --ink: var(--k-dark-0); --ink-2: var(--k-dark-200); --ink-3: var(--k-dark-300); --ink-off: var(--k-dark-400); --line: var(--k-dark-600); --line-strong: var(--k-dark-500); /* El canal vacío de una barra es un rol propio, no "el hover". Sobre oscuro tiene que ser más claro que el panel; sobre claro, más oscuro. Reusar `--bg-hover` dejaba la barra invisible en contexto claro: #F7F6F0 sobre #F2F0EA es 1.03:1. */ --track: var(--k-dark-700); /* Marca de DATO (el relleno de una barra, un punto de gráfico). No es lo mismo que --accent: el acento de marca lleva texto oscuro encima y se juzga por el contraste de ese texto; una marca de dato no lleva nada encima y se juzga contra su canal, donde WCAG 1.4.11 pide 3:1. El lima #A5F541 sobre el canal claro da 1.06:1 — o sea que en escala de grises la barra desaparece y el largo, que ES el dato, deja de leerse. */ --accent-mark: var(--k-brand-400); /* 11.04:1 contra el canal oscuro */ --accent: var(--k-brand-400); --accent-hover: var(--k-brand-500); --accent-press: var(--k-brand-600); --accent-ink: var(--k-dark-950); /* tinta SOBRE relleno lima · 14.64:1 */ --accent-text: var(--k-brand-400); /* lima COMO texto */ --accent-wash: var(--k-brand-900); --st-error: var(--k-error); --st-warning: var(--k-warning); --st-success: var(--k-success); --st-info: var(--k-info); --st-error-bg: var(--k-error-bg); --st-warning-bg: var(--k-warning-bg); --st-success-bg: var(--k-success-bg); --st-info-bg: var(--k-info-bg); --focus-ring: var(--k-brand-400); /* --------------------------------------------------------------------- 6. TIPOGRAFÍA — grotesca geométrica Outfit → display y numerales. Es la geometría de la referencia: círculo puro en o/e, remates rectos, numerales anchos que aguantan 40px. Manrope → texto de interfaz. También geométrica, pero con x-height alta y espaciado pensado para 12–16px. Outfit a 12px en una tabla de 152 filas se vuelve ilegible; Manrope no. Plex Mono → identificadores EN TABLAS Y DATOS, donde la comparacion columna a columna necesita el ancho fijo. En prosa y en listas cortas no: ahi la mono se lee como un cuerpo extrano y lo de identificador ya lo marca la forma de la palabra (minusculas, puntos, sin espacios). --------------------------------------------------------------------- */ --font-display: "Outfit", system-ui, -apple-system, sans-serif; --font-ui: "Manrope", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; --fs-display: 40px; --lh-display: 1.05; --ls-display: -0.03em; --fs-h1: 30px; --lh-h1: 1.12; --ls-h1: -0.025em; --fs-h2: 22px; --lh-h2: 1.2; --ls-h2: -0.02em; --fs-h3: 17px; --lh-h3: 1.3; --ls-h3: -0.01em; --fs-h4: 15px; --lh-h4: 1.35; --fs-body-l: 15px; --lh-body-l: 1.55; --fs-body: 14px; --lh-body: 1.55; --fs-body-s: 13px; --lh-body-s: 1.5; --fs-caption: 12px; --lh-caption: 1.4; --fs-label: 12px; --fs-over: 10px; --ls-over: 0.14em; /* Numeral de métrica — el "$31,211.00" de la referencia */ --fs-metric: 28px; --lh-metric: 1.0; --ls-metric: -0.03em; --fs-metric-l: 36px; --fs-stat-xl: 44px; /* KPI de cabecera de panel, repartido a todo el ancho */ --fs-metric-s: 20px; --fs-metric-un: 13px; /* el "$" y el "días" que acompañan al numeral */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* --------------------------------------------------------------------- 7. FORMA — el radio decrece hacia adentro: 32 → 24 → 20 → 16 → 10. Nunca al revés. Una caja interna con más radio que su contenedor se ve rota, y es lo primero que se nota cuando el sistema se rompe. --------------------------------------------------------------------- */ --r-shell: 32px; /* el marco de la app */ --r-panel: 24px; /* panel de primer nivel · modal */ --r-card: 20px; /* card estándar */ --r-tile: 16px; /* tile de métrica · card anidada */ --r-chip: 10px; /* badge · tag · tooltip */ --r-field: 14px; /* input · textarea · select cuadrado */ --r-pill: 999px; /* TODO lo que se toca */ --r-full: 50%; /* --------------------------------------------------------------------- 8. ESPACIADO — base 4. Los valores 12/16/20/24 hacen el 80% del trabajo. Si una separación no está en la escala, es un error, no un ajuste fino. --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px; /* --------------------------------------------------------------------- 9. ELEVACIÓN En OSCURO la elevación NO la hace la sombra — sobre negro casi puro una sombra negra no se ve. La hace la luminosidad de la superficie: canvas 0.37% → panel 0.80% → tile 1.33% → hover 2.13%. El escalón es de ~0.5 puntos de luminancia: suficiente para leerse, insuficiente para dibujar cajas. En CLARO la sombra sí funciona, y es el único canal disponible. --------------------------------------------------------------------- */ --sh-sm: 0 1px 2px rgba(0,0,0,.4); --sh-md: 0 2px 6px rgba(0,0,0,.4), 0 8px 20px -12px rgba(0,0,0,.7); --sh-lg: 0 4px 12px rgba(0,0,0,.45), 0 18px 40px -18px rgba(0,0,0,.8); --sh-xl: 0 8px 24px rgba(0,0,0,.5), 0 40px 80px -30px rgba(0,0,0,.9); --sh-light: 0 1px 2px rgba(20,23,15,.06), 0 8px 24px -14px rgba(20,23,15,.22); --sh-brand: 0 6px 22px -6px rgba(165,245,65,.24); --sh-focus: 0 0 0 3px rgba(165,245,65,.40); /* -------------------------------------------------------------------- 10. MOTION — el shimmer y el spinner significan "esto está pasando ahora". La severidad NUNCA se anima: un error no parpadea. -------------------------------------------------------------------- */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* -------------------------------------------------------------------- 11. LAYOUT -------------------------------------------------------------------- */ --shell-pad: 14px; /* aire entre el borde de la ventana y el shell */ --topbar-h: 60px; --sidebar-w: 232px; --rail-w: 344px; --content-max: 1280px; --tap-min: 44px; /* área táctil mínima (WCAG 2.5.8 pide 24) */ /* -------------------------------------------------------------------- 12. GRADIENTES El de marca es el del logo: horizontal, de la sombra a la luz. Lee como algo que se enciende de izquierda a derecha. -------------------------------------------------------------------- */ --grad-brand: linear-gradient(90deg, #1E1E1E 3%, #115708 24%, #258409 45%, #A5F541 100%); --grad-tile: linear-gradient(145deg, var(--k-brand-300) 0%, var(--k-brand-400) 55%, var(--k-brand-500) 100%); /* El rayado del logo: "dato siendo procesado". Va en progreso, skeleton y estados de agente corriendo — los momentos en que el producto trabaja. */ --scanlines: repeating-linear-gradient( 90deg, rgba(11,13,7,.34) 0 2px, transparent 2px 5px); } /* ============================================================================= CONTEXTO CLARO — la inversión. Se aplica con la clase `.ctx-light`. Redefine SÓLO los roles semánticos: ningún componente sabe en qué contexto está, y por eso todos funcionan en los dos sin una línea de CSS extra. El salto de panel claro (#F2F0EA) contra canvas oscuro (#0B0D07) es de 17.14:1. Es el contraste más alto del sistema: por eso el panel claro ordena la pantalla él solo y no necesita borde ni sombra para separarse. ========================================================================== */ .ctx-light { --bg-deep: var(--k-light-300); --bg-canvas: var(--k-light-100); --bg-sunken: var(--k-light-200); --bg-panel: var(--k-light-100); --bg-tile: var(--k-light-0); --bg-hover: var(--k-light-50); --bg-elevated: var(--k-light-0); --ink: var(--k-light-900); --ink-2: var(--k-light-800); --ink-3: var(--k-light-600); --ink-off: var(--k-light-500); --line: var(--k-light-300); --line-strong: var(--k-light-400); --track: var(--k-light-200); /* El relleno lima no cambia: su tinta oscura da 13.58:1 en cualquier lado. Lo que SÍ cambia es el lima como texto — sobre claro da 1.17:1. */ --accent-mark: var(--k-brand-700); /* 3.90:1 contra el canal claro ✓ */ --accent-ink: var(--k-light-900); --accent-text: var(--k-brand-800); --accent-wash: var(--k-brand-wash); --st-error: var(--k-error-ink); --st-warning: var(--k-warning-ink); --st-success: var(--k-success-ink); --st-info: var(--k-info-ink); --st-error-bg: var(--k-error-wash); --st-warning-bg: var(--k-warning-wash); --st-success-bg: var(--k-success-wash); --st-info-bg: var(--k-info-wash); --focus-ring: var(--k-brand-700); --sh-sm: 0 1px 2px rgba(20,23,15,.06); --sh-md: var(--sh-light); --sh-lg: 0 2px 8px rgba(20,23,15,.08), 0 20px 48px -20px rgba(20,23,15,.3); background: var(--bg-panel); color: var(--ink); } /* `.ctx-dark` devuelve el contexto oscuro dentro de uno claro — es el panel de detalle que en la referencia vive adentro de la card blanca. */ .ctx-dark { --bg-deep: var(--k-dark-1000); --bg-canvas: var(--k-dark-950); --bg-sunken: var(--k-dark-900); --bg-panel: var(--k-dark-850); --bg-tile: var(--k-dark-800); --bg-hover: var(--k-dark-700); --bg-elevated: var(--k-dark-700); --ink: var(--k-dark-0); --ink-2: var(--k-dark-200); --ink-3: var(--k-dark-300); --ink-off: var(--k-dark-400); --line: var(--k-dark-600); --line-strong: var(--k-dark-500); --track: var(--k-dark-700); --accent-mark: var(--k-brand-400); --accent-ink: var(--k-dark-950); --accent-text: var(--k-brand-400); --accent-wash: var(--k-brand-900); --st-error: var(--k-error); --st-warning: var(--k-warning); --st-success: var(--k-success); --st-info: var(--k-info); --st-error-bg: var(--k-error-bg); --st-warning-bg: var(--k-warning-bg); --st-success-bg: var(--k-success-bg); --st-info-bg: var(--k-info-bg); --focus-ring: var(--k-brand-400); background: var(--bg-panel); color: var(--ink); } /* ============================================================================= PREFERENCIAS DEL USUARIO ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } @media (prefers-contrast: more) { :root { --line: var(--k-dark-500); --ink-2: var(--k-dark-100); --ink-3: var(--k-dark-200); } .ctx-light { --line: var(--k-light-400); --ink-3: var(--k-light-800); } } /* Debajo de 640px el shell pierde el aire flotante y ocupa la pantalla: 32px de radio contra el borde del teléfono desperdicia ancho real. */ @media (max-width: 640px) { :root { --shell-pad: 0px; --r-shell: 0px; } }