/* ============================================================================ * NormaViva · Ambiental — design tokens (TEMA del vertical) * * GENERADO por tools/generar_tokens_ambiental.py desde * `/var/www/normaviva/frontend/assets/tokens.css`. No editar a mano: si prod * agrega un token, se vuelve a correr el generador y ambiental lo hereda. * * QUE ES ESTO. Las hojas compartidas (style.css, nv_ux.css, polish.css, * header-trending.css, editorial-*.css ...) quedaron 100% tokenizadas en julio: * cero hex sueltos, solo `var(--oc-*)`. Ambiental nunca tuvo la capa que define * esas variables, asi que TODAS resolvian a vacio y su marca seguia hardcodeada * en ~35 archivos. Con este archivo cargado PRIMERO, las mismas hojas de prod * renderizan en esmeralda sin una sola bifurcacion por vertical. * * MISMOS NOMBRES QUE PROD, A PROPOSITO. El prefijo sigue siendo `--oc-*` y la * rampa sigue llamandose `--oc-navy-*` aunque aca sea verde. Renombrarla a * `--oc-esmeralda-*` obligaria a bifurcar las 14 hojas, que es justo lo que * este archivo existe para evitar. El nombre es el SLOT, no el color. * * REGLA: ninguna hoja vuelve a escribir un hex. Si falta un token, se agrega en * el generador para que prod y ambiental no se separen. * ========================================================================== */ :root { /* ── MARCA ─────────────────────────────────────────────────────────────── Navy es el unico color de marca (decision founder 2026-06-21). */ --oc-navy-900: #052a1c; /* headings sobre claro, hover de CTA */ --oc-navy-800: #07432c; --oc-navy: #0b4d34; /* PRIMARIO — CTA, header, links, marca */ --oc-navy-500: #1b6846; /* hover, highlight, serie 2 de charts */ --oc-navy-300: #61c09c; --oc-navy-100: #d8f6eb; /* tinte sobre navy: badges y acentos del hero */ --oc-ink: #083a27; /* maximo contraste */ /* Acento de marca. Es el & del wordmark (logo-header-v2.svg), el borde-izq de badges de monto, el hover de citas y el valor real de --pro-gold-500 en connect (cuyo nombre quedo mintiendo tras la migracion navy-only). NO colapsa al navy: es el unico contrapunto claro que tiene la marca. */ --oc-accent: #b08d57; /* LATON — decoracion: bordes, puntos, filetes */ /* El laton como TEXTO reprueba AA (3.09:1 sobre blanco). Version oscurecida para kickers y etiquetas; el de arriba queda para lo decorativo. */ --oc-accent-ink: #866a3f; /* 5.06:1 sobre blanco · 4.51:1 sobre bg-alt */ /* ── NEUTROS (navy profundo) ───────────────────────────────────────────── NO son Tailwind slate. Hue ~215 con mas saturacion: la rampa acompaña al navy en vez de convivir con el. */ --oc-text: #1b2740; /* titulos y texto fuerte */ --oc-body: #2c3a51; /* parrafos */ --oc-body-soft: #46536b; /* parrafos secundarios */ --oc-mute: #5d6b83; /* metadatos, captions, footer (el mas usado) */ --oc-subtle: #5f6f8b; /* placeholders, texto deshabilitado */ --oc-line-2: #c2cddf; /* bordes de control (inputs, chips) */ --oc-line: #dde4ef; /* separadores y bordes de card */ --oc-bg-alt: #eef2f8; /* bandas, zebra, fondo de seccion */ --oc-bg: #f7f9fc; /* fondo de pagina */ --oc-surface: #ffffff; /* cards y contenido */ --oc-on-navy: #ffffff; /* texto sobre fondo navy */ /* ── SEMANTICOS ────────────────────────────────────────────────────────── Solo ESTADO, nunca decoracion. Los tintes salen de la misma familia que el color base, no de la paleta de Tailwind. */ --oc-ok-bg: #e7f6ec; /* fondo suave de badge */ --oc-ok-line: #b9e3c6; /* borde de badge */ --oc-ok: #16a34a; /* icono, punto, barra */ --oc-ok-strong: #15803d; /* texto sobre ok-bg */ --oc-ok-deep: #14532d; /* texto sobre fondo claro, maximo contraste */ --oc-bad-bg: #fbeaea; --oc-bad-line: #f2c4c4; --oc-bad: #dc2626; --oc-bad-strong: #b91c1c; --oc-bad-deep: #7f1d1d; /* Ambar = advertencia y monto alto. NUNCA acento decorativo. Es el unico sobreviviente del dorado legacy. Rampa propia de 5 pasos: la de Tailwind (#f59e0b y familia) colapsa aca. */ --oc-warn-bg: #fdf4e3; --oc-warn-line: #edd9ad; --oc-warn: #c08a2a; /* icono, borde de acento, punto */ --oc-warn-strong: #96640f; /* texto sobre warn-bg */ --oc-warn-deep: #7c5209; /* texto sobre fondo claro */ /* Resultado de un fallo — semantica del dominio, no decoracion. Se mapean a los estados de arriba para que un cambio se propague solo. */ --oc-fallo-acoge: var(--oc-ok); --oc-fallo-parte: var(--oc-warn-strong); /* "ha lugar en parte" */ --oc-fallo-rechaza: var(--oc-bad); /* ── CATEGORICOS ───────────────────────────────────────────────────────── Codifican TIPO, no estado. A diferencia de los semanticos, su unico requisito es distinguirse ENTRE SI: por eso no pueden colapsar todos al navy. Viven en mi-expediente (categoria de plantilla, tipo de fuente). Origen: tres de las cuatro categorias ya usaban --me-* ; la cuarta quedo hardcodeada en purpura al agregarse. Ese purpura no es basura, es el token que falto — el sintoma exacto de no tener enforcement. OJO: hoy 1/2/3 reusan el tono de los semanticos. Es tolerable porque viven en superficies distintas, pero si algun dia un badge de categoria convive con uno de estado en la misma pantalla, hay que diferenciarlos. Escala de 6 pasos. Cubre los tres ejes categoricos que existen hoy: tipo de documento, tipo de entrada del historial, y tier de usuario. */ --oc-cat-1: #0b4d34; /* oficio · reclamo · plantilla */ --oc-cat-1-bg: #eef2f8; --oc-cat-2: #96640f; /* circular · recurso · consulta al chat */ --oc-cat-2-bg: #fdf4e3; --oc-cat-3: #15803d; /* respuesta · tier Pro */ --oc-cat-3-bg: #e7f6ec; --oc-cat-4: #6d28d9; /* articulo de ley · consulta · fallecido */ --oc-cat-4-bg: #ede9fe; --oc-cat-4-light: #8b5cf6; /* extremo claro del degradado bbrr */ --oc-cat-5: #a83a63; /* fallo · tier Amigos */ --oc-cat-5-bg: #fdeaf1; --oc-cat-6: #0f766e; /* tier Diamante · modo rapido */ --oc-cat-6-bg: #dcf2ef; /* ── FOCO ──────────────────────────────────────────────────────────────── Habia 10 colores distintos de outline en prod. Uno solo, y una excepcion documentada: sobre fondo navy el anillo navy es invisible. */ --oc-focus: var(--oc-navy-500); --oc-focus-on-dark: #ffd479; /* unico uso legitimo de calido */ --oc-focus-ring: 0 0 0 3px rgba(27, 104, 70, .28); /* ── TIPOGRAFIA ────────────────────────────────────────────────────────── Los nombres multi-palabra van SIN comillas a proposito: asi el token se puede interpolar dentro de un string JS o un atributo style sin romperlo (el bug que rompio app.js el 2026-07-25). */ --oc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --oc-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --oc-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --oc-font-doc: var(--oc-font-serif); /* cuerpo de fallos y oficios */ /* ── RADIOS ────────────────────────────────────────────────────────────── Tres pasos + dos semanticos. Antes habia 20 valores. */ --oc-r-sm: 6px; /* chips, badges, inputs chicos */ --oc-r: 12px; /* cards, botones, inputs */ --oc-r-lg: 18px; /* paneles, modales, contenedores grandes */ --oc-r-pill: 999px; /* pildoras */ --oc-r-circle: 50%; /* avatares, puntos */ /* ── SOMBRAS ───────────────────────────────────────────────────────────── Tintadas al navy, nunca negro puro. Habia 208 declaraciones distintas. */ --oc-shadow-sm: 0 1px 2px rgba(5, 42, 28, .06), 0 1px 1px rgba(5, 42, 28, .04); --oc-shadow: 0 10px 30px -12px rgba(5, 42, 28, .18), 0 4px 12px -4px rgba(5, 42, 28, .08); --oc-shadow-lg: 0 30px 60px -20px rgba(5, 42, 28, .25), 0 10px 20px -6px rgba(5, 42, 28, .10); /* Velos y superposiciones. Tintados al navy igual que las sombras: un velo negro puro sobre una marca navy se ve sucio, uno navy se ve intencional. */ --oc-scrim: rgba(5, 42, 28, .55); --oc-overlay: rgba(5, 42, 28, .10); --oc-overlay-xs: rgba(5, 42, 28, .06); /* ── MOVIMIENTO ────────────────────────────────────────────────────────── Habia 9 curvas distintas, entre ellas la default de Tailwind/Material. */ --oc-ease: cubic-bezier(.2, .8, .2, 1); --oc-ease-out: cubic-bezier(.16, 1, .3, 1); --oc-dur-fast: 120ms; --oc-dur: 180ms; --oc-dur-slow: 280ms; } /* ── COMPATIBILIDAD ──────────────────────────────────────────────────────── Los namespaces viejos apuntan a los tokens nuevos. Permite migrar hoja por hoja sin romper nada. Se eliminan cuando el detector reporte 0 usos. */ :root { --font: var(--oc-font-sans); --font-sans: var(--oc-font-sans); --font-serif: var(--oc-font-serif); --font-mono: var(--oc-font-mono); --color-primario: var(--oc-navy); --azul: var(--oc-navy); --azul-hover: var(--oc-navy-800); --gris: var(--oc-mute); --fondo: var(--oc-bg); --blanco: var(--oc-surface); --borde: var(--oc-line); --texto: var(--oc-body); --pro-font-display: var(--oc-font-serif); --pro-shadow-sm: var(--oc-shadow-sm); --pro-shadow: var(--oc-shadow); --pro-shadow-lg: var(--oc-shadow-lg); --pro-shadow-focus: var(--oc-focus-ring); --oc-shadow-focus: var(--oc-focus-ring); --shadow-sm: var(--oc-shadow-sm); --shadow-md: var(--oc-shadow); --me-display: var(--oc-font-serif); --me-navy-900: var(--oc-navy-900); --me-navy-800: var(--oc-navy-800); --me-blue-50: var(--oc-cat-1-bg); --me-blue-700: var(--oc-cat-1); --me-gold-100: var(--oc-cat-2-bg); --me-gold-700: var(--oc-cat-2); --me-green-50: var(--oc-cat-3-bg); --me-green-700: var(--oc-cat-3); } /* ── CODIGO MUERTO: BORRADO 2026-07-26 ────────────────────────────────────── pro-v3.css, pro-v3.html y pro-v3-overrides.js ya NO EXISTEN en ninguno de los dos docroots. Eran inalcanzables: nginx redirige 301 /pro-v3 y /pro-v3.html a /pro, en beta Y en prod, y ese redirect sigue vivo — no lo saques. Con ellos se fue el unico teal del sitio (un verde-azulado fuera de paleta), que nunca necesito token. Su literal no se repite aca a proposito: si queda escrito, toda auditoria de color lo sigue encontrando. */