/* ============================================================================ * NormaViva · Oficio&Circular — design tokens v2 * 2026-07-25 · deriva de un inventario de 2.546 usos de color en 50 hojas de prod * * Reemplaza a: .claude/skills/nv-brand-palette/tokens.css (v1, rampa Tailwind slate) * 5-design/normas_graficas.md §1 (paleta abr-2026, Tailwind gray) * los namespaces sueltos --pro-* / --me-* / --font-* * * PREFIJO --oc-* (Oficio&Circular). NO --nv-*: ese prefijo ya estaba ocupado por * assets/nv-tokens.css y pro-apps/_common.css, que definen su propio --nv-bg, * --nv-navy, --nv-text, --nv-surface, --nv-r-sm... y cargan DESPUES. Usarlo habria * hecho que estos tokens resolvieran a valores ajenos en /pro y mi-expediente, * sin error visible. Verificado 2026-07-25: --oc-* tiene 0 usos previos. * * REGLA: ninguna hoja vuelve a escribir un hex. Si falta un token, se agrega ACA. * El detector del paso 3 falla el build si aparece un literal fuera de este archivo. * ========================================================================== */ :root { /* ── MARCA ─────────────────────────────────────────────────────────────── Navy es el unico color de marca (decision founder 2026-06-21). */ --oc-navy-900: #0b1e3f; /* headings sobre claro, hover de CTA */ --oc-navy-800: #11294f; --oc-navy: #1b3a6b; /* PRIMARIO — CTA, header, links, marca */ --oc-navy-500: #2d5a9e; /* hover, highlight, serie 2 de charts */ --oc-navy-300: #6b86b6; --oc-navy-100: #dbe4f3; /* tinte sobre navy: badges y acentos del hero */ --oc-ink: #0f1f3d; /* 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: #60a5fa; /* ── 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: #8b99b0; /* 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: #a36d10; /* 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: #1b3a6b; /* oficio · reclamo · plantilla */ --oc-cat-1-bg: #eef2f8; --oc-cat-2: #a36d10; /* 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(45, 90, 158, .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(11, 30, 63, .06), 0 1px 1px rgba(11, 30, 63, .04); --oc-shadow: 0 10px 30px -12px rgba(11, 30, 63, .18), 0 4px 12px -4px rgba(11, 30, 63, .08); --oc-shadow-lg: 0 30px 60px -20px rgba(11, 30, 63, .25), 0 10px 20px -6px rgba(11, 30, 63, .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(11, 30, 63, .55); --oc-overlay: rgba(11, 30, 63, .10); --oc-overlay-xs: rgba(11, 30, 63, .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 IDENTIFICADO ───────────────────────────────────────────── pro-v3.css (5.549 b, teal #00bfa5 ×9) lo carga solo pro-v3.html, y nginx redirige 301 tanto /pro-v3 como /pro-v3.html a /pro — en beta Y en prod. La pagina es inalcanzable: ambos archivos se pueden borrar. El teal no necesita token. Verificado 2026-07-25. */