/* ========================================================================== ITERA · DESIGN SYSTEM — TOKENS Capa 1 de 3. Solo variables. Ningún selector pinta nada aquí. ── LA MARCA ────────────────────────────────────────────────────────────── Extraída de assets/logo/. Itera tiene exactamente dos colores: Petróleo #003A4C el cuerpo de la "i" Cian #00F9FF el punto de la "i" Y una regla que gobierna todo el sistema: la marca es DARK-FIRST. El cian mide 1.31:1 contra blanco. No puede ser texto, ni relleno de botón con texto claro, ni enlace, ni barra de progreso sobre blanco. Es invisible ahí. Pero mide 9.36:1 sobre el petróleo — que es exactamente donde el logo lo pone. De ahí las dos reglas de aplicación: 1. El PETRÓLEO es el color estructural. Botones, encabezados, texto, superficies de marca. Sobre blanco rinde 12.28:1. 2. El CIAN es la señal, y solo vive sobre petróleo. Progreso en superficies oscuras, indicador activo, el punto. Nunca sobre blanco. Para lo interactivo sobre blanco existe `--brand-500` #0A82A5: el mismo hue, oscurecido hasta que pasa AA. Es el cian "traducido" a fondo claro. ── ─────────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* ---------- Rampa de marca · petróleo ---------- */ --brand-50: #EAF6FA; --brand-100: #D0EBF3; --brand-200: #A6DCE7; --brand-300: #6BC0D2; --brand-400: #2E9DB4; --brand-500: #0A82A5; /* acento e interacción sobre blanco */ --brand-600: #0A6480; --brand-700: #0A5064; --brand-800: #003A4C; /* ◆ COLOR DE MARCA · superficies y botón primario */ --brand-900: #002E3C; --brand-950: #00222D; /* canto inferior del botón */ /* ---------- Cian de marca · señal ---------- */ --cyan: #00F9FF; /* ◆ COLOR DE MARCA · exclusivo sobre petróleo */ --cyan-600: #00D5E0; --cyan-700: #00A8B8; /* ---------- Neutros ---------- * * No son grises: son el petróleo desaturado, todos sobre su mismo hue * (194°). Es la jugada de marca de mayor palanca y la que nadie nota * conscientemente — cada borde, cada texto secundario y cada superficie * hundida quedan emparentados con el logo, y la app deja de verse * genérica sin que aparezca un solo color nuevo. */ --n-0: #FFFFFF; --n-25: #F7FAFB; --n-50: #EFF5F7; --n-100: #E4EDF0; --n-200: #D4E1E6; --n-300: #B4C7CE; --n-400: #8AA3AC; --n-500: #587079; --n-600: #3F565E; --n-700: #2C424A; --n-800: #1B2E35; --n-900: #0B1D24; /* ---------- Superficies ---------- */ --bg: var(--n-0); --surface: var(--n-0); --surface-sunk: var(--n-50); --surface-mute: var(--n-100); --border: var(--n-200); --border-strong: var(--n-300); /* ---------- Texto ---------- */ --text: var(--n-900); --text-2: var(--n-600); --text-3: var(--n-500); --text-on-brand: var(--n-0); /* ---------- Estados ---------- * * base = franja y relleno · ink = texto · soft = fondo del chip * * Validado para daltonismo con el petróleo ya ocupando el slot azul-teal: * peor par en todas las combinaciones ΔE 6.6 (protanopía), piso de visión * normal ΔE 17.8. El 6.6 está en la banda que exige codificación * secundaria — por eso NINGÚN estado se comunica solo con color: todo * chip lleva ícono y nombre propio. */ --crit: #96220F; --crit-ink: #8A2011; --crit-soft: #FCEAE6; --crit-line: #F0C7BE; --warn: #DDA00B; --warn-ink: #86610A; --warn-soft: #FDF4DC; --warn-line: #EFDCA6; --ok: #33A85F; --ok-ink: #1B7340; --ok-soft: #E6F6EC; --ok-line: #B9E3C8; --net: var(--brand-500); /* la red es la marca */ --net-ink: var(--brand-600); --net-soft: #E4F4F9; --net-line: #B4DFEC; --deemph: var(--n-300); /* ---------- Tipografía ---------- * * Dos cortes ópticos, no dos fuentes decorativas. Es lo que separa a un * producto premium de uno por defecto: Linear parte Display y Text, * Stripe usa Söhne en varias ópticas, Asana encargó Everett a medida. * * MANROPE para cifras y titulares. Grotesco semicondensado de terminales * cortados en seco: a 22px y más lee moderno de inmediato y le da presencia * real a los números, que en este producto son el contenido. * * INTER para texto y etiquetas. A 10.5–13px sigue siendo la más legible en * pantalla, y cambiarla ahí sería retroceder sobre la auditoría de escala. * * La regla es de tamaño, no de gusto: display en cifras y títulos de 15px * para arriba; texto en todo lo demás. Un display repartido por todas * partes pesa y deja de destacar. * * El wordmark de Itera no es ninguna de las dos: es lettering del logo, * vive como SVG en assets/logo/ y nunca se recompone. */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Manrope", "Inter", system-ui, -apple-system, sans-serif; /* Nueve tamaños y ni uno más. Una auditoría del DOM encontró catorce en uso, tres de ellos por debajo de 10px: a esa escala Inter pierde legibilidad en pantalla real y el sistema deja de leerse como sistema. Todo componente referencia un token; ningún px suelto. */ --fs-hero: clamp(46px, 13vw, 56px); /* cifra protagonista */ --fs-kpi: 27px; /* valor de tile */ --fs-h1: 22px; /* título de misión o práctica */ --fs-h2: 17px; /* título de tarjeta */ --fs-h3: 15px; /* título de fila */ --fs-body: 14px; /* cuerpo */ --fs-sm: 13px; /* secundario */ --fs-xs: 12px; /* metadato */ --fs-micro: 10.5px; /* etiqueta de sistema, iniciales */ --lh-tight: 1.18; --lh-snug: 1.34; --lh-body: 1.55; /* Calibrado para Manrope, no para Inter. Manrope trae sidebearings más apretados de fábrica: el tracking que sienta bien a Inter le junta las palabras. Estos valores son ~40% menos negativos que los anteriores. */ --ls-hero: -.032em; /* cifra protagonista */ --ls-kpi: -.024em; /* valor de tile */ --ls-h1: -.018em; /* título de misión */ --ls-h2: -.010em; /* título de tarjeta */ --ls-tight: -.022em; --ls-label: .10em; /* ---------- Espacio (rejilla de 4, con dos medios pasos declarados) ---------- * * Los medios pasos existen para ajustes ópticos —separar un ícono de su * rótulo, por ejemplo— donde 8px abre demasiado. Están declarados a * propósito para que no aparezcan valores arbitrarios en su lugar. */ --s-05: 2px; --s-15: 6px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* ---------- Radios ---------- */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-full: 999px; /* ---------- Sombras (contenidas: el fondo es blanco) ---------- */ --sh-xs: 0 1px 2px rgba(0, 58, 76, .06); --sh-sm: 0 1px 3px rgba(0, 58, 76, .07), 0 1px 2px rgba(0, 58, 76, .04); --sh-md: 0 4px 14px -4px rgba(0, 58, 76, .12), 0 2px 4px -2px rgba(0, 58, 76, .05); --sh-lg: 0 16px 40px -12px rgba(0, 58, 76, .18), 0 4px 10px -4px rgba(0, 58, 76, .06); --sh-sheet: 0 -10px 48px -12px rgba(0, 58, 76, .24); /* ---------- Instrumento · la capa oscura de medición ---------- * * Una regla nueva, y es de sistema: LA SUPERFICIE DE MEDICIÓN PRIMARIA DE * CADA ROL ES UN INSTRUMENTO OSCURO. HQ mide adopción y cumplimiento; el * líder mide su escuadra; el operador mide su rango. Esas tres —y solo * esas— viven en petróleo profundo. Todo lo demás sigue siendo tarjeta * blanca, que fue la decisión correcta y no se toca. * * No es capricho estético: es lo que dice el logo. El cian mide 1.31:1 * contra blanco y 9.36:1 sobre petróleo. Mientras el chrome fue todo claro, * el color de señal de la marca no tuvo dónde vivir salvo el rótulo de un * botón. Con el instrumento, el cian por fin trabaja donde debe: sobre la * cifra que importa. * * Y resuelve la tensión de fondo: "high tech" en un colegio no puede ser * una app oscura entera —salón con sol, gama media, docentes de 50— pero sí * puede ser un panel de instrumentos preciso dentro de una app clara. Es la * diferencia entre un tablero de avión y una consola de videojuego. */ --ink-900: #00131A; --ink-850: #001C26; --ink-800: #002733; --ink-700: #033B4B; --ink-line: rgba(125, 244, 250, .16); --ink-line-2:rgba(125, 244, 250, .09); --ink-text: #E4F8FB; --ink-text-2:#96BCC7; --ink-text-3:#6E939F; /* Los estados también cambian de tinta sobre oscuro: los inks claros medían menos de 3:1 ahí. Estos son los del tema oscuro, ya validados. */ --ink-ok: #8FDCAC; --ink-warn: #F2D287; --ink-crit: #F4AD9C; /* El filo superior de luz. Es la señal más barata y más reconocible de interfaz oscura bien hecha: sin él, una superficie oscura se ve plana y barata; con él, se ve fabricada. */ --edge-hi: inset 0 1px 0 rgba(255, 255, 255, .10); --edge-hi-soft: inset 0 1px 0 rgba(255, 255, 255, .06); /* Resplandor de señal. Solo sobre oscuro y solo en lo que está vivo. */ --glow-cyan: 0 0 0 1px rgba(0, 249, 255, .20), 0 10px 34px -10px rgba(0, 249, 255, .45); --glow-tight: 0 0 16px -2px rgba(0, 249, 255, .55); --sh-ink: 0 20px 50px -18px rgba(0, 19, 26, .55), 0 4px 12px -4px rgba(0, 19, 26, .3); /* Malla de luz detrás del instrumento: una fuente puntual arriba, como la tiene cualquier panel físico. Sin ella el bloque oscuro es una mancha. */ --mesh-cyan: radial-gradient(125% 85% at 50% -10%, rgba(0, 249, 255, .18) 0%, rgba(0, 249, 255, .05) 38%, rgba(0, 249, 255, 0) 68%); --mesh-ink: linear-gradient(178deg, var(--ink-850) 0%, var(--ink-900) 100%); /* Grano. Un degradado oscuro sin grano hace bandas en pantallas de 6 bits —justo las de gama media que este producto va a encontrar— y además es lo que separa una superficie "digital" de una que parece material. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); /* ---------- Movimiento ---------- */ --dur-1: 120ms; --dur-2: 200ms; --dur-3: 340ms; --dur-4: 620ms; /* entrada de tarjeta */ --dur-5: 1100ms; /* llenado de un arco o una cifra */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --ease-expo: cubic-bezier(.16, 1, .30, 1); /* frena tarde: se siente pesado y caro */ /* ---------- Vidrio (barra inferior flotante) ---------- * * Vidrio claro. El velo es opaco al 86% a propósito: más transparente deja * leer el texto que scrollea detrás y los rótulos pierden contraste. El * tinte y la sombra van en petróleo, así el vidrio pertenece a la marca * sin oscurecer la interfaz. */ --glass: rgba(255, 255, 255, .86); --glass-border: rgba(0, 58, 76, .10); --glass-blur: saturate(180%) blur(26px); --glass-shadow: 0 12px 32px -10px rgba(0, 58, 76, .26), 0 2px 8px -2px rgba(0, 58, 76, .10); /* ---------- Layout ---------- */ --app-w: 440px; --tap: 44px; --brandbar-h: 64px; --tabbar-gap: 112px; /* aire al final del scroll para librar la barra */ } /* -------------------------------------------------------------------------- Tema oscuro — opt-in explícito con data-theme="dark". No se activa con prefers-color-scheme: el producto se definió en blanco. Aquí el cian por fin trabaja a su máxima potencia: sobre el petróleo profundo es el acento interactivo directo, sin traducción. -------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --bg: #001A22; --surface: #002733; --surface-sunk: #00303E; --surface-mute: #003B4C; --border: #0A4457; --border-strong: #10586F; --text: #E8F6F9; --text-2: #9DBAC4; --text-3: #708E99; --text-on-brand: #00222D; --brand-500: var(--cyan); --brand-600: var(--cyan-600); --brand-700: var(--cyan-700); --brand-800: var(--cyan); --brand-950: #007E8C; --crit: #E8836C; --crit-ink: #F4AD9C; --crit-soft: #3A1F19; --crit-line: #5C332A; --warn: #E8B845; --warn-ink: #F2D287; --warn-soft: #322709; --warn-line: #524115; --ok: #4FC57E; --ok-ink: #8FDCAC; --ok-soft: #0D2E1C; --ok-line: #1B4C31; --net: var(--cyan); --net-ink: #7DF4FA; --net-soft: #002C38; --net-line: #00596B; --deemph: #14586E; --glass: rgba(0, 39, 51, .85); --glass-border: rgba(125, 244, 250, .14); --glass-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6), 0 2px 8px -2px rgba(0, 0, 0, .4); --sh-xs: 0 1px 2px rgba(0, 0, 0, .45); --sh-sm: 0 1px 3px rgba(0, 0, 0, .5); --sh-md: 0 4px 14px -4px rgba(0, 0, 0, .6); --sh-lg: 0 16px 40px -12px rgba(0, 0, 0, .72); --sh-sheet: 0 -10px 48px -12px rgba(0, 0, 0, .78); }