/* ════════════════════════════════════════════════════════════════════ FUTURÍSTICA® · The.Archi.Designers · — X — PROJECT _xtoken_2026-05-21.css FUENTE DE VERDAD ÚNICA Y DEFINITIVA del sistema de diseño de —X— ════════════════════════════════════════════════════════════════════ Aprobado por: Robin Cuervo (CCO) · 21 mayo 2026 Base: _tokens_v4.3_2026-03-10.css (única versión que cumplía las leyes) Reemplaza: las 5 versiones en conflicto archivadas en /var/www/xbc-core-staging/legacy/tokens_2026-05-21/ DECISIÓN DE DISEÑO (cerrada, no se reabre): • Tratamiento: PLANO. Cero glass, cero box-shadow, cero blur, cero !important. Definición por borde de 1px. Aplica a COMPONENTES. • Entorno conservado: fondo, atmósfera, fases circadianas y filtros climáticos se mantienen intactos. El sistema circadiano no es glass. • Paleta TAD: --tad-origen = #7B5AA8 (violeta sobrio) --tad-forma = #4A6580 (azul pizarra — color del plano arquitectónico) --tad-materia = #C49A3C (bronce) --tad-vida = #02FFA3 (verde vida · digital/hex) --c-brand = var(--color-mint) #0A8174 (Mint · marca · físico/Pantone) • Dos modos base: --negro / --void = #0C1220 (alias semánticos del mismo valor) --warm = #F5F3EE • Colores de módulo: paleta vibrante, uso EXCLUSIVO como acento (Dosis 1) — ícono activo, línea, estado activo. Nunca en superficies ni fondos. Cada módulo tiene par void/warm (oscuro/claro) según el modo activo. Módulo 09 pendiente de confirmar. Estos colores son una desviación deliberada del espíritu sobrio de v4.3, aprobada por Robin (2026-05-25). DEPENDENCIA CRÍTICA A PROTEGER: Las 18 estaciones de ART.boarding bajo /public/dale/standalones/onboarding/v3/ referencian var(--negro) y no deben romperse. El alias --void existe para futuros consumidores; --negro queda como canónico. PROHIBIDO modificar tipografía sin nueva autorización explícita de Robin. Las familias, tamaños, pesos e interlineados se conservan EXACTOS desde v4.3. ════════════════════════════════════════════════════════════════════ AMPLIACIÓN 29 MAYO 2026 · Bloque C del corte ART.boarding v4 ════════════════════════════════════════════════════════════════════ Aprobado por: Robin Cuervo (CCO) · 29 mayo 2026 Gobernanza: TOKEN_NAMING.md (6 reglas de naming). 23 tokens nuevos en 3 secciones al final del archivo: 1. Escala de texto y línea sobre VOID 2. Escala de texto y línea sobre WARM (--tinta ya existía, se reutiliza) 3. ART.BOARDING · Tipografía editorial estilo Phaidon/Taschen ════════════════════════════════════════════════════════════════════ */ /* ── RESET (sin !important — la regla del sistema) ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; } /* ── TIPOGRAFÍA (intacta desde v4.3 — prohibido tocar) ── */ :root { --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Tenor Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 40px; --text-3xl: 56px; --tracking-wide: 0.05em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); } /* ── ESPACIADO (intacto desde v4.3) ── */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; } /* ── COLORES BASE — CERRADOS ── */ :root { --negro: #0C1220; --negro-rgb: 12, 18, 32; --void: var(--negro); /* alias semántico — mismo valor que --negro */ --warm: #F5F3EE; --c-brand: var(--color-mint); --c-brand-rgb: var(--color-mint-rgb); --color-mint-deep: #267355; /* Mint oscuro legible sobre crema — variante c-day de --c-brand-ui (2026-05-31) */ --color-mint: #0A8174; /* primitivo base de --c-brand — swap 2026-06-27: era #3EB489 */ --color-mint-rgb: 10, 129, 116; /* RGB de #0A8174 — sincronizado con --color-mint (swap 2026-06-27) */ --color-neon: #00FFA3; /* neón legacy — primitivo (no usado aún en build) */ --color-neon-rgb: 0, 255, 163; --color-teal-deep: #0A8174; /* teal — primitivo base de --c-success (2026-05-31) */ --color-teal-deep-rgb: 10, 129, 116; --glow-cool-rgb: 30, 38, 58; /* azul frío para gradientes ambiente (Bloque D · EST 01) */ --glow-dark-rgb: 4, 6, 12; /* dark casi negro para profundidad ambiente (Bloque D · EST 01) */ --violeta: #7B5AA8; --error: #DC3C3C; --error-rgb: 220, 60, 60; /* canal RGB de --error para rgba(...) — tinte de estado */ --warning: #E8913A; --warning-rgb: 232, 145, 58; /* canal RGB de --warning para rgba(...) — tinte de estado */ --c-success: var(--color-teal-deep); } /* ── COLORES TAD ── */ :root { --tad-origen: #7B5AA8; /* violeta sobrio */ --tad-forma: #4A6580; /* azul pizarra — color del plano arquitectónico (decisión 2026-05-25, reemplaza #F5F3EE) */ --tad-materia: #C49A3C; /* bronce */ --tad-vida: #02FFA3; /* verde vida digital · pase 2026-07-03: era #3EB489 */ } /* ──────────────────────────────────────────────────────────────────── ALIASES HACIA ATRÁS — preservar componentes legacy sin migración masiva Consumo verificado en inventario S1-T3 (xbc-core-staging): --materia → 21 archivos · --forma → 23 · --vida → 23 --origen → 23 archivos · --bronce → 7 --tad-*-rgb → 3 archivos c/u (necesarios para rgba(var(--*-rgb), α)) Cualquier componente que use estos nombres recibe el NUEVO valor canónico de la decisión 2026-05-21. ──────────────────────────────────────────────────────────────────── */ :root { --materia: var(--tad-materia); --forma: var(--tad-forma); --vida: var(--tad-vida); --origen: var(--tad-origen); --bronce: var(--tad-materia); /* RGB para mezclas y atmósferas */ --tad-origen-rgb: 123, 90, 168; --tad-forma-rgb: 74, 101, 128; /* RGB de #4A6580 azul pizarra */ --tad-materia-rgb: 196, 154, 60; --tad-vida-rgb: 2, 255, 163; /* RGB de #02FFA3 — sincronizado con --tad-vida (pase 2026-07-03) */ --btn-vida: var(--tad-vida); --btn-vida-rgb: var(--tad-vida-rgb); } /* ════════════════════════════════════════════════════════════════════ CIRCADIANO — 4 FASES El entorno se conserva. Los tokens de glass quedan neutralizados (transparent / none) para que los componentes legacy que aún los referencien no fallen, pero NO produzcan efecto vidrio. ════════════════════════════════════════════════════════════════════ */ /* DAWN 05-07h */ body.c-dawn { --bg: #100A1E; --text: #F0EEEC; --ink2: #C8C4C0; --muted: #706C68; --muted2:#3C3A38; --border: rgba(255,200,140,0.10); --line2: rgba(255,255,255,.05); --glass-surface: transparent; --glass-edge: transparent; --glass-edge-t: transparent; --glass-edge-b: transparent; --glass-shadow: none; --float-surface: transparent; --float-edge: transparent; --btn-bg: var(--warm); --btn-color: var(--negro); --c-brand-ui: rgba(var(--c-brand-rgb), 0.55); --bg-gradient: linear-gradient(to top, #200818 0%, #140C24 45%, #080612 100%); --bg-blob-a: rgba(200,60,140,0.55); --bg-blob-b: rgba(80,30,160,0.30); --bg-blob-ax: 15%; --bg-blob-ay: 85%; } /* DAY 07-18h — FIX v4.3: proton legible sobre crema */ body.c-day { --bg: #F0EEE8; --text: #1A1714; --ink2: #3C3A36; --muted: #787470; --muted2:#B0ACA8; --border: rgba(26,23,20,0.08); --line2: rgba(26,23,20,.05); --glass-surface: transparent; --glass-edge: transparent; --glass-edge-t: transparent; --glass-edge-b: transparent; --glass-shadow: none; --float-surface: transparent; --float-edge: transparent; --btn-bg: var(--negro); --btn-color: var(--warm); --c-brand-ui: var(--color-mint-deep); --bg-gradient: linear-gradient(to top, #E0D8C8 0%, #D8D0C0 40%, #C0CCD8 100%); --bg-blob-a: rgba(255,248,210,0.65); --bg-blob-b: rgba(190,210,240,0.30); --bg-blob-ax: 60%; --bg-blob-ay: 6%; } /* DUSK 18-21h — FIX v4.3: tierra quemada orgánico, sin salto violeta */ body.c-dusk { --bg: #1A0E06; --text: #EDE8E0; --ink2: #B8B0A4; --muted: #646058; --muted2:#3A3830; --border: rgba(240,180,80,0.10); --line2: rgba(255,255,255,.04); --glass-surface: transparent; --glass-edge: transparent; --glass-edge-t: transparent; --glass-edge-b: transparent; --glass-shadow: none; --float-surface: transparent; --float-edge: transparent; --btn-bg: var(--warm); --btn-color: var(--negro); --c-brand-ui: rgba(var(--c-brand-rgb), 0.50); --bg-gradient: linear-gradient(to top, #2C1204 0%, #1E1008 30%, #160C12 62%, #0C0810 100%); --bg-blob-a: rgba(200,80,10,0.42); --bg-blob-b: rgba(100,50,20,0.22); --bg-blob-ax: 82%; --bg-blob-ay: 80%; } /* NIGHT 21-05h */ body.c-night { --bg: #06080E; --text: #E8E6E4; --ink2: #A8A4A0; --muted: #585450; --muted2:#343230; --border: rgba(200,210,230,0.07); --line2: rgba(255,255,255,.03); --glass-surface: transparent; --glass-edge: transparent; --glass-edge-t: transparent; --glass-edge-b: transparent; --glass-shadow: none; --float-surface: transparent; --float-edge: transparent; --btn-bg: var(--warm); --btn-color: var(--negro); --c-brand-ui: rgba(var(--c-brand-rgb), 0.45); --bg-gradient: linear-gradient(to top, #020306 0%, #04060C 55%, #060A12 100%); --bg-blob-a: rgba(15,30,100,0.22); --bg-blob-b: rgba(4,6,18,0.55); --bg-blob-ax: 50%; --bg-blob-ay: 35%; } /* ════════════════════════════════════════════════════════════════════ CLIMA — modifica el circadiano, no lo reemplaza Filtros CSS de saturación/brillo. NO son glass. Los overrides de --float-surface se neutralizan a transparent para mantener consistencia con la decisión. ════════════════════════════════════════════════════════════════════ */ body.w-cloudy { filter: saturate(0.75) brightness(0.96); } body.c-day.w-cloudy { --bg-gradient: linear-gradient(to top, #C8C8C4 0%, #D8D8D4 45%, #C0C4CC 100%); filter: saturate(0.70) brightness(0.94); } body.w-rain { filter: saturate(0.55) brightness(0.88); } body.c-day.w-rain { --bg-gradient: linear-gradient(to top, #8898B0 0%, #9AA8BC 40%, #8898AC 100%); --float-surface: transparent; } body.c-dusk.w-rain { --bg-gradient: linear-gradient(to top, #181C28 0%, #141820 50%, #0C0E14 100%); filter: saturate(0.50) brightness(0.82); } body.w-storm { filter: saturate(0.35) brightness(0.78) contrast(1.08); } body.c-day.w-storm { --bg-gradient: linear-gradient(to top, #4A5060 0%, #505868 40%, #484E5C 100%); --float-surface: transparent; } body.w-fog { filter: saturate(0.45) brightness(1.04); } body.c-day.w-fog { --bg-gradient: linear-gradient(to top, #D8D8D4 0%, #E0E0DC 50%, #D4D4D0 100%); --float-surface: transparent; } /* ════════════════════════════════════════════════════════════════════ COLORES DE MÓDULO — 12 oficiales (La Biblia v3.0) ──────────────────────────────────────────────────────────────────── Uso EXCLUSIVO como ACENTO (Dosis 1): ícono activo, línea de selección, estado activo, badge mínimo. PROHIBIDO en superficies o fondos. Cada módulo tiene par void/warm — la variante "-warm" se usa cuando el modo claro es activo o sobre fondo --warm, para mantener contraste. Desviación deliberada del espíritu sobrio v4.3, aprobada por Robin (2026-05-25). Módulo 09 (Documentos) pendiente de confirmar. Inventario S1-T3: nombres viejos --mod-resumen/proyectos/kanban/equipo/ financiero/perfil → 0 archivos los consumen, reemplazo limpio sin alias. ════════════════════════════════════════════════════════════════════ */ :root { /* 01 · CRM & INTAKE */ --mod-01-crm: #00D9BE; --mod-01-crm-warm: #00A88F; /* 02 · PROYECTOS & TAD 4.0 */ --mod-02-proyectos: #3DA5FF; --mod-02-proyectos-warm:#2F7DC4; /* 03 · SCHEDULE & PROGRAMACIÓN */ --mod-03-schedule: #6E7DFF; --mod-03-schedule-warm: #5360D6; /* 04 · TAREAS & TRAFFIKER */ --mod-04-tareas: #FFB627; --mod-04-tareas-warm: #C7860F; /* 05 · WORKLOGS */ --mod-05-worklogs: #E0A94F; --mod-05-worklogs-warm: #A87C2E; /* 06 · THINK TANK */ --mod-06-thinktank: #B57BFF; --mod-06-thinktank-warm:#8E54D6; /* 07 · MOODBOARD + BIM */ --mod-07-moodboard: #FF5C9E; --mod-07-moodboard-warm:#D63E7D; /* 08 · PERMISOS & COMPLIANCE */ --mod-08-permisos: #8AA6C0; --mod-08-permisos-warm: #647E98; /* 09 · DOCUMENTOS (pendiente de confirmar) */ --mod-09-documentos: #A6C26F; --mod-09-documentos-warm: #7E9C49; /* 10 · PORTAL CLIENTE */ --mod-10-portal: #E0C089; --mod-10-portal-warm: #B0935C; /* 11 · FINANCIERO & DASHBOARD */ --mod-11-financiero: #FFC845; --mod-11-financiero-warm:#C79410; /* 12 · EQUIPO & TALENTO */ --mod-12-equipo: #FF9472; --mod-12-equipo-warm: #D66848; } /* ════════════════════════════════════════════════════════════════════ EXTENSIÓN MUNDOS A/B/C — aprobada por Robin Cuervo · 2026-03-29 Conservada literal desde v4.3. Regla: ningún token nuevo sin OK de Robin. ════════════════════════════════════════════════════════════════════ */ :root { /* FASE SORAYAMA — activa 10-14h o clima frío/lluvia */ --sora-chrome: #C8D8E8; --sora-chrome-dim: rgba(200, 216, 232, 0.18); --sora-mercury: rgba(180, 200, 220, 0.07); /* NEGRO TIPOGRÁFICO — para fondos claros (Mundos B y C) */ --tinta: #1A1A1A; /* BRONCE DESATURADO — sobre fondos claros */ --bronce-muted: #A68A64; /* CREMA PROFUNDA — fondo Mundo C */ --warm-deep: #EBE9E4; /* BORDE SOBRE FONDOS CLAROS — rejilla Mundo C */ --border-warm: 1px solid #D1CFCA; /* ESPACIADO DE MUNDOS */ --air-vacuum: 75vh; --air-margin: 15vh 10vw; --air-side-vacuum: 60vw; --prestige-margin: 12vw; /* ANIMACIÓN DEL RITUAL */ --sora-open-curve: cubic-bezier(0.2, 0, 0, 1); --sora-open-duration: 1.2s; --atm-morph: 2.5s ease-in-out; } /* ════════════════════════════════════════════════════════════════════ AMPLIACIÓN BLOQUE C · ART.BOARDING v4 · 29 mayo 2026 Aprobado por: Robin Cuervo (CCO) · 29 mayo 2026 Gobernanza: TOKEN_NAMING.md (6 reglas de naming) ════════════════════════════════════════════════════════════════════ */ /* ── ESCALA DE TEXTO Y LÍNEA SOBRE VOID ────────────────────────────── Para vistas con fondo --negro / --void. Nomenclatura por intensidad semántica (strong / medium / soft) según TOKEN_NAMING.md Regla 3. ──────────────────────────────────────────────────────────────────── */ :root { --c-text-strong: rgba(245, 243, 238, 1.00); --c-text-medium: rgba(245, 243, 238, 0.65); --c-text-soft: rgba(245, 243, 238, 0.38); --c-line-soft: rgba(245, 243, 238, 0.08); --c-line-strong: rgba(245, 243, 238, 0.18); } /* ── CHROME COOL · ESCALA SOBRE VOID — Dashboard "THE MATRIX" ───────── Familia cromo frío (azulada) para la UI del dashboard -X- (corte v109). Coherente con --sora-chrome (estética Sorayama · Regla 6). Escala semántica strong/medium/soft (Regla 3), prefijo --c- (Regla 2). Aprobado por: Robin Cuervo (CCO) · 2 junio 2026. ──────────────────────────────────────────────────────────────────── */ :root { --c-chrome-strong: #D4E0EC; /* texto/acento primario cool sobre void */ --c-chrome-strong-rgb: 212, 224, 236; /* triplet para rgba(var(--c-chrome-strong-rgb), α) */ --c-chrome-medium: #8FA8BC; /* texto secundario */ --c-chrome-medium-rgb: 143, 168, 188; /* triplet para tinte neutro de estado */ --c-chrome-soft: #4A6070; /* texto terciario · líneas */ } /* ── ESCALA DE TEXTO Y LÍNEA SOBRE WARM ────────────────────────────── Para vistas con fondo --warm / --warm-deep. --tinta ya existe arriba (#1A1A1A), se reutiliza como text-strong. ──────────────────────────────────────────────────────────────────── */ :root { --c-text-on-warm-medium: rgba(26, 26, 26, 0.55); --c-text-on-warm-soft: rgba(26, 26, 26, 0.28); --c-line-on-warm: rgba(26, 26, 26, 0.15); } /* ── ART.BOARDING · TIPOGRAFÍA EDITORIAL ───────────────────────────── Escala editorial estilo Phaidon/Taschen para el flujo de iniciación. Independiente de la escala UI estándar (--text-xs..3xl) que se conserva intacta desde v4.3. Esta escala usa unidades fijas (px) para tamaños pequeños/medios y clamp() con vw para tamaños monumentales que escalan con viewport. ──────────────────────────────────────────────────────────────────── */ :root { /* Escala tipográfica editorial */ --fs-2xs: 10px; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 20px; --fs-lg: 25px; --fs-xl: 32px; --fs-2xl: clamp(2.2rem, 4.5vw, 4.5rem); --fs-display: clamp(52px, 7vw, 88px); --fs-hero: clamp(4rem, 10vw, 12rem); --fs-monumental: clamp(5rem, 13vw, 15rem); --fs-body-station: clamp(20px, 2vw, 28px); /* cuerpo legible de estaciones ART.boarding · piso 20px (no 18) */ /* Letter-spacing editorial — más amplio que --tracking-* UI */ --tracking-editorial-tight: -0.03em; --tracking-editorial-normal: 0; --tracking-editorial-wide: 0.05em; --tracking-editorial-wider: 0.12em; --tracking-editorial-widest: 0.20em; /* Safe areas para HUD del onboarding */ --hud-h: 2.5rem; --safe-top: calc(var(--hud-h) + 4rem); --safe-bottom: calc(var(--hud-h) + 2rem); /* Duración base de animaciones del flujo */ --dur: 1.0s; } /* ════════════════════════════════════════════════════════════════════ CONTRATO SEMÁNTICO DE TEMA · PASO 0 · 2026-06-11 ──────────────────────────────────────────────────────────────────── Aprobado por: Robin Cuervo (CCO). Gobernanza: TOKEN_NAMING.md. Vocabulario ÚNICO que TODO el UI consumirá para temas (void / warm / fases circadianas). Esta capa define los valores de VOID en :root → VOID es el tema DEFAULT y el fallback garantizado (nunca deprecado). warm y las 4 fases circadianas sobreescriben en capas posteriores. PASO 0 (este bloque): CERO consumidores. Los tokens se definen pero aún NADA los referencia → render byte-idéntico (verificado por pixel-diff del Matrix void + diff de fuente que muestra solo adiciones). El re-apuntado de --c-bg/--c-text/--bd/--ui-* del Matrix a estos nombres ocurre en PASO 1. Nomenclatura: nombres 0-colisión (no pisan --c-text-* ni --c-line-* de ART.boarding, que son blanco cálido editorial, ni --c-bg ni --c-surface ya en uso). Familia de texto UI = chrome cool (--c-chrome-* family). Valores = void por construcción (var() al canónico existente). ════════════════════════════════════════════════════════════════════ */ :root { /* ── Superficie (plano; el borde define, no el relleno) ── */ --c-bg-ui: var(--void); --c-surface-ui: var(--void); --c-surface-raised: var(--void); /* ── Texto / ink (escala strong→faint, familia chrome cool sobre void) ── */ --c-ink: var(--c-chrome-strong); --c-ink-2: var(--c-chrome-medium); --c-ink-3: var(--c-chrome-soft); --c-ink-4: rgba(var(--c-chrome-strong-rgb), 0.18); /* ── Líneas / bordes ── */ --c-edge: rgba(var(--c-chrome-strong-rgb), 0.10); --c-edge-strong: rgba(var(--c-chrome-strong-rgb), 0.20); /* ── Ink EDITORIAL · voz cálida ART.boarding (Visión/Meta, narrativa de Monografía, nombres monumentales). En void = cream EXACTO (alias de los --c-text-* y --c-line-soft de ART.boarding → pixel-diff CERO contra el estado actual). En fases CLARAS converge a la tinta cálida del chrome (legible sobre crema). Las fases OSCURAS (dawn/evening/night) heredan este cream. Escala paralela a --c-ink (strong→soft) + edge editorial. ── */ --c-ink-editorial: var(--c-text-strong); --c-ink-editorial-2: var(--c-text-medium); --c-ink-editorial-3: var(--c-text-soft); --c-edge-editorial: var(--c-line-soft); --c-edge-editorial-strong: var(--c-line-strong); /* ── Acento de proyecto — PASO 0: chrome (fallback). PASO 2: módulo activo (par void/warm) ── */ --c-accent: var(--c-chrome-strong); --c-accent-rgb: var(--c-chrome-strong-rgb); --c-on-accent: var(--void); /* ── Estado operativo + tinte de fondo ── */ --c-neutral: var(--c-chrome-medium); --c-ok: var(--c-success); --c-warn-ui: var(--warning); --c-err: var(--error); --c-ok-tint: rgba(var(--tad-vida-rgb), 0.08); --c-warn-tint: rgba(var(--warning-rgb), 0.10); --c-err-tint: rgba(var(--error-rgb), 0.10); --c-neutral-tint: rgba(var(--c-chrome-medium-rgb), 0.08); /* ── Inversión (botones) ── */ --c-btn-bg: var(--warm); --c-btn-ink: var(--void); } /* ════════════════════════════════════════════════════════════════════ PASO 2 · VALORES WARM + LADDER CIRCADIANO (2026-06-11) ──────────────────────────────────────────────────────────────────── Sobreescribe el contrato (:root = void) en dos ejes del : · [data-theme="warm"] → DÍA estático (crema interior) · body[data-theme="auto"].c- → fase circadiana (bajo auto) ANCLAS FIJAS (Robin · 2026-06-11): · NOCHE = void EXACTO (#0C1220). NO se redefine → hereda :root. (#06080E descartado: el void aprobado ES la noche.) · DÍA = warm / luz de interior cálida y suave (NO blanco, NO glare). · dawn/dusk = puentes void↔warm · morning/evening = pasos al ancla vecina. Arco de luminosidad (0 = void · 1 = warm): night 0 → dawn .30 → morning .88 → DÍA 1 → dusk .62 → evening .24 → night 0 La polaridad del texto invierte en el amanecer (dawn→morning) y en el atardecer (dusk→evening), igual que la luz real. Acento vía color-mix() (no tripletes). --c-accent-rgb queda como SHIM numérico mientras el Matrix consuma rgba(var(--proj-rgb), α); migrar esos consumidores a color-mix es la deuda de cierre de Paso 2. La hora de cruce a void NO vive aquí: es un dial en JS (Paso 3). CERO consumidores hoy: ningún layout emite data-theme aún (Paso 3) → render en producción byte-idéntico a void. Las fases se activan en Paso 3. ════════════════════════════════════════════════════════════════════ */ :root { /* Primitivos warm — el "dial" de crema vive aquí, ajustable de un toque */ --c-warm-bg: #EFE9DE; /* crema cálida suave · ancla DÍA */ --c-warm-surface: #F4EFE6; --c-warm-raised: #F8F4EC; --c-warm-ink: #211C15; /* casi-negro cálido sobre crema */ --c-warm-ink-2: #51493C; --c-warm-ink-3: #8A8072; --c-warm-edge: rgba(33, 28, 21, 0.10); --c-warm-edge-strong: rgba(33, 28, 21, 0.18); /* acento sobre crema = --tad-vida (mint) mezclado hacia void — repunteado desde --c-brand (ahora teal) 2026-06-27 */ --c-warm-accent: color-mix(in oklab, var(--tad-vida) 64%, var(--void)); /* texto cálido-claro para superficies oscuras (dawn / evening) */ --c-twilight-ink: #E8E2D6; --c-twilight-ink-2: #9A9184; --c-twilight-ink-3: #5E574C; } /* ── DÍA estático · ancla warm (data-theme="warm") — INTACTO ── Separado de c-day: la paleta Bogotá retunea la FASE circadiana (12–17h), no el modo manual warm. El ancla conserva sus valores warm originales. ── */ /* ── VOID manual (data-theme="void") · FIX1 · fix hermano del warm ── Chrome OSCURO al conmutar a Void en un bundle que NO carga _matrix-base (warm). ── */ [data-theme="void"] { --c-bg: var(--void); /* #0C1220 */ --c-ink: var(--c-chrome-strong); /* texto claro */ --c-ink-3: var(--c-chrome-soft); --c-edge: rgba(var(--c-chrome-strong-rgb), 0.10); } [data-theme="warm"] { --bg: var(--c-warm-bg); /* FIX2 · cuerpo = mismo crema oficial que el chrome (#EFE9DE) */ --c-bg: var(--c-warm-bg); /* chrome canónico (sidebar/topbar/avatar-menu) — antes solo en _matrix-base (void) */ --c-bg-ui: var(--c-warm-bg); --c-surface-ui: var(--c-warm-surface); --c-surface-raised: var(--c-warm-raised); --c-ink: var(--c-warm-ink); --c-ink-2: var(--c-warm-ink-2); --c-ink-3: var(--c-warm-ink-3); --c-ink-4: color-mix(in srgb, var(--c-warm-ink) 16%, transparent); --c-edge: var(--c-warm-edge); --c-edge-strong: var(--c-warm-edge-strong); /* editorial converge a la tinta cálida del chrome en fase clara */ --c-ink-editorial: var(--c-ink); --c-ink-editorial-2: var(--c-ink-2); --c-ink-editorial-3: var(--c-ink-3); --c-edge-editorial: var(--c-edge); --c-edge-editorial-strong: var(--c-edge-strong); --c-accent: var(--c-warm-accent); --c-accent-rgb: 38, 115, 85; /* SHIM ≈ --c-accent (mint-deep) */ --c-on-accent: var(--c-warm-bg); --c-neutral: var(--c-warm-ink-3); --c-btn-bg: var(--c-warm-ink); --c-btn-ink: var(--c-warm-bg); } /* ── DÍA circadiano · fase c-day (12–17h) · paleta Bogotá ── bg/ink = valores Bogotá literales (diseño deliberado, no tocar). ink-2/ink-3 = derivados warm proporcionales al nuevo ink (fracc. 0.22/0.49 hacia bg, mismo método que la escala warm canónica → "como están hoy"). surface/edge/ink-4/accent siguen el ancla warm (fuera de alcance). ── */ body[data-theme="auto"].c-day { --c-bg-ui: #EDE8DC; /* Bogotá */ --c-surface-ui: var(--c-warm-surface); --c-surface-raised: var(--c-warm-raised); --c-ink: #251E14; /* Bogotá */ --c-ink-2: #514A40; /* derivado warm */ --c-ink-3: #878176; /* derivado warm */ --c-ink-4: color-mix(in srgb, var(--c-warm-ink) 16%, transparent); --c-edge: var(--c-warm-edge); --c-edge-strong: var(--c-warm-edge-strong); --c-ink-editorial: var(--c-ink); /* = #251E14, igual al brief */ --c-ink-editorial-2: var(--c-ink-2); --c-ink-editorial-3: var(--c-ink-3); --c-edge-editorial: var(--c-edge); --c-edge-editorial-strong: var(--c-edge-strong); --c-accent: var(--c-warm-accent); --c-accent-rgb: 38, 115, 85; --c-on-accent: var(--c-warm-bg); --c-neutral: var(--c-warm-ink-3); --c-btn-bg: var(--c-warm-ink); --c-btn-ink: var(--c-warm-bg); } /* ── MORNING · paso suave hacia DÍA (luz de ventana, más fresca) ── */ body[data-theme="auto"].c-morning { --c-bg-ui: #F0EDE4; /* Bogotá */ --c-surface-ui: color-mix(in oklab, var(--c-warm-surface) 90%, #D4DCE4); --c-surface-raised: var(--c-warm-raised); --c-ink: #1E1810; /* Bogotá */ --c-ink-2: #4C473F; /* derivado warm */ --c-ink-3: #858078; /* derivado warm */ --c-ink-4: color-mix(in srgb, #1C1813 15%, transparent); --c-edge: rgba(28, 24, 19, 0.09); --c-edge-strong: rgba(28, 24, 19, 0.16); --c-ink-editorial: var(--c-ink); --c-ink-editorial-2: var(--c-ink-2); --c-ink-editorial-3: var(--c-ink-3); --c-edge-editorial: var(--c-edge); --c-edge-editorial-strong: var(--c-edge-strong); --c-accent: var(--c-warm-accent); --c-accent-rgb: 38, 115, 85; --c-on-accent: var(--c-warm-bg); --c-neutral: #867D6E; --c-btn-bg: #1C1813; --c-btn-ink: var(--c-warm-bg); } /* ── DUSK · puente warm→void (hora dorada, crema más profunda) ── */ body[data-theme="auto"].c-dusk { --c-bg-ui: #E8D8B8; /* Bogotá */ --c-surface-ui: color-mix(in oklab, var(--c-warm-surface) 84%, #D6B978); --c-surface-raised: color-mix(in oklab, var(--c-warm-raised) 88%, #DEC489); --c-ink: #2C1E08; /* Bogotá */ --c-ink-2: #55472F; /* derivado warm */ --c-ink-3: #88795E; /* derivado warm */ --c-ink-4: color-mix(in srgb, #241C12 16%, transparent); --c-edge: rgba(36, 28, 18, 0.11); --c-edge-strong: rgba(36, 28, 18, 0.19); --c-ink-editorial: var(--c-ink); --c-ink-editorial-2: var(--c-ink-2); --c-ink-editorial-3: var(--c-ink-3); --c-edge-editorial: var(--c-edge); --c-edge-editorial-strong: var(--c-edge-strong); --c-accent: var(--c-warm-accent); --c-accent-rgb: 38, 115, 85; --c-on-accent: var(--c-warm-bg); --c-neutral: #8E7E64; --c-btn-bg: var(--bronce); --c-btn-ink: var(--c-warm-bg); } /* ── DAWN · puente void→warm (madrugada cálida, superficie oscura) ── */ body[data-theme="auto"].c-dawn { --c-bg-ui: #1A1B2E; /* Bogotá */ --c-surface-ui: color-mix(in oklab, var(--void) 72%, var(--c-warm-bg)); --c-surface-raised: color-mix(in oklab, var(--void) 64%, var(--c-warm-bg)); --c-ink: #DCD8F0; /* Bogotá */ --c-ink-2: #A39EB4; /* derivado cool/violeta (Robin) */ --c-ink-3: #6A6478; /* Bogotá */ --c-ink-editorial: #F2F0F8; /* Bogotá (override sobre :root cream) */ --c-ink-4: color-mix(in srgb, var(--c-twilight-ink) 16%, transparent); --c-edge: color-mix(in srgb, var(--c-twilight-ink) 12%, transparent); --c-edge-strong: color-mix(in srgb, var(--c-twilight-ink) 22%, transparent); --c-accent: var(--tad-vida); --c-accent-rgb: var(--tad-vida-rgb); --c-on-accent: var(--void); --c-neutral: var(--c-twilight-ink-3); --c-btn-bg: var(--c-warm); --c-btn-ink: var(--void); } /* ── EVENING · paso suave hacia NOCHE (íntimo, lámpara, hacia void) ── */ body[data-theme="auto"].c-evening { --c-bg-ui: #16111A; /* Bogotá */ --c-surface-ui: color-mix(in oklab, var(--void) 80%, var(--c-warm-bg)); --c-surface-raised: color-mix(in oklab, var(--void) 74%, var(--c-warm-bg)); --c-ink: #E0D4EC; /* Bogotá */ --c-ink-2: #A49AAD; /* derivado cool/violeta */ --c-ink-3: #675F6E; /* derivado cool/violeta */ --c-ink-editorial: #F5F3EE; /* Bogotá (override explícito sobre :root) */ --c-ink-4: color-mix(in srgb, #E6DECF 16%, transparent); --c-edge: color-mix(in srgb, #E6DECF 10%, transparent); --c-edge-strong: color-mix(in srgb, #E6DECF 18%, transparent); --c-accent: var(--tad-vida); --c-accent-rgb: var(--tad-vida-rgb); --c-on-accent: var(--void); --c-neutral: #565041; --c-btn-bg: var(--c-warm); --c-btn-ink: var(--void); } /* ── NIGHT · ancla void EXACTA — SIN override, hereda :root (#0C1220) ── body[data-theme="auto"].c-night cae a :root void POR DISEÑO (Robin): el void aprobado ES la noche; no se inventa un night nuevo. ── */ /* ── FIN _xtoken_2026-05-21.css ── Próximo paso (Sesión 2, con OK de Robin): 1. Importar este archivo desde resources/css/app.css ✓ HECHO 2026-05-29 2. Migrar componentes que aún referencien tokens de glass/shadow/blur 3. Eliminar definitivamente los archivos legacy de /legacy/tokens_2026-05-21/ una vez verificada la migración Historial de ampliaciones: 2026-05-29 · Bloque C ART.boarding · 23 tokens en 3 secciones (texto sobre void, texto sobre warm, tipografía editorial) bajo gobernanza TOKEN_NAMING.md 2026-06-11 · Paso 0 arquitectura de temas · contrato semántico (24 tokens 0-colisión, valores = void, cero consumidores) 2026-06-11 · Paso 2 valores warm + ladder circadiano · ancla DÍA crema + 6 fases (night=void) sobre data-theme, color-mix acento, cero consumidores hasta Paso 3 ──────────────────────────────────────────────────────────────────── */