/* * central-tokens.css — fuente de verdad del estándar de diseño "Central" * Ver: quantum-central-kb/standards-diseno-central.md (LEY, gatea el juez) * Referencia visual: frontend-propuesta-visual/propuesta-juez-v4-colores.html (claro) * frontend-propuesta-visual/propuesta-juez-v3-dark.html (oscuro) * * TANDA 0 (QUA-224): esta hoja SOLO instala tokens + fuente. No migra ninguna * pantalla todavía — NO está linkeada en index.html todavía, nada la consume * aún. Riesgo cero por diseño. * * SCOPING (decidido por el juez en el gate de Tanda 0): los tokens NO viven en * `:root` — viven bajo `[data-skin="central"]`. Así la hoja se puede linkear * global desde ya sin pisar los `--bg`/`--ink` viejos de styles.css: una * pantalla/contenedor migra cuando su nodo (o el ) declara * `data-skin="central"`, y hereda TODO el set. Migración = prender el * atributo + estilar con estos tokens. Nada sin el atributo cambia jamás. * * TANDA 1 (QUA-224): resuelta la colisión documentada arriba. `data-theme` * vive en (theme-init.js), pero `data-skin="central"` se prende en * contenedores descendientes (rail/topbar/menu), no en — así el resto * de la app (no migrada) nunca ve estos tokens. Eso rompe el selector * compuesto `[data-skin="central"][data-theme="dark"]` (exige los dos * atributos en el MISMO nodo). Se agrega la variante por ancestro * `html[data-theme="dark"] [data-skin="central"]` a los MISMOS bloques — * cero valores duplicados, solo un selector más. * * Regla de 3 capas de color (standards-diseno-central.md §1): * 1. MARCO (berenjena/plum) — rail/nav, nunca cambia por sección. * 2. ACCIÓN (verde/go) — SOLO botón primario y selección activa. * 3. IDENTIDAD (dominio) — --dom-* por área: menú, chips, headers. * Los --warn/--bad/--go de ESTADO son semánticos y nunca se pisan con * el color de dominio (un ítem de Garantías vencido: chip coral + badge rojo). * * Claro y oscuro salen del MISMO set de custom properties — prohibido * duplicar hojas. Toggle vía [data-theme="light"] / [data-theme="dark"] * (misma convención que styles.css:13,69 — no introducir un mecanismo nuevo). */ [data-skin="central"], [data-skin="central"][data-theme="light"], html[data-theme="light"] [data-skin="central"] { /* MARCO (berenjena) */ --plum-deep: oklch(30% 0.072 330); --plum-hover: oklch(36% 0.075 330); --plum-pill: oklch(97% 0.01 330 / 0.16); --plum-text: oklch(92% 0.015 330); --plum-dim: oklch(76% 0.03 330); /* Superficie / texto base */ --bg: oklch(98.6% 0.003 330); --surface: oklch(100% 0 0 / 0); --card: oklch(99.4% 0.002 330); --line: oklch(90% 0.008 330); --line-2: oklch(83% 0.012 330); --ink: oklch(25% 0.022 330); /* 11.9:1 */ --ink-2: oklch(44% 0.024 330); /* 6.6:1 */ --ink-3: oklch(56% 0.02 330); /* 4.5:1 */ /* ACCIÓN (verde) + link */ --go: oklch(50% 0.105 165); --go-ink: oklch(42% 0.10 165); --go-soft: oklch(94% 0.045 165); --link: oklch(48% 0.11 255); /* IDENTIDAD por dominio (tinta AA sobre fondo suave) */ --dom-crm: oklch(46% 0.11 255); --dom-crm-soft: oklch(93% 0.035 255); --dom-mercado: oklch(48% 0.115 70); --dom-mercado-soft: oklch(94% 0.05 85); --dom-oper: oklch(46% 0.10 155); --dom-oper-soft: oklch(93.5% 0.045 155); --dom-catalogo: oklch(46% 0.09 205); --dom-catalogo-soft: oklch(93.5% 0.04 205); --dom-garantias: oklch(48% 0.13 20); --dom-garantias-soft: oklch(94% 0.035 20); --dom-admin: oklch(45% 0.02 330); --dom-admin-soft: oklch(93% 0.008 330); --dom-contenido: oklch(46% 0.12 305); --dom-contenido-soft: oklch(93.5% 0.04 305); /* Odoo / Integraciones — DECISIÓN DEL OWNER 07/07 («el mint y el color general del sistema»): usa el acento general (--go, mint 165), NO un dominio nuevo. Referencia por var() para que siga siempre a la paleta general. */ --dom-odoo: var(--go-ink); --dom-odoo-soft: var(--go-soft); /* Acento "Orgánico" dentro de Contenido (QUA-439) — hue propio (150), a propósito distinto de --dom-oper (155, identidad de Operaciones) para no mezclar dominios (ver nota L665 de styles.css). */ --cnt-organico: oklch(46% 0.10 150); --cnt-organico-soft: oklch(93.5% 0.045 150); /* Estados (semántica aparte de la identidad de dominio) */ --warn: oklch(52% 0.12 75); --warn-soft: oklch(95% 0.05 85); --bad: oklch(52% 0.185 25); --bad-soft: oklch(95.5% 0.03 25); --focus: oklch(55% 0.15 255); /* Tipografía */ --sans: "Manrope", system-ui, sans-serif; --t-xs: 0.75rem; --t-s: 0.875rem; --t-base: 1rem; --t-l: 1.2rem; --t-xl: 1.44rem; --t-2xl: 1.73rem; /* Forma / targets táctiles */ --r: 10px; --tap: 48px; } [data-skin="central"][data-theme="dark"], html[data-theme="dark"] [data-skin="central"] { /* MARCO (berenjena) — mismo hue, luminosidad de rail oscuro */ --plum-deep: oklch(24% 0.045 330); --plum-hover: oklch(29% 0.045 330); --plum-pill: oklch(97% 0.01 330 / 0.13); --plum-text: oklch(93% 0.006 330); --plum-dim: oklch(74% 0.012 330); /* Superficie / texto base */ --bg: oklch(17% 0.014 330); --surface: oklch(21% 0.016 330 / 0); --card: oklch(21% 0.016 330); --line: oklch(30% 0.018 330); --line-2: oklch(38% 0.02 330); --ink: oklch(93% 0.006 330); --ink-2: oklch(74% 0.012 330); --ink-3: oklch(62% 0.014 330); /* ACCIÓN (verde) + link */ --go: oklch(68% 0.115 165); --go-ink: oklch(75% 0.10 165); --go-soft: oklch(30% 0.045 165); --link: oklch(74% 0.085 255); /* IDENTIDAD por dominio — mismo hue que en claro, ajustado a fondo oscuro */ --dom-crm: oklch(74% 0.085 255); --dom-crm-soft: oklch(28% 0.05 255); --dom-mercado: oklch(80% 0.10 85); --dom-mercado-soft: oklch(30% 0.05 85); --dom-oper: oklch(72% 0.10 155); --dom-oper-soft: oklch(28% 0.05 155); --dom-catalogo: oklch(72% 0.08 205); --dom-catalogo-soft: oklch(28% 0.045 205); --dom-garantias: oklch(72% 0.14 25); --dom-garantias-soft: oklch(28% 0.055 25); --dom-admin: oklch(78% 0.06 330); --dom-admin-soft: oklch(29% 0.045 330); --dom-contenido: oklch(74% 0.095 305); --dom-contenido-soft: oklch(28% 0.05 305); /* Odoo / Integraciones — mint general del sistema (decisión owner 07/07). */ --dom-odoo: var(--go-ink); --dom-odoo-soft: var(--go-soft); --cnt-organico: oklch(72% 0.10 150); --cnt-organico-soft: oklch(28% 0.05 150); /* Estados */ --warn: oklch(80% 0.10 85); --warn-soft: oklch(30% 0.05 85); --bad: oklch(72% 0.14 25); --bad-soft: oklch(28% 0.055 25); --focus: oklch(70% 0.12 255); /* Tipografía y forma: sin cambios entre temas */ --sans: "Manrope", system-ui, sans-serif; --t-xs: 0.75rem; --t-s: 0.875rem; --t-base: 1rem; --t-l: 1.2rem; --t-xl: 1.44rem; --t-2xl: 1.73rem; --r: 10px; --tap: 48px; } /* * Números y precios: NUNCA fuente monoespaciada (standards-diseno-central.md §2). * .num usa la misma Manrope con tabular-nums para alinear dígitos. */ .num { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }