/* ============================================================ TEMA `terralabs` — la identidad de terralabs.ar traída a la app: gris oscuro, naranja e IBM Plex. Es el tema por defecto para quien llega desde el sitio (ver defaultThemeFor en js/ui/themes.js), así que el salto `terralabs.ar/studio` → esta app no se siente como entrar a otra empresa. Cumple el contrato semántico documentado en tokens/contract.css. ─── De dónde salen los valores ─── Del `theme.css` de terralabs.ar, superficie [data-surface="studio"] — que es la que corresponde: esta app se publica bajo Terralabs Studio, no bajo EdTech. Se toman VALORES, no componentes: la grilla blueprint, el marquee y el nav con notch del sitio son lenguaje de sitio institucional y no tienen nada que hacer en una app con sidebar y dashboard. Modo OSCURO es la base (es la cara de Studio); [data-mode='light'] mapea al `:root` claro del sitio (#efefef + naranja), que es la estética heredada de terralabs.ar y por lo tanto igual de legítima. ─── Cómo se resolvió "7 materiales, 2 colores" ─── Los 7 nombres del contrato (grass/gold/diamond/redstone/amethyst/copper/iron) se preservan, pero sus VALORES colapsan a la familia del naranja + neutros. No se tocó ningún componente. La única salida real de la paleta es el peligro — ver la advertencia sobre el carmín más abajo. ─── Tipografía ─── En terralabs.ar TODOS los títulos (h1, .lead, nombres de tarjeta, la sub-etiqueta de marca) son IBM Plex Mono 700, no una sans. Es el rasgo tipográfico más reconocible del sitio: si --font-display fuese una sans, el tema deja de leerse como Terralabs. Por eso --font-display y --font-pixel apuntan los dos a IBM Plex Mono, y la sans queda reservada para el cuerpo de texto largo. `Bebas Neue` está declarada en el theme.css del sitio pero no se usa en ninguna regla — no se trae acá a propósito. ============================================================ */ :root[data-theme='terralabs'] { /* ─── Superficies ─────────────────────────────────────────── */ --bg: #252525; /* --bg studio */ --bg-2: #171717; /* recesivo respecto de --panel: es la superficie de inputs, chips y tracks, y el #1F1F1F del sitio colisionaba con --panel (dejaba los campos invisibles) */ --panel: #1F1F1F; /* --surface studio */ --panel-2: #2A2A2A; /* elevado / hover */ --panel-3: #1A1A1A; /* hundido: input, chip inactivo */ --overlay: rgba(10, 10, 10, 0.6); /* ─── Texto ──────────────────────────────────────────────── */ --ink: #F5F5F5; /* --ink studio ~15.9:1 sobre --bg */ --ink-2: #D6D6D6; /* ~11.4:1 */ --muted: #A1A1A1; /* --muted studio ~6.4:1 sobre --panel */ --placeholder: #7A7A7A; /* 4.2:1 sobre --bg-2, que es donde vive; ≥3:1 contra cualquier otra superficie del tema */ --ink-inverse: #141414; /* ─── Bordes y relieve ─────────────────────────────────────── Terralabs es PLANO: nada de bisel ni de sombra de texto. El sitio separa capas con un borde de 1px y nada más. ⚠️ DESVÍO del mapa de la guía, que pedía --outline:#F5F5F5 ("en oscuro el contorno es la tinta"). Acá no funciona por dos usos concretos del contrato: · auth/layout aplican `inset -4px 0 0 var(--outline)` directo — con la tinta eso es una franja BLANCA de 4px entre el hero y el panel, que no existe en ningún lado de terralabs.ar. · .card__lock pinta `rgba(var(--outline-rgb), .72)` como velo de cápsula bloqueada y le escribe --ink-2 ENCIMA: con un outline claro el velo sale casi blanco y el texto desaparece. El contorno se queda oscuro y quien separa capas visiblemente es --frame (1px), que es como lo hace el sitio. */ --outline: #141414; --outline-rgb: 20, 20, 20; --frame: #2A2A2A; /* --line studio */ --frame-light: #333333; --bevel-light: transparent; --bevel-dark: transparent; --line: #2A2A2A; /* ─── Paleta de "materiales" ───────────────────────────────── El acento de Terralabs ES naranja, así que grass (acción primaria / éxito / XP) se vuelve naranja y el resto orbita esa familia. gold toma el --accent-2 del sitio; diamond es un durazno claro para foco/info; copper e iron son los neutros. */ --grass: #ff7f43; /* --accent studio — acción primaria, éxito, XP */ --grass-bright: #FF8C3D; /* --accent-2 / --accent-bright studio */ --grass-deep: #C2480A; --gold: #FFC236; /* atención / destacados */ --diamond: #FFB07A; /* foco / info */ --redstone: #E5405E; /* carmín — peligro. Ver advertencia abajo. */ --amethyst: #FFC236; /* colapsa a gold */ --copper: #3A3A38; /* carbón */ --iron: #A1A1A1; /* neutro / inactivo */ --grass-rgb: 255, 127, 67; --gold-rgb: 255, 194, 54; --diamond-rgb: 255, 176, 122; --redstone-rgb: 229, 64, 94; --iron-rgb: 161, 161, 161; /* Variantes legibles como TEXTO sobre --panel (no sobre el relleno). El naranja de texto es el --accent-ink del sitio, que ya está elegido para eso. */ --grass-ink: #fe7f24; /* --accent-ink studio — ~6.5:1 sobre --panel */ --gold-ink: #FFC236; /* ~10.2:1 */ --diamond-ink: #FFB07A; /* ~9.2:1 */ --danger-ink: #FF7A90; /* ~6.6:1 — rosado, NO naranja: ver abajo */ --success-ink: #fe7f24; --warning-ink: #FFC236; /* Texto que va ENCIMA de un relleno de material. No varían por modo: el relleno es el mismo en los dos. ⚠️ DESVÍO DELIBERADO del mapa de la guía de coherencia, que copiaba --on-accent:#FFFFFF del sitio. Sobre #ff7f43 el blanco da 2.5:1 — reprueba AA para texto normal (el sitio lo usa solo en un botón de 13px en versalitas, la app lo usa en botones de cuerpo). Los rellenos de este tema son todos CLAROS, así que la tinta encima tiene que ser oscura, igual que en pixel. */ --on-grass: #2B1006; /* ~7.1:1 sobre #ff7f43 */ --on-gold: #221A00; /* ~11.6:1 sobre #FFC236 */ --on-diamond: #3A1A05; /* ~9.3:1 sobre #FFB07A */ --on-redstone: #2E0009; /* ~4.7:1 sobre #E5405E */ --color-success: var(--grass); --color-warning: var(--gold); --color-info: var(--diamond); --color-danger: var(--redstone); --on-danger: var(--on-redstone); /* ─── Acentos por categoría ─────────────────────────────────── Ninguna categoría se diferencia por matiz: todas comparten el naranja de la marca: la categoría la dice el texto, no el color. Offboarding queda en gris, como en pixel. */ --cat-onboarding: var(--grass); --cat-onboarding-ink: var(--grass-ink); --cat-lideres: var(--grass); --cat-lideres-ink: var(--grass-ink); --cat-ia: var(--grass); --cat-ia-ink: var(--grass-ink); --cat-speakers: var(--grass); --cat-speakers-ink: var(--grass-ink); --cat-blandas: var(--grass); --cat-blandas-ink: var(--grass-ink); --cat-offboarding: var(--iron); --cat-offboarding-ink: #C4C4C4; --accent: var(--grass); --accent-ink: var(--grass-ink); --on-accent: var(--on-grass); /* ─── Dificultad ───────────────────────────────────────────── Progresión gris → carbón claro → naranja: "avanzado" es lo único que entra en territorio de marca, como una insignia. */ --diff-basico: var(--iron); --diff-intermedio: #6E6E6E; --diff-avanzado: var(--grass); /* ─── Tipografía ───────────────────────────────────────────── IBM Plex Mono 700 para todo lo que sea título o dato (es la firma del sitio); IBM Plex Sans para el cuerpo de texto, que es lo que realmente se lee en una capacitación. */ --font-display: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace; --font-pixel: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace; --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; /* ─── Relieves — plano, como el sitio ─────────────────────── Sin bisel, sin sombra dura en escalón, sin sombra de texto: un borde de 1px y, cuando hace falta despegar una capa, una sombra difusa. Los componentes no se enteran: siguen pidiendo los mismos tokens. */ --bevel-out: none; --bevel-in: none; --outline-ring: 0 0 0 1px var(--frame); --chip-ring: 0 0 0 1px var(--frame); --drop: 0 1px 2px rgba(0, 0, 0, 0.4); --drop-lg: 0 16px 32px rgba(0, 0, 0, 0.5); --frame-ring: 0 0 0 1px var(--frame); --frame-ring-lg: 0 0 0 1px var(--frame); --slot-in: inset 0 0 0 1px var(--frame); --text-shadow: none; --text-shadow-sm: none; /* ─── Esquinas ───────────────────────────────────────────── 14px es el --radius de las tarjetas de terralabs.ar. */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; /* ─── Superficie del reproductor de cápsulas ──────────────── Un escalón MÁS oscuro que --panel, para que el contenido embebido (juegos, quizzes) se distinga del resto de la app sin depender de si el modo claro u oscuro está activo — por eso el mismo valor se repite abajo en [data-mode='light'] en vez de heredar. */ --modal-bg: #141414; --modal-bg-2: #1B1B1B; --modal-ink: #F5F5F5; --modal-ink-2: #D6D6D6; --modal-muted: #A1A1A1; --modal-border: #2A2A2A; /* ─── Grilla y huecos ─────────────────────────────────────── --grid-line es el --grid-dot de studio. --glow es el halo naranja del sitio; acá alimenta el brillo de la grilla en vez de repetir el rgba() a mano. */ --glow: rgba(251, 112, 13, 0.45); --grid-line: rgba(255, 255, 255, 0.06); --grid-glow: rgba(var(--grass-rgb), 0.08); --inset: rgba(0, 0, 0, 0.35); --inset-soft: rgba(0, 0, 0, 0.22); /* ─── Hero de la pantalla de acceso ───────────────────────── Un halo naranja en la esquina sobre el gris de studio: es lo que separa el lado "producto" del lado del formulario, que si no quedaban del mismo tono y la pantalla se leía como un solo rectángulo oscuro. El halo es el --bg-glow del sitio. Sin franja de "pasto": eso es identidad pixel. */ --hero-bg: radial-gradient(115% 85% at 12% 8%, rgba(255, 127, 67, 0.20) 0%, transparent 62%), linear-gradient(160deg, #2E2E2E 0%, #1A1A1A 100%); --hero-landscape: none; /* ─── Tokens de componente ─────────────────────────────────── Google conserva su pill clara de siempre (lo pide su guía de marca); el XP se llena plano, porque un tema sin bisel tampoco brilla. */ --google-btn-bg: #FFFFFF; --google-btn-ink: #141414; --btn-danger-ink: var(--on-redstone); --xp-fill-bg: var(--grass); } /* Los bloques [data-category='...'] de theme-pixel.css no están scopeados por tema y siguen aplicando acá: --accent/--accent-ink resuelven bien solos porque indirectan a --cat-*, que sí es por-tema. Pero --on-accent es un literal hardcodeado en esos bloques (p.ej. #0E2408, pensado para el verde de pixel) — esta regla lo corrige. */ :root[data-theme='terralabs'] [data-category] { --on-accent: #2B1006; } /* ============================================================ `terralabs` — MODO CLARO ------------------------------------------------------------ Mapea al `:root` claro de terralabs.ar (gris claro + naranja), que es la estética heredada del sitio y convive con la de Studio. Solo cambian superficies, tinta, bordes y las variantes -ink: un naranja legible sobre #1F1F1F es ilegible sobre #f7f7f5, así que todas las tintas bajan de luminosidad. Los "materiales" valen igual en los dos modos — son la marca. --outline-ring/--chip-ring/--frame-ring/--slot-in NO se repiten: están definidos arriba en términos de var(--frame), y --frame sí cambia acá, así que se recalculan solos. ============================================================ */ :root[data-theme='terralabs'][data-mode='light'] { /* ─── Superficies ─────────────────────────────────────────── Gris cálido, NO blanco. El `:root` claro de terralabs.ar es #efefef sobre #f7f7f5, con el panel elevado en blanco puro; en una app con dashboard —mucha más superficie encendida a la vez que una landing— eso deslumbra. Todo baja unos pasos y el elevado deja de ser blanco: sigue "levantando" sobre --panel porque lo que separa capas es el CONTRASTE entre ellas, no lo cerca del blanco que esté la de arriba. Se conserva la relación de siempre: --panel por encima de --bg (la tarjeta levanta) y --bg-2 por debajo de --panel (el input se hunde). Sin eso los campos vuelven a desaparecer. */ --bg: #E6E5E1; /* la página */ --bg-2: #D9D8D3; /* hundido: inputs, chips, tracks */ --panel: #EFEEEA; /* tarjetas y paneles */ --panel-2: #F7F6F3; /* elevado / hover */ --panel-3: #DEDCD7; /* hundido dentro de un panel */ --overlay: rgba(20, 20, 20, 0.55); --ink: #141414; --ink-2: #3A3A38; --muted: #5C5C56; /* 4.7:1 incluso sobre --bg-2, la superficie más oscura de este modo */ --placeholder: #78786F; /* 3.0:1 sobre --bg-2, que es donde vive */ --ink-inverse: #F5F5F5; /* El contorno vuelve a ser oscuro: sobre superficies claras, un contorno claro es invisible. */ --outline: #141414; --outline-rgb: 20, 20, 20; --frame: #C6C5BE; --frame-light: #D4D3CC; --line: #C6C5BE; /* Tintas de acento para fondo claro. El naranja neón del sitio (#ff783f) da 2.4:1 sobre el papel — no llega ni de cerca a AA — así que como TEXTO se usa la parada profunda de la familia. Todas bajaron un punto más al oscurecerse las superficies: con menos blanco detrás, la tinta también tiene que ceder. */ --grass-ink: #A03B07; /* 4.7:1 en el peor caso (sobre --bg-2) */ --gold-ink: #7E5200; /* 4.7:1 */ --diamond-ink: #A03B07; --danger-ink: #AB2239; /* 4.9:1 */ --success-ink: #A03B07; --warning-ink: #7E5200; --cat-offboarding-ink: #4F4F49; /* En oscuro "intermedio" es un gris medio; sobre papel claro eso se pierde, así que baja de luminosidad. */ --diff-intermedio: #4F4F49; --inset: rgba(0, 0, 0, 0.07); --inset-soft: rgba(0, 0, 0, 0.05); --grid-line: rgba(0, 0, 0, 0.05); --drop: 0 1px 2px rgba(0, 0, 0, 0.08); --drop-lg: 0 16px 32px rgba(0, 0, 0, 0.14); /* El botón de Google mantiene su pill BLANCA aunque el resto del modo claro ya no lo sea: lo pide su guía de marca, y acá encima lo ayuda a leerse como un elemento aparte. */ --google-btn-bg: #FFFFFF; --google-btn-ink: #141414; --hero-bg: radial-gradient(115% 85% at 12% 8%, rgba(255, 127, 67, 0.22) 0%, transparent 62%), linear-gradient(160deg, #F2F1ED 0%, #DEDDD8 100%); }