/* ========================================================================== RUT — TINTA Y SOL · tokens.css Design tokens del rediseño (Fase 5 · ART-DIRECTION.md §3.2 / §3.3 / §3.4) Este archivo NO contiene reglas de layout ni componentes: solo variables. Cárgalo SIEMPRE antes que base.css en todas las páginas del rediseño. ========================================================================== */ :root { /* --- Tipografía: familias (Google Fonts se cargan en el del HTML) --- */ --font-display: "Fraunces", "Fraunces-fallback", Georgia, serif; --font-sans: "Plus Jakarta Sans", "Jakarta-fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Courier New", monospace; /* --- Escala tipográfica fluida (§3.2) --- */ --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem); /* mono/meta, small */ --step-0: clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem); /* body */ --step-1: clamp(1.25rem, 1.17rem + 0.42vw, 1.50rem); /* lead, H4 */ --step-2: clamp(1.56rem, 1.41rem + 0.76vw, 2.00rem); /* H3 */ --step-3: clamp(1.95rem, 1.68rem + 1.35vw, 2.66rem); /* H2 */ --step-4: clamp(2.44rem, 1.98rem + 2.30vw, 3.55rem); /* H2 destacado */ --step-5: clamp(3.05rem, 2.31rem + 3.71vw, 4.73rem); /* H1 sección */ --step-6: clamp(3.81rem, 2.66rem + 5.79vw, 6.31rem); /* H1 home / capítulos */ --step-7: clamp(4.77rem, 3.02rem + 8.77vw, 9.00rem); /* "RUT" gigante, cifras hero */ /* --- Reglas tipográficas de apoyo --- */ --leading-display: 1.06; /* Fraunces display: 1.02–1.1 */ --leading-body: 1.6; --tracking-display: -0.015em; --tracking-mono: 0.08em; /* eyebrows / metadatos, siempre MAYÚSCULAS */ --measure: 65ch; /* ancho máximo de columna de lectura */ /* --- Sistema de color (§3.3) --- */ --ink: #0A1F44; /* tinta: texto y bloques oscuros. "El azul RUT" */ --ink-deep: #10182B; /* footer y fondos ultra-oscuros */ --indigo: #25409A; /* marca activa: enlaces, botones primarios */ --indigo-bright: #4A63C7; /* acentos sobre navy — solo decorativo o texto grande */ --sol: #FFC94D; /* EL acento: subrayador, CTA sobre navy. Nunca texto sobre claro */ --sol-hover: #FFD97A; --paper: #F5F7FC; /* fondo base alternativo (frío) */ --paper-warm: #FFF8EA; /* fondo cálido: secciones "sol" */ --mist: #EEF1FC; /* tarjetas, campos de formulario */ --line: #E3E7F1; /* filetes, bordes 1px */ --gray-text: #5B6373; /* texto secundario, pies de foto */ --white: #FFFFFF; /* Derivados translúcidos (filetes sobre fondos de tinta / velos) */ --ink-20: rgba(10, 31, 68, 0.20); /* filetes sobre claro */ --white-20: rgba(255, 255, 255, 0.20);/* filetes sobre tinta */ --white-60: rgba(255, 255, 255, 0.60); /* --- Retícula y espacio (§3.4) --- */ --grid-cols: 12; --gutter: clamp(16px, 2.5vw, 32px); --content-max: 1360px; --margin-page: clamp(20px, 5vw, 80px); --space-section: clamp(80px, 12vh, 160px); /* separación vertical entre secciones */ --space-block: clamp(40px, 6vh, 80px); /* separación entre bloques internos */ --space-cluster: clamp(12px, 2vh, 24px); /* denso, dentro de clusters editoriales */ /* --- Radios (lenguaje editorial: esquinas casi vivas) --- */ --radius-0: 0; --radius-s: 4px; /* máximo permitido en fotos y tarjetas */ --radius-pill: 999px; /* solo botones */ /* --- Bordes y filetes --- */ --rule: 1px solid var(--line); --rule-ink: 1px solid var(--ink-20); --rule-inverse: 1px solid var(--white-20); /* --- Motion (§3.5): nada > 700ms, solo transform/opacity --- */ --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 200ms; --dur-med: 500ms; /* subrayado firma */ --dur-slow: 600ms; /* zoom de foto, reveals */ --stagger: 80ms; /* --- Foco visible (§3.3) --- */ --focus-ring: 3px solid var(--sol); --focus-ring-inverse: 3px solid var(--white); --focus-offset: 2px; /* --- Capas --- */ --z-header: 100; --z-skip: 200; --z-float: 90; /* --- Header --- */ --header-h: 84px; --header-h-compact: 64px; /* --- Área táctil mínima --- */ --tap-min: 44px; }