/* ============================================================ Kipia · Tokens de diseño Versión 1.1 — 12/09/2026 ------------------------------------------------------------ Cómo se usa: 1. Importar este archivo una sola vez, antes que cualquier otra hoja de estilos. 2. En los componentes usar SIEMPRE los tokens semánticos (--k-bg-*, --k-text-*, --k-accent-*). Nunca los de la escala cruda (--k-n-10, --k-a-70): esos existen para construir los semánticos, no para usarse directo. 3. El tema se decide con el atributo data-theme en : "dark" u "light". SIEMPRE hay un valor explícito; lo pone el script de arranque (ver adenda, sección 1). Este archivo NO consulta prefers-color-scheme: la preferencia del sistema la resuelve el script, no el CSS. ------------------------------------------------------------ Cambios de 1.0 a 1.1: - Eliminado el bloque @media (prefers-color-scheme: light), que declaraba color-scheme sin aplicar los tokens claros. - Agregado color-scheme a cada tema (arreglaba también los controles nativos en oscuro, que salían en claro). - Anillo de foco propio para el tema claro: el de 1.0 usaba el teal brillante y no llegaba a 3:1 sobre fondo claro. - Texto deshabilitado del tema claro, que era casi invisible. - Texto terciario de los dos temas: no llegaba a 4,5:1. - Tokens nuevos: hover, capas, sombras, velo, esqueleto, texto sobre estado sólido, padding por ancho. ============================================================ */ :root, [data-theme="dark"] { color-scheme: dark; /* ── ESCALA CRUDA · neutros oscuros ───────────────────── */ --k-n-00: #08090A; --k-n-05: #0F1113; --k-n-10: #15171A; --k-n-15: #1C1E21; --k-n-20: #232628; --k-n-30: #2D3033; --k-n-40: #3A3E42; --k-n-50: #585C61; --k-n-60: #7A7F85; --k-n-65: #82878D; /* v1.1 — mínimo legible sobre superficie oscura */ --k-n-70: #9CA1A7; --k-n-80: #C8CCD1; --k-n-90: #F3F5F6; /* ── ESCALA CRUDA · neutros cálidos (tema claro) ──────── */ --k-c-00: #FFFFFF; --k-c-02: #FAFAF9; --k-c-05: #F4F3F1; --k-c-10: #EBEAE7; --k-c-20: #E1DFDB; --k-c-30: #CAC7C1; --k-c-50: #8A8880; --k-c-55: #6A6860; /* v1.1 — mínimo legible sobre superficie clara */ --k-c-60: #5F5D58; --k-c-80: #303030; --k-c-90: #1A1A1A; /* ── ESCALA CRUDA · acento teal ───────────────────────── */ --k-a-10: #04211E; --k-a-20: #073029; --k-a-30: #0C4B41; --k-a-40: #117A69; --k-a-50: #17A894; --k-a-55: #0E8C7A; --k-a-60: #1FC4AC; --k-a-65: #0E7C6C; --k-a-70: #2FD4BC; --k-a-75: #0A5B50; --k-a-80: #5FE3D0; --k-a-85: #7FE9D9; --k-a-88: #9BDFD3; --k-a-90: #A6F0E5; --k-a-95: #DCF9F4; /* ── TIPOGRAFÍA ───────────────────────────────────────── */ --k-font-ui: 'Space Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif; --k-font-data: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --k-fs-display: 30px; --k-lh-display: 1.1; --k-fw-display: 700; --k-fs-title: 19px; --k-lh-title: 1.3; --k-fw-title: 600; --k-fs-section: 14.5px; --k-lh-section: 1.4; --k-fw-section: 600; --k-fs-body: 13px; --k-lh-body: 1.5; --k-fw-body: 400; --k-fs-small: 11.5px; --k-lh-small: 1.45; --k-fw-small: 400; --k-fs-micro: 10px; --k-lh-micro: 1.4; --k-fw-micro: 500; --k-fs-data: 12px; --k-lh-data: 1.5; --k-tracking-display: -0.03em; --k-tracking-title: -0.02em; --k-tracking-micro: 0.1em; /* micro siempre en MAYÚSCULAS y en fuente de datos */ /* ── ESPACIADO · múltiplos de 4 ───────────────────────── */ --k-sp-1: 4px; --k-sp-2: 8px; --k-sp-3: 12px; --k-sp-4: 16px; --k-sp-5: 20px; --k-sp-6: 24px; --k-sp-8: 32px; --k-sp-10: 40px; /* ── RADIOS ───────────────────────────────────────────── */ --k-radius-sm: 5px; /* chips, badges cuadrados */ --k-radius-md: 6px; /* botones, campos, selectores */ --k-radius-lg: 8px; /* tarjetas y paneles */ --k-radius-pill: 999px; /* ── ALTURAS DE CONTROL ───────────────────────────────── */ --k-control-sm: 30px; --k-control-md: 34px; /* botones y campos por defecto */ --k-control-lg: 40px; /* ── ESTRUCTURA (navbar horizontal superior) ──────────── */ --k-navbar-h: 56px; /* barra de navegación principal */ --k-pageheader-h: 58px; /* franja de título + acciones */ --k-content-pad-x: 28px; --k-content-pad-y: 22px; --k-content-max: 1600px; /* la grilla no crece más allá */ --k-grid-gap: 16px; /* ── CAPAS ──────────────────────────────────────────────── Las cinco capas del lineamiento de diseño (claude/16, §3.4). No inventar valores intermedios: si dos cosas se pisan al mismo nivel, es un error de capa, no de z-index. */ --k-z-base: 0; /* contenido, tarjetas */ --k-z-fixed: 100; /* barra de navegación, encabezado de página */ --k-z-float: 200; /* desplegables, menús, tooltips */ --k-z-overlay: 300; /* paneles laterales, modales y su velo */ --k-z-ephemeral: 400; /* toasts, avisos de sistema */ /* ── MOVIMIENTO ───────────────────────────────────────── */ --k-ease: cubic-bezier(0.2, 0, 0.2, 1); --k-dur-fast: 120ms; --k-dur: 180ms; --k-dur-shimmer: 1200ms; /* barrido del esqueleto de carga */ /* ══════════════════════════════════════════════════════ TOKENS SEMÁNTICOS · TEMA OSCURO (por defecto) Estos son los que se usan en los componentes. ══════════════════════════════════════════════════════ */ /* Fondos */ --k-bg-root: var(--k-n-00); /* detrás de todo */ --k-bg-canvas: var(--k-n-05); /* fondo de página */ --k-bg-chrome: #111315; /* barra de navegación */ --k-bg-surface: var(--k-n-10); /* tarjetas y paneles */ --k-bg-raised: var(--k-n-15); /* hover de fila, item anidado */ --k-bg-sunken: var(--k-n-15); /* pistas de barra, campos */ --k-bg-hover: #191C1F; /* hover suave: items de nav, celdas. Reemplaza al "raised al 50% de opacidad" de la spec 1.0, que no era implementable sobre una variable de color. */ /* Velo y sombras — solo para lo que flota (ver capas arriba). Las tarjetas NO llevan sombra: su jerarquía es la superficie. */ --k-overlay: rgba(8, 9, 10, 0.72); --k-shadow-float: 0 4px 16px rgba(0, 0, 0, 0.45); --k-shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.6); /* Esqueleto de carga */ --k-skeleton-base: var(--k-n-15); --k-skeleton-shine: var(--k-n-20); /* Bordes */ --k-border-subtle: var(--k-n-20); --k-border: var(--k-n-30); --k-border-strong: var(--k-n-40); /* Texto */ --k-text-primary: var(--k-n-90); --k-text-secondary: var(--k-n-70); --k-text-tertiary: var(--k-n-65); /* v1.1: era --k-n-60, quedaba en 4,45:1 sobre la superficie — apenas por debajo del mínimo. Ahora 4,96:1. */ --k-text-disabled: var(--k-n-50); /* Acento */ --k-accent: var(--k-a-70); --k-accent-hover: var(--k-a-80); --k-accent-data: var(--k-a-50); /* series de gráfico */ --k-accent-bg: var(--k-a-10); /* fondo teñido */ --k-accent-border: var(--k-a-30); --k-accent-text: var(--k-a-90); /* texto sobre fondo teñido */ /* Acción principal — en oscuro es el acento con texto casi negro. NUNCA texto blanco sobre el acento: no alcanza el contraste. */ --k-action-bg: var(--k-a-70); --k-action-text: #06231C; --k-action-bg-hover: var(--k-a-80); /* Acción secundaria */ --k-action2-bg: transparent; --k-action2-text: var(--k-n-80); --k-action2-border: var(--k-n-30); --k-action2-bg-hover: var(--k-n-15); /* Estados — reservados. Nunca como serie de gráfico. */ --k-success: #3FCF8E; --k-success-bg: #0B2A1E; --k-success-border: #17573C; --k-warning: #F2B441; --k-warning-bg: #2E2308; --k-warning-border: #6B5014; --k-danger: #F2645A; --k-danger-bg: #2E1210; --k-danger-border: #6E2A25; --k-info: #5A9DF5; --k-info-bg: #0C1D33; --k-info-border: #1F4478; /* Texto sobre estado SÓLIDO (insignia de conteo, chip relleno). En oscuro los colores de estado son luminosos → texto casi negro. En claro son profundos → el bloque del tema claro los pasa a blanco. */ --k-success-on: #052015; --k-warning-on: #16110A; --k-danger-on: #2A0B08; --k-info-on: #05152B; /* Datos — validados para daltonismo y contraste. Orden FIJO: el color sigue a la entidad, nunca a su ranking. */ --k-data-1: #17A894; --k-data-2: #4A82D6; --k-data-3: #D3628C; --k-data-4: #C08329; --k-data-other: var(--k-n-50); --k-data-grid: var(--k-n-20); --k-data-axis: var(--k-n-40); /* Foco — visible siempre, nunca outline:none sin reemplazo */ --k-focus-ring: 0 0 0 2px var(--k-bg-canvas), 0 0 0 4px var(--k-a-70); } /* ══════════════════════════════════════════════════════════ TEMA CLARO Solo se redefinen los semánticos. La escala cruda no cambia. ══════════════════════════════════════════════════════════ */ [data-theme="light"] { color-scheme: light; --k-bg-root: var(--k-c-05); --k-bg-canvas: var(--k-c-05); --k-bg-chrome: var(--k-c-00); --k-bg-surface: var(--k-c-00); --k-bg-raised: var(--k-c-10); --k-bg-sunken: var(--k-c-10); --k-bg-hover: #F0EFEC; --k-overlay: rgba(26, 26, 26, 0.40); --k-shadow-float: 0 4px 14px rgba(26, 26, 26, 0.12); --k-shadow-overlay: 0 16px 44px rgba(26, 26, 26, 0.18); --k-skeleton-base: var(--k-c-10); --k-skeleton-shine: var(--k-c-05); --k-border-subtle: var(--k-c-20); --k-border: var(--k-c-30); --k-border-strong: var(--k-c-50); --k-text-primary: var(--k-c-80); --k-text-secondary: var(--k-c-60); --k-text-tertiary: var(--k-c-55); /* v1.1: era --k-c-50, 3,2:1 sobre el fondo de página. Ahora 5,0:1. */ --k-text-disabled: #A9A6A0; /* 1.0 usaba --k-c-30 (#CAC7C1): 1,6:1 sobre blanco, prácticamente invisible. Este da 2,4:1, equivalente al deshabilitado del tema oscuro. Deshabilitado no es legible a propósito, pero tiene que verse. */ --k-accent: var(--k-a-65); --k-accent-hover: var(--k-a-75); --k-accent-data: var(--k-a-55); --k-accent-bg: var(--k-a-95); --k-accent-border: var(--k-a-88); --k-accent-text: var(--k-a-75); /* La lección de Shopify: en tema claro la acción principal NO lleva el color de marca. Va en casi negro, y el color queda libre para señalar estado. */ --k-action-bg: var(--k-c-90); --k-action-text: var(--k-c-00); --k-action-bg-hover: #000000; --k-action2-bg: var(--k-c-00); --k-action2-text: var(--k-c-80); --k-action2-border: var(--k-c-30); --k-action2-bg-hover: var(--k-c-10); --k-success: #0E7A52; --k-success-bg: #E6F5EE; --k-success-border: #BFE4D3; --k-warning: #9A6A05; --k-warning-bg: #FCF2DC; --k-warning-border: #F0DFB4; --k-danger: #C13B32; --k-danger-bg: #FCEAE8; --k-danger-border: #F3C9C5; --k-info: #1F63C9; --k-info-bg: #E8F0FC; --k-info-border: #C6DAF7; /* Estados profundos → texto blanco encima cuando el chip es sólido. */ --k-success-on: #FFFFFF; --k-warning-on: #FFFFFF; --k-danger-on: #FFFFFF; --k-info-on: #FFFFFF; --k-data-1: #0E8C7A; --k-data-2: #2F62B8; --k-data-3: #B94874; --k-data-4: #9A6512; --k-data-other: var(--k-c-50); --k-data-grid: var(--k-c-20); --k-data-axis: var(--k-c-30); /* El anillo de foco de 1.0 usaba --k-a-70 (#2FD4BC): 1,7:1 sobre el fondo claro, muy por debajo del 3:1 que exige un indicador de foco. Sobre claro va el teal profundo: 4,6:1. */ --k-focus-ring: 0 0 0 2px var(--k-bg-canvas), 0 0 0 4px var(--k-a-65); } /* ══════════════════════════════════════════════════════════ AJUSTES POR ANCHO El único token que cambia con el ancho. Los breakpoints no pueden vivir en variables CSS (no se pueden usar dentro de @media): están en kipia-tokens.json para el build y en la especificación, §2. ══════════════════════════════════════════════════════════ */ @media (max-width: 1439px) { :root { --k-content-pad-x: 20px; } } @media (max-width: 1023px) { :root { --k-content-pad-x: 16px; --k-content-pad-y: 16px; } } /* Accesibilidad: quien pidió menos movimiento, no lo recibe. El esqueleto de carga no parpadea: queda estático en su color base. */ @media (prefers-reduced-motion: reduce) { :root { --k-dur-fast: 0ms; --k-dur: 0ms; --k-dur-shimmer: 0ms; } :root { --k-skeleton-shine: var(--k-skeleton-base); } }