/* ============================================================ MR01 · Design System v6 — Editorial premium Tokens base · CSS vanilla (sin Tailwind) ============================================================ */ /* ----------------------------------------------------------- 1. Tipografía ----------------------------------------------------------- */ /* Clash Display Variable (servida local, ya en /assets/fonts/) */ @font-face { font-family: "Clash Display"; src: url("/assets/fonts/ClashDisplay-Variable.woff2") format("woff2-variations"), url("/assets/fonts/ClashDisplay-Variable.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; } /* Montserrat se carga vía Google Fonts en el de cada HTML (link a fonts.googleapis.com con preconnect). Cubre pesos 400-700. */ :root { --font-display: "Clash Display", system-ui, sans-serif; --font-sans: "Montserrat", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Monaco", monospace; } /* ----------------------------------------------------------- 2. Color tokens (OKLCH para contraste correcto) ----------------------------------------------------------- */ :root { /* Superficies */ --mr-bg: oklch(0.05 0 0); /* #050505 */ --mr-surface-1: oklch(0.10 0 0); /* #0E0E10 */ --mr-surface-2: oklch(0.13 0 0); /* #16161A */ --mr-surface-3: oklch(0.16 0 0); /* #1C1C20 */ /* Tinta */ --mr-ink: oklch(0.99 0 0); /* #FCFCFC */ --mr-ink-soft: oklch(0.99 0 0 / 0.78); --mr-ink-mute: oklch(0.99 0 0 / 0.52); /* Líneas */ --mr-line: oklch(1 0 0 / 0.06); --mr-line-strong: oklch(1 0 0 / 0.14); /* Acento marca */ --mr-lime: oklch(0.92 0.27 135); /* #39FF14 aprox */ --mr-lime-soft: oklch(0.92 0.27 135 / 0.12); --mr-lime-glow: oklch(0.92 0.27 135 / 0.35); /* Color por IA (semánticos para sección Multi-IA) */ --ia-chatgpt: oklch(0.66 0.13 165); /* #10A37F */ --ia-gemini: oklch(0.65 0.18 260); /* #4285F4 */ --ia-perplexity: oklch(0.55 0.10 200); /* #20808D */ --ia-claude: oklch(0.70 0.14 50); /* #D97757 */ /* Estado destructivo (no se usa casi) */ --mr-danger: oklch(0.65 0.22 25); } /* ----------------------------------------------------------- 3. Tipografía: escala modular (Major Third 1.250) Calibrada con clamp() de rangos estrechos para evitar saltos ----------------------------------------------------------- */ :root { --fs-xs: clamp(0.75rem, 0.74rem + 0.05vw, 0.78rem); /* 12-12.5 */ --fs-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.94rem); /* 14-15 */ --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16-17 */ --fs-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); /* 18-20 */ --fs-xl: clamp(1.4rem, 1.3rem + 0.5vw, 1.6rem); /* 22-26 */ --fs-2xl: clamp(1.75rem, 1.6rem + 0.75vw, 2.1rem); /* 28-34 */ --fs-3xl: clamp(2.2rem, 1.95rem + 1.25vw, 2.8rem); /* 35-45 */ --fs-4xl: clamp(2.8rem, 2.4rem + 2vw, 3.7rem); /* 45-59 */ --fs-display:clamp(3.5rem, 2.8rem + 3.5vw, 5.25rem); /* 56-84 */ /* Line heights por categoría */ --lh-tight: 1.05; /* display */ --lh-snug: 1.15; /* h1-h2 */ --lh-normal: 1.4; /* h3-h4 */ --lh-relaxed: 1.55; /* body */ --lh-loose: 1.7; /* lead/quotes */ /* Letter spacing */ --ls-tightest: -0.04em; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.18em; /* eyebrows uppercase */ --ls-widest: 0.25em; } /* ----------------------------------------------------------- 4. Espaciado: baseline 8px ----------------------------------------------------------- */ :root { --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* Padding de sección — 3 niveles */ --pad-section-compact: clamp(3rem, 2rem + 3vw, 4.5rem); --pad-section: clamp(4.5rem, 3rem + 5vw, 7rem); --pad-section-hero: clamp(6rem, 4rem + 7vw, 10rem); } /* ----------------------------------------------------------- 5. Layout ----------------------------------------------------------- */ :root { --max-w-prose: 62ch; --max-w-content: 780px; --max-w-container: 1240px; --pad-x: clamp(1.25rem, 4vw, 3.5rem); } /* ----------------------------------------------------------- 6. Radios y sombras ----------------------------------------------------------- */ :root { --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.55); --glow-lime: 0 0 0 1px var(--mr-lime), 0 12px 40px var(--mr-lime-glow); } /* ----------------------------------------------------------- 7. Motion: easings y duraciones ----------------------------------------------------------- */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* signature ease */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 80ms; --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 600ms; --dur-slower: 900ms; } /* ----------------------------------------------------------- 8. Z-index scale ----------------------------------------------------------- */ :root { --z-base: 1; --z-content: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 2000; --z-toast: 3000; } /* ----------------------------------------------------------- 9. Reset mínimo + base global ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; color-scheme: dark; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--mr-ink); background: var(--mr-bg); font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } ::selection { background: var(--mr-lime); color: var(--mr-bg); } /* Reduce motion para accesibilidad */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }