/* ============================================================ CM DESCANSO · DESIGN TOKENS · v5 · "Editorial calido" (vara: OKA) Port al block theme (G1): fuera los puentes --e-global-color-* (morian con Elementor); los hex son ahora la unica fuente. theme.json expone los MISMOS valores como presets --wp--preset--* para el editor; los componentes del sistema usan SIEMPRE --cmd-*. OJO (trampa documentada): --cmd-green contiene el TERRACOTA (nombre legado de la v3); el verde salvia ya no existe. ============================================================ */ :root { /* ---- Superficies · blanco calido en CAPAS (como OKA: linen/porcelain) ---- */ --cmd-paper: #FBFAF6; /* blanco calido: base de pagina */ --cmd-panel: #F2EFE7; /* linen: tarjetas */ --cmd-band: #EAE3D6; /* porcelain: bandas */ --cmd-stone: #E5DDCE; /* fondo de foto */ /* ---- Tinta · negro BLANDO y calido (no puro, como el #333 de OKA) ---- */ --cmd-ink: #2A2622; --cmd-ink-deep: #1C1916; /* ---- Acento · TERRACOTA muy sobrio (nombre legado --cmd-green) ---- */ --cmd-green: #A4572F; /* el unico acento calido */ --cmd-green-deep: #8A4525; /* hover */ --cmd-green-soft: #EFE2D6; /* tinte suave */ /* ---- Pizarra · solo para la capa de muelles de la firma (azul del tejido) ---- */ --cmd-slate: #3C5666; /* ---- Ocre · subrayado a mano (una vez) ---- */ --cmd-clay: #A4572F; --cmd-clay-soft: #EFE2D6; /* ---- Texto ---- */ --cmd-text: #54504A; --cmd-muted: #8A8378; --cmd-on-dark: #F4F0E8; --cmd-on-dark-mut: #CBC4B6; /* ---- Lineas · hairlines a ~10-12% (como OKA) ---- */ --cmd-line: rgba(42, 38, 34, .12); --cmd-line-strong: rgba(42, 38, 34, .20); /* ---- Glass suave (tinte calido) ---- */ --cmd-glass-fill: rgba(251, 250, 246, .60); --cmd-glass-fill-strong: rgba(251, 250, 246, .80); --cmd-glass-border: rgba(42, 38, 34, .10); --cmd-glass-highlight: rgba(255, 255, 255, .55); --cmd-glass-shadow: rgba(42, 38, 34, .1); --cmd-glass-blur: blur(10px) saturate(115%); /* glass v2 (G4-polish, receta PRO en G5-polish): el cristal del sitio. Tres capas: frost (blur+saturacion+brillo), sheen (destello diagonal en el background) y RIM (borde en degradado luz→sombra→luz via mask-composite, definido en components.css .cmd-glass2::after). Superficies de CHROME (navegacion, barras, badges), nunca de contenido. */ /* G9-polish: fill del vidrio de .40 a .55 y brightness contenido. Aviso de Mario: sobre contenido cargado el texto costaba de leer; el cristal solo vale si lo de encima pasa contraste. Mas fill = menos ruido de fondo. */ --cmd-glass2-fill: rgba(252, 250, 245, .55); --cmd-glass2-sheen: linear-gradient(133deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .06) 34%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .12) 90%); --cmd-glass2-blur: blur(26px) saturate(170%) brightness(1.03); --cmd-glass2-edge: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(42, 38, 34, .05); --cmd-glass2-shadow: 0 12px 40px rgba(42, 38, 34, .16); --cmd-glass2-rim: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .15) 30%, rgba(42, 38, 34, .08) 58%, rgba(255, 255, 255, .50) 100%); /* variante ligera para pills/chips pequeños (menos blur, mas nitidez) */ --cmd-glass2-blur-lite: blur(14px) saturate(160%); /* ---- Grano de papel (textura textil sutil) ---- */ --cmd-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* ---- Estado ---- */ --cmd-ok: #3C7D5A; --cmd-warn: #B0792E; --cmd-danger: #A8412B; /* ---- Tipografia · serif display editorial (vara OKA) + sans de cuerpo ---- */ --cmd-font-display: "Fraunces", "Newsreader", Georgia, "Times New Roman", serif; --cmd-font-body: "Hanken Grotesk", -apple-system, system-ui, "Segoe UI", sans-serif; --cmd-font-serif: "Newsreader", Georgia, "Times New Roman", serif; /* G10-polish (decision Mario 20-jul): la mono FUERA de la web. Los rotulos de dato ("14 productos", numerales del bento, precios) leian a consola tecnica. El token apunta al cuerpo (Hanken) y toda la web hereda el cambio; los tabular-nums de los usos siguen funcionando. JetBrains Mono queda sin uso (su @font-face no descarga si nadie la referencia). */ --cmd-font-mono: var(--cmd-font-body); /* Escala con salto editorial */ --cmd-fs-mega: clamp(2.8rem, 1.5rem + 5.8vw, 6.2rem); --cmd-fs-display: clamp(3rem, 2rem + 4.6vw, 5.4rem); --cmd-fs-h1: clamp(2.3rem, 1.7rem + 2.9vw, 3.7rem); --cmd-fs-h2: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem); --cmd-fs-h3: clamp(1.3rem, 1.2rem + .6vw, 1.6rem); --cmd-fs-lead: clamp(1.1rem, 1.04rem + .35vw, 1.28rem); --cmd-fs-body: 1.0625rem; --cmd-fs-sm: 0.9375rem; --cmd-fs-xs: 0.8125rem; --cmd-fs-2xs: 0.75rem; --cmd-lh-mega: 0.98; --cmd-lh-display: 1.02; --cmd-lh-tight: 1.06; --cmd-lh-snug: 1.28; --cmd-lh-body: 1.62; --cmd-tr-display: -.028em; --cmd-tr-mono: .14em; /* ---- Espaciado ---- */ --cmd-s1: .25rem; --cmd-s2: .5rem; --cmd-s3: .75rem; --cmd-s4: 1rem; --cmd-s5: 1.5rem; --cmd-s6: 2rem; --cmd-s7: 3rem; --cmd-s8: 4rem; --cmd-s9: 6rem; --cmd-section: clamp(3.5rem, 6vw, 7rem); /* ---- Radios (mas contenidos, textil/editorial) ---- */ --cmd-r-sm: 4px; --cmd-r-md: 8px; --cmd-r-lg: 14px; --cmd-r-pill: 999px; /* escala UNICA de radios (G6-polish, Apple: mismo radio en toda la web): controles/imagenes 4, tarjetas/paneles 8, cristal flotante 14, pildoras 999 */ /* ---- Sombras ---- */ --cmd-sh-1: 0 1px 2px rgba(26,28,22,.04), 0 1px 8px rgba(26,28,22,.04); --cmd-sh-2: 0 4px 14px rgba(26,28,22,.06), 0 16px 40px rgba(26,28,22,.07); --cmd-container: 1300px; --cmd-content: 680px; --cmd-ease: cubic-bezier(.2,0,0,1); --cmd-ease-out: cubic-bezier(0,0,.2,1); --cmd-dur: .25s; --cmd-dur-slow: .5s; }