/* ============================================================ 01 · TOKENS — Única capa de valores. Fuente: docs/design-system/01 (congelado) + contrato 06 §2–§3. Prohibido hex suelto en cualquier otro archivo CSS. ============================================================ */ :root { /* --- Colores (alias semánticos → presets de theme.json) --- */ --cm-color-bg: var(--wp--preset--color--white); --cm-color-surface: var(--wp--preset--color--white); --cm-color-surface-alt: var(--wp--preset--color--primary-50); --cm-color-panel: var(--wp--preset--color--primary-50); --cm-color-panel-strong: var(--wp--preset--color--primary-100); --cm-color-band: var(--wp--preset--color--primary-900); --cm-color-band-text: var(--wp--preset--color--bone-50); --cm-color-band-muted: var(--wp--preset--color--primary-300); --cm-color-card: var(--wp--preset--color--primary-50); --cm-color-accent-soft: var(--wp--preset--color--primary-100); --cm-color-text: var(--wp--preset--color--ink-900); --cm-color-text-alt: var(--wp--preset--color--ink-600); --cm-color-muted: var(--wp--preset--color--ink-600); --cm-color-link: var(--wp--preset--color--primary-700); --cm-color-link-hover: var(--wp--preset--color--primary-800); --cm-color-brand: var(--wp--preset--color--primary-800); --cm-color-brand-hover: var(--wp--preset--color--primary-600); --cm-color-on-brand: var(--wp--preset--color--bone-50); --cm-color-accent: var(--wp--preset--color--accent-700); --cm-color-accent-alt: var(--wp--preset--color--accent-800); --cm-color-focus: var(--wp--preset--color--focus-light); --cm-color-focus-dark: var(--wp--preset--color--focus-dark); --cm-color-border-decorative: var(--wp--preset--color--sand-200); --cm-color-border-strong: var(--wp--preset--color--sand-300); --cm-color-border-control: var(--wp--preset--color--stone-500); --cm-color-success: var(--wp--preset--color--success-700); --cm-color-success-bg: var(--wp--preset--color--success-100); --cm-color-warning: var(--wp--preset--color--warning-700); --cm-color-warning-bg: var(--wp--preset--color--warning-100); --cm-color-error: var(--wp--preset--color--error-700); --cm-color-error-bg: var(--wp--preset--color--error-100); --cm-color-info: var(--wp--preset--color--info-700); --cm-color-info-bg: var(--wp--preset--color--info-100); /* --- OWNER MASTER REFERENCE V2 (medido sobre la referencia, 06-10-2026) --- */ /* Rojos de acción y titulares */ --cm-color-red: var(--wp--preset--color--red-700, rgb(151, 0, 0)); --cm-color-red-hover: var(--wp--preset--color--red-800, rgb(125, 10, 5)); --cm-color-red-action: var(--wp--preset--color--red-600, rgb(171, 23, 20)); --cm-color-red-soft: var(--wp--preset--color--red-100, rgb(247, 231, 228)); /* Cremas y pergamino */ --cm-color-cream: var(--wp--preset--color--cream-50, rgb(250, 248, 245)); --cm-color-cream-section: var(--wp--preset--color--cream-100, rgb(245, 242, 238)); --cm-color-parchment: var(--wp--preset--color--paper-200, rgb(237, 226, 215)); --cm-color-strip: var(--wp--preset--color--cream-300, rgb(232, 229, 222)); /* Verdes de banda, footer y barra fina */ --cm-color-forest: var(--wp--preset--color--forest-600, rgb(43, 80, 47)); --cm-color-footer: var(--wp--preset--color--forest-900, rgb(29, 52, 38)); --cm-color-topbar: var(--wp--preset--color--forest-950, rgb(29, 67, 36)); /* Decorativo cálido */ --cm-color-clay: var(--wp--preset--color--clay-300, rgb(208, 181, 159)); /* --- Tipografía --- */ --cm-font-display: var(--wp--preset--font-family--display); --cm-font-text: var(--wp--preset--font-family--text); /* Titulares editoriales (serif) y acentos manuscritos: sin red en esta máquina, se resuelven como stack de sistema hasta auto-hospedar las OFL. */ --cm-font-serif: var(--wp--preset--font-family--display-serif); --cm-font-script: var(--wp--preset--font-family--script); --cm-serif-weight: 600; --cm-serif-tracking: -0.01em; --cm-script-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); /* --- Espaciado (escala congelada) --- */ --cm-space-4: 4px; --cm-space-8: 8px; --cm-space-12: 12px; --cm-space-16: 16px; --cm-space-24: 24px; --cm-space-32: 32px; --cm-space-48: 48px; --cm-space-64: 64px; --cm-space-96: 96px; --cm-space-128: 128px; /* --- Layout --- */ --cm-container-content: 720px; --cm-container-wide: 1200px; --cm-section-y: clamp(4rem, 7.5vw, 6.5rem); --cm-gutter: clamp(1.25rem, 4vw, 2rem); --cm-container-copy: 46ch; /* --- Geometría de la referencia maestra --- */ --cm-shell: 1180px; /* ancho de contenido útil a 1440 */ --cm-shell-copy: 52ch; --cm-split-media: 50%; /* proporción por defecto de los splits */ --cm-split-media-strong: 54%; --cm-band-y: clamp(1.25rem, 2.2vw, 1.75rem); --cm-home-y: clamp(1.5rem, 2.2vw, 1.875rem); /* ritmo vertical medido de la referencia */ --cm-home-y-tight: clamp(1.125rem, 1.8vw, 1.5rem); --cm-card-radius: var(--cm-radius-md); --cm-media-radius: var(--cm-radius-sm); --cm-hero-min: clamp(17rem, 21vw, 22rem); /* --- Radios --- */ --cm-radius-xs: 4px; --cm-radius-sm: 8px; --cm-radius-md: 12px; --cm-radius-lg: 20px; --cm-radius-pill: 999px; /* --- Sombras --- */ --cm-shadow-e1: 0 1px 2px rgba(18, 36, 23, .06); --cm-shadow-e2: 0 10px 30px -18px rgba(18, 36, 23, .28); --cm-shadow-e3: 0 24px 60px -32px rgba(18, 36, 23, .35); /* --- Bordes --- */ --cm-border-decorative: 1px solid var(--wp--preset--color--sand-200); --cm-border-dark-decorative: 1px solid rgba(251, 249, 244, .14); --cm-border-control: 1px solid var(--wp--preset--color--stone-500); --cm-border-control-dark: 1px solid rgba(251, 249, 244, .45); /* --- Motion --- */ --cm-dur-instant: 100ms; --cm-dur-fast: 150ms; --cm-dur-base: 200ms; --cm-dur-medium: 250ms; --cm-dur-reveal: 400ms; --cm-dur-slow: 500ms; --cm-ease-standard: cubic-bezier(.2, 0, 0, 1); --cm-ease-decelerate: cubic-bezier(.05, .7, .1, 1); --cm-ease-gentle: cubic-bezier(.4, 0, .2, 1); /* --- Z-index (contrato 06 §2) --- */ --cm-z-sticky: 10; --cm-z-header: 20; --cm-z-dropdown: 30; --cm-z-overlay: 40; --cm-z-modal: 50; --cm-z-toast: 60; } /* Contexto oscuro: reasigna alias para superficies ink/verde-900. */ .cm-on-dark { --cm-color-bg: var(--wp--preset--color--ink-900); --cm-color-surface: var(--wp--preset--color--primary-900); --cm-color-surface-alt: var(--wp--preset--color--primary-950); --cm-color-text: var(--wp--preset--color--bone-50); --cm-color-text-alt: var(--wp--preset--color--sand-200); --cm-color-muted: var(--wp--preset--color--primary-300); --cm-color-link: var(--wp--preset--color--primary-300); --cm-color-link-hover: var(--wp--preset--color--bone-50); --cm-color-focus: var(--cm-color-focus-dark); --cm-color-border-decorative: rgba(251, 249, 244, .14); }