/* ═══════════════════════════════════════════════════════════════════ muda-tokens.css — MUDA v1 · tokens canónicos ═══════════════════════════════════════════════════════════════════ Design System MUDA · Koi Samsa Versión: 1.1 · Generado: 2026-07-14 Sustituye a: muda-tokens-v1.0.css (13-jul) — conservado QUÉ CAMBIA EN v1.1 (tres cosas, todas de tipografía): A · LAS FUENTES SE CARGAN DE VERDAD. v1.0 nombraba Newsreader y Albert Sans pero no cargaba ni un archivo: el navegador pintaba Georgia y la sans del sistema. Las reglas @font-face viven ahora en muda-fonts-v1.1.css, que hay que importar ANTES que este archivo. B · `condensed` PASA A `fira` (decisión de Patricia, 14-jul). El token se llamaba `family-condensed` y cargaba Fira Sans, que no es condensada: el nombre era residuo de Plex Sans Condensed, la fuente que se sustituyó. Un nombre que miente en el design system que existe para imponer la Inequivocidad. C · ENTRAN LOS ICONOS. Material Symbols estaba firmado en la !DECISIÓN desde el 27-jun y no existía en el código. QUÉ CAMBIA RESPECTO A v0 (dos decisiones de Patricia, 13-jul): 1 · RECONCILIACIÓN FORZADA — prefijo único `--muda-` El bloque de alias legacy `--ks-*` (85 tokens, marcado en v0 como "PODA F3") queda EJECUTADO. Ya no existe ningún token `--ks-`. Se puede hacer ahora sin coste porque la web se rehace en Astro: no hay contenido legacy que proteger. 2 · RAMPAS A 11 STOPS Rejilla uniforme: 50 · 100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900 · 950. Antes eran 10 (sin 950). Los 10 stops heredados NO SE TOCAN: son los hex firmados. El stop 950 se calcula extrapolando medio paso en CIELAB desde 800→900. El método está VALIDADO: aplicado al cobalto (única rampa con 950 ya firmado en la !DECISIÓN, #0D2F4B) devuelve #0C2F4B — mismo L* (18.5), 1 punto de diferencia. Se usa el hex firmado. ESTADO DE CADA VALOR ✔ FIRMADO — verificado contra !DECISIÓN o tokens.json ~ CANDIDATO — calculado o en uso sin firma; pendiente de Patricia ✖ DEUDA — bloqueado, no usar REGLA DURA DE LA OBRA (13-jul): CERO HEX EN EL CÓDIGO. Todo color pasa por token. Así MUDA puede seguir moviéndose durante toda la obra y el día 21 se cambia un archivo, no cien. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── 01 · TIPOGRAFÍA — familias ✔ FIRMADO (!DECISIÓN 27-jun) ────── Las cinco voces de MUDA. Se cargan en muda-fonts-v1.1.css, que debe importarse ANTES que este archivo. Si no, todo esto miente: el navegador cae a Georgia y a la sans del sistema. Las itálicas son familias con nombre propio (Método B, cdc-codigo). Se invocan por su nombre. NUNCA se les pone font-style:italic encima: eso las inclina dos veces (faux). Ver muda-fonts-v1.1.css. */ --muda-typography-family-serif: "Newsreader", Georgia, serif; --muda-typography-family-serif-italic: "Newsreader Italic", Georgia, serif; --muda-typography-family-sans: "Albert Sans", system-ui, sans-serif; --muda-typography-family-sans-italic: "Albert Sans Italic", system-ui, sans-serif; --muda-typography-family-fira: "Fira Sans", sans-serif; --muda-typography-family-fira-italic: "Fira Sans Italic", sans-serif; --muda-typography-family-mono: "Fira Code", monospace; --muda-typography-family-icon: "Material Symbols Outlined"; --muda-typography-leading-serif: 1.4; --muda-typography-leading-sans: 1.45; --muda-typography-leading-tight: 1.15; /* ── 02 · TIPOGRAFÍA — tamaños ✔ FIRMADO ───────────────────────── ✖ DEUDA escala-M3: el renombrado Material 3 (display-large… label-small) se ejecutará en bloque cuando se firme. */ --muda-typography-size-body-l: 20px; --muda-typography-size-body-m: 17px; --muda-typography-size-body-s: 15px; --muda-typography-size-h2: 36px; --muda-typography-size-h3: 22px; --muda-typography-size-h4: 14px; --muda-typography-size-meta-l: 13px; --muda-typography-size-meta-m: 12px; --muda-typography-size-meta-s: 11px; --muda-typography-size-meta-xs: 10px; /* Prosa editorial web ✔ FIRMADO */ --muda-typography-prose-size: var(--muda-typography-size-body-l); --muda-typography-prose-line: 1.72; --muda-typography-prose-max: 680px; --muda-size-hero-xl: clamp(48px, 13.6vw, 180px); --muda-size-hero-l: clamp(36px, 8vw, 96px); --muda-size-hero-m: clamp(28px, 5vw, 52px); --muda-size-display: clamp(24px, 3.5vw, 40px); /* ── 03 · COLOR — las 14 piezas ✔ FIRMADO ──────────────────────── !DECISIÓN Sistema cromático MUDA 14 piezas v2.1. Una pieza es un escalón NOMBRADO de una rampa. */ --muda-color-piece-hierro: #2B200F; --muda-color-piece-calcio: #FAF9F7; --muda-color-piece-niquel: #B3B7B8; --muda-color-piece-caliza: #D1CBBA; --muda-color-piece-turquesa: #00A6AB; --muda-color-piece-cobalto: #335E82; --muda-color-piece-rojo: #AC4952; --muda-color-piece-goetita: #FBE87E; --muda-color-piece-verde-patina: #9DC5B9; --muda-color-piece-verde-teofrastita: #2F8F67; --muda-color-piece-terra-rossa: #CE837A; --muda-color-piece-malva-eritrina: #AE6586; --muda-color-piece-marmol-rosa: #EDC4BD; /* ✖ DEUDA cobre: 3 hex en circulación, falta ancla NCS. La PIEZA entra sellada; su RAMPA no entra hasta que se firme. */ --muda-color-piece-cobre: #C67E3E; /* Alias firmados */ --muda-color-ink: var(--muda-color-piece-hierro); --muda-color-paper: var(--muda-color-piece-calcio); /* Polo — solo referencia, nunca marca */ --muda-color-white: #FFFFFF; /* ── 04 · COLOR — rampas · 11 stops (CIELAB) ───────────────────── Rejilla: 50 100 200 300 400 500 600 700 800 900 950 50→900 ✔ FIRMADO (canon 29-jun) · 950 ~ CANDIDATO (calculado) Anclas pieza↔stop: Verde Pátina = verde-niquel-200 Verde Teofrastita = verde-niquel-700 Turquesa = teal-500 Cobalto = cobalto-500 Rojo Óxido = rojo-500 Goetita = goetita-200 */ /* verde-níquel · Ni(OH)₂ · SUCCESS / OK */ --muda-color-scale-verde-niquel-50: #D6EDE6; --muda-color-scale-verde-niquel-100: #BFDED4; --muda-color-scale-verde-niquel-200: #9DC5B9; /* ★ Verde Pátina */ --muda-color-scale-verde-niquel-300: #82B6A5; --muda-color-scale-verde-niquel-400: #66A891; --muda-color-scale-verde-niquel-500: #4F9C7F; --muda-color-scale-verde-niquel-600: #3F9573; --muda-color-scale-verde-niquel-700: #2F8F67; /* ★ Verde Teofrastita */ --muda-color-scale-verde-niquel-800: #007A52; --muda-color-scale-verde-niquel-900: #006443; --muda-color-scale-verde-niquel-950: #00593C; /* ~ CANDIDATO · L* 33.0 */ /* teal · óxido de cobre · CORPORATIVO */ --muda-color-scale-teal-50: #9ED6D4; --muda-color-scale-teal-100: #9BD6D4; --muda-color-scale-teal-200: #82CBCA; --muda-color-scale-teal-300: #5DBFC0; --muda-color-scale-teal-400: #49B3B5; --muda-color-scale-teal-500: #00A6AB; /* ★ Turquesa */ --muda-color-scale-teal-600: #2398A0; --muda-color-scale-teal-700: #008B96; --muda-color-scale-teal-800: #1F7D8A; --muda-color-scale-teal-900: #00707F; --muda-color-scale-teal-950: #006A7A; /* ~ CANDIDATO · L* 40.4 */ /* cobalto · azul mineral R90B · CORPORATIVO · rampa asimétrica */ --muda-color-scale-cobalto-50: #E2EAF1; --muda-color-scale-cobalto-100: #D5E0EB; --muda-color-scale-cobalto-200: #B2C5D9; --muda-color-scale-cobalto-300: #90ABC7; --muda-color-scale-cobalto-400: #3F6FA0; --muda-color-scale-cobalto-500: #335E82; /* ★ Cobalto */ --muda-color-scale-cobalto-600: #2B5375; --muda-color-scale-cobalto-700: #224869; --muda-color-scale-cobalto-800: #1A3E5D; --muda-color-scale-cobalto-900: #113451; --muda-color-scale-cobalto-950: #0D2F4B; /* ✔ FIRMADO en la !DECISIÓN */ /* rojo óxido · Fe₂O₃ · ERROR / CRÍTICO */ --muda-color-scale-rojo-50: #F3D7D0; --muda-color-scale-rojo-100: #E7C1B9; --muda-color-scale-rojo-200: #D7A59D; --muda-color-scale-rojo-300: #CB8D85; --muda-color-scale-rojo-400: #C06968; --muda-color-scale-rojo-500: #AC4952; /* ★ Rojo Óxido */ --muda-color-scale-rojo-600: #993F4A; --muda-color-scale-rojo-700: #873642; --muda-color-scale-rojo-800: #742E3B; --muda-color-scale-rojo-900: #612734; --muda-color-scale-rojo-950: #582431; /* ~ CANDIDATO · L* 22.0 */ /* goetita · FeO(OH) · WARNING */ --muda-color-scale-goetita-50: #FFFDC6; --muda-color-scale-goetita-100: #FFF6AE; --muda-color-scale-goetita-200: #FBE87E; /* ★ Goetita */ --muda-color-scale-goetita-300: #F0D76E; --muda-color-scale-goetita-400: #E4C65F; --muda-color-scale-goetita-500: #D9B54F; --muda-color-scale-goetita-600: #CDA440; --muda-color-scale-goetita-700: #C19430; --muda-color-scale-goetita-800: #B5841F; /* texto link AA-large */ --muda-color-scale-goetita-900: #A97409; --muda-color-scale-goetita-950: #A36C00; /* ~ CANDIDATO · L* 50.1 */ /* sílice · G2 (Y) · NEUTRO CÁLIDO · ✔ FIRMADA NCS 04-jul Volcada a tokens por primera vez en v1 (estaba firmada sin volcar). ⚠ NO ES UN BEIGE: su b* está clavado entre 2 y 5 de punta a punta. Es un gris cálido. Para beige de verdad → rampa CALIZA (abajo). text-primary del sistema. Main = 300 (L* 80.9). */ --muda-color-scale-silice-50: #F7F6F2; --muda-color-scale-silice-100: #ECEBE6; --muda-color-scale-silice-200: #DCDAD3; --muda-color-scale-silice-300: #CBC9C0; /* ★ Sílice Main · b* 4.7 */ --muda-color-scale-silice-400: #ADABA2; --muda-color-scale-silice-500: #8E8B83; --muda-color-scale-silice-600: #706D65; --muda-color-scale-silice-700: #56534C; --muda-color-scale-silice-800: #3F3C35; --muda-color-scale-silice-900: #2D2A23; /* negro máximo ★8502-Y */ --muda-color-scale-silice-950: #24211A; /* ~ CANDIDATO · L* 13.0 */ /* caliza · BEIGE · ~ CANDIDATO (nueva en v1, 13-jul) ───────────────────────────────────────────────────────────────── POR QUÉ EXISTE: la sílice pierde el carácter beige (b* 2-5). Ya estaba constatado en el sistema: "la rampa sílice actual no tiene beige de verdad". Esta rampa lo devuelve. CÓMO SE HIZO: anclada en la pieza CALIZA #D1CBBA (FIRMADA), que va al stop 300 — mismo L* (81.7) que sílice-300 (80.9), pero con el DOBLE de b* (9.2 vs 4.7). Ahí está el beige. Rejilla L* = la de la sílice → las dos rampas son hermanas y comparables por luminosidad. b* sostenido (3.6 → 12.3 → 6.5): nunca cae a gris, con pico en los medios como un pigmento tierra. ΔE entre stops consecutivos: 4-12 (todos distinguibles). Contraste sobre Calcio: AA de texto normal desde el 600. PENDIENTE: cotejo NCS. Los hex calculados en CIELAB son CANDIDATOS hasta que Patricia los valide en sesión de color. El 300 NO se toca: es pieza firmada. */ --muda-color-scale-caliza-50: #F8F6EF; --muda-color-scale-caliza-100: #EEEBE1; --muda-color-scale-caliza-200: #DEDACC; --muda-color-scale-caliza-300: #D1CBBA; /* ★ CALIZA · pieza FIRMADA · b* 9.2 */ --muda-color-scale-caliza-400: #B4AA97; --muda-color-scale-caliza-500: #968A76; --muda-color-scale-caliza-600: #776C5A; /* 4.9:1 sobre Calcio · AA */ --muda-color-scale-caliza-700: #5C5243; --muda-color-scale-caliza-800: #433B2F; --muda-color-scale-caliza-900: #302920; --muda-color-scale-caliza-950: #272119; /* ✖ DEUDA cobre: rampa candidata sin ancla NCS — NO entra. Ninguna categoría ni componente puede depender de ella. ⚠ 08-jul: "Naranja main FIRMADO (DC7D53), muere el cobre provisional — queda su relevo a tokens". El relevo NO está hecho: los tokens de scope cobre siguen usando el hex viejo (#C67E3E). CABO ABIERTO — ver README. */ /* Acción WCAG ✔ FIRMADO 29-jun El turquesa de marca no pasa 3:1 sobre blanco; para acción se usa este. Estados saltan de 2 en 2 stops · disabled = stop 100. */ --muda-color-action: #009999; /* ── 05 · COLOR — escala Método B (pictórica) ──────────────────── Solo turquesa: única en uso. El resto queda en canon sin volcar. */ --muda-color-scale-turquesa-luz-2: #9BD6D4; --muda-color-scale-turquesa-luz-1: #5DBFC0; --muda-color-scale-turquesa-base: #00A6AB; --muda-color-scale-turquesa-som-1: #008B96; --muda-color-scale-turquesa-som-2: #00707F; /* ── 06 · SUPERFICIES, TINTA, BORDES ───────────────────────────── */ --muda-surface-bg: #FAF9F7; /* ✔ */ --muda-surface-default: #FBFAF7; /* ✔ */ --muda-surface-muted: #F6F6F3; /* ✔ */ --muda-surface-elevated: #FFFFFF; /* ~ CANDIDATO — en uso, sin firma */ /* Tinta atenuada: rgba del hierro, NUNCA grises sueltos ✔ FIRMADO */ --muda-color-text-87: rgba(43, 32, 15, 0.87); --muda-color-text-78: rgba(43, 32, 15, 0.78); --muda-color-text-72: rgba(43, 32, 15, 0.72); --muda-color-text-62: rgba(43, 32, 15, 0.62); --muda-color-text-55: rgba(43, 32, 15, 0.55); --muda-color-text-52: rgba(43, 32, 15, 0.52); --muda-color-text-45: rgba(43, 32, 15, 0.45); --muda-color-text-38: rgba(43, 32, 15, 0.38); --muda-color-text-28: rgba(43, 32, 15, 0.28); --muda-color-text-04: rgba(43, 32, 15, 0.04); /* ~ CANDIDATO */ --muda-color-border-default: rgba(43, 32, 15, 0.10); /* ✔ */ --muda-color-border-strong: rgba(43, 32, 15, 0.17); /* ✔ */ /* Tints funcionales — SUBIDOS A :root en v1. En v0 vivían dentro de los selectores de componente, lo que impedía usarlos fuera de ellos. Son primitivos: su sitio es la raíz. */ --muda-color-tint-teal-05: #EAF2F2; --muda-color-tint-teal-22: #A6CECF; --muda-color-tint-red-05: #F8EEEE; /* ⚠ ver nota de nomenclatura */ --muda-color-tint-red-22: #E2B6B7; --muda-color-tint-beige-10: #EFEEEA; --muda-color-tint-beige-50: #D0CCBF; /* ⚠ INEQUIVOCIDAD (norma 5 del kernel): `red` y `rojo` conviven en el sistema (tint-red-* vs scale-rojo-*). Es la única incoherencia de nomenclatura que queda en v1. Renombrar a `rojo` es mecánico, pero toca hex firmados de tint — se deja como CABO para sesión de color. */ /* Cobre de scope — ✖ DEUDA: se rederiva si la pieza cobre cambia */ --muda-color-copper-surface: #F7F2EC; --muda-color-copper-rule: #F0E0D2; --muda-color-copper-label: #C67E3E; --muda-color-copper-link: #B06A2E; --muda-color-copper-hover: #8F551F; /* Dark mode (grafito templado) — declarado, SIN activar */ --muda-color-dark-canvas: #161819; --muda-color-dark-page: #1B1D1E; --muda-color-dark-panel: #212425; --muda-color-dark-surface: #2A2D2E; --muda-color-dark-elevado: #34383A; /* ── 07 · SOMBRA, RADIO, ESPACIO, GRADIENTE, MOTION ────────────── */ --muda-shadow-card: 0 0 0 1px rgba(43, 32, 15, 0.07), 0 1px 0 rgba(43, 32, 15, 0.08); --muda-shadow-float: 0 4px 16px rgba(29, 20, 12, 0.10); --muda-radius-sm: 5px; /* ✔ FIRMADO — nunca 999px. Chips NO ovalados */ --muda-radius-md: 10px; --muda-radius-lg: 15px; /* Base-8 · 32 y 24 sostienen el ritmo vertical firmado */ --muda-space-xs: 8px; --muda-space-sm: 12px; --muda-space-md: 18px; --muda-space-lg: 24px; --muda-space-xl: 32px; --muda-space-2xl: 48px; --muda-space-3xl: 72px; /* Únicos gradientes permitidos (doctrina) ✔ FIRMADO */ --muda-gradient-teal: linear-gradient(160deg, #FFFFFF 0%, #D9E8E9 50%, #00A6AB 100%); --muda-gradient-teal-blue: linear-gradient(160deg, #FFFFFF 0%, #D9E8E9 35%, #00A6AB 65%, #335E82 100%); --muda-motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1); --muda-motion-duration-default: 0.3s; /* Artefactos embebidos — ~ CANDIDATO */ --muda-size-embed-min: 500px; --muda-size-embed-iframe: 600px; } /* Itálica por `opsz`, sin síntesis del navegador ✔ FIRMADO */ html { font-synthesis: none; font-optical-sizing: auto; }