/* ==========================================================================
tokens.css — Portafolio Cristian Báez
Fuente de verdad: CONTEXT.md §2. Todo valor aquí es literal y aprobado.
No recalcular derivados: están escritos tal cual los define la spec.
==========================================================================
─────────────────────────────────────────────────────────────────────────
CONVENCIÓN DE MEDIA SLOTS (leer antes de tocar cualquier imagen)
─────────────────────────────────────────────────────────────────────────
Cada imagen del inventario de assets (CONTEXT.md §7) vive dentro de un
contenedor con dos clases:
· .media-slot → comportamiento común: recorte, radio, y el rayado de
placeholder que se ve mientras el asset real no
exista. Sin borde: las imágenes van a sangre.
· .settings-dashboard → el MISMO nombre base del archivo. Es quien fija el
tamaño (aspect-ratio, max-width, min-height).
El tamaño SIEMPRE se declara en el contenedor, NUNCA en el ![]()
. La imagen
sólo rellena (`width:100%; height:100%; object-fit:cover`). Por eso sustituir
una imagen por una animación Lottie es quirúrgico: se cambia el contenido
del slot y el layout no se entera.
"reemplaza .settings-dashboard por settings-dashboard.json con
lottie-web en loop"
→ se borra el ![]()
, se deja
vacío y lottie-web monta dentro. Cero CSS que tocar.
Las animaciones irán en /assets/animations/ (carpeta ya reservada).
Nota: los nombres que empiezan por dígito (01-hero-dashboard-final) son
válidos en el atributo class de HTML pero no como selector `.clase` en CSS
sin escapes. Se seleccionan con [class~="01-hero-dashboard-final"], que tiene
la misma especificidad y deja el nombre literal. Ver base.css.
IMPORTANTE: el reveal-on-scroll (CONTEXT.md §6.1) es un sistema DISTINTO e
independiente. Actúa sobre [data-reveal] en textos y cards, nunca sobre el
contenido de un .media-slot. No se mezclan ni se sustituyen entre sí.
========================================================================== */
:root {
/* ---- Color: los 5 tokens ---- */
--ink: #0B0B0C;
--white: #FFFFFF;
--bg: #F4F3F0;
/* El gris de la spec era #8A8880, que sobre --bg da 3.20:1 — por debajo del
4.5:1 que pide WCAG AA para texto normal, y se usa en párrafos de 15–17px.
Oscurecido a #6F6D66: 4.67:1, misma temperatura y peso visual. */
--muted: #6F6D66;
--accent: #2E5CFF;
/* ---- Derivados (literales, CONTEXT.md §2) ---- */
--border: rgba(11, 11, 12, 0.14); /* borde estándar */
/* --border-image eliminado a petición: ninguna imagen del sitio lleva borde. */
--border-btn: rgba(11, 11, 12, 0.25); /* botón secundario */
--border-hairline: rgba(11, 11, 12, 0.10); /* línea de footer */
--border-cell: rgba(11, 11, 12, 0.12); /* gap-hairline de celdas */
--border-soft: rgba(11, 11, 12, 0.18); /* switch de idioma */
--border-toggle: rgba(11, 11, 12, 0.20); /* toggle de idioma */
/* Sobre negro */
--on-ink-border: rgba(255, 255, 255, 0.14);
--on-ink-secondary: rgba(255, 255, 255, 0.70);
--on-ink-body: rgba(255, 255, 255, 0.66);
--on-ink-label: rgba(255, 255, 255, 0.50);
--on-ink-mono: rgba(255, 255, 255, 0.60);
/* Nav sticky */
--nav-bg: rgba(244, 243, 240, 0.82);
--nav-blur: blur(10px);
/* Placeholder rayado a 135° */
--stripe: repeating-linear-gradient(135deg,
#EDEBE6 0px, #EDEBE6 6px, #F4F3F0 6px, #F4F3F0 12px);
--stripe-sm: repeating-linear-gradient(135deg,
#EDEBE6 0px, #EDEBE6 3px, #F4F3F0 3px, #F4F3F0 6px);
--stripe-on-ink: repeating-linear-gradient(135deg,
rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 6px,
rgba(255,255,255,0.02) 6px, rgba(255,255,255,0.02) 12px);
--label-bg: rgba(244, 243, 240, 0.92);
--label-bg-on-ink: rgba(11, 11, 12, 0.80);
/* ---- Tipografía ---- */
--font-display: Fraunces, Georgia, 'Times New Roman', serif;
--font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, Menlo, Consolas, monospace;
/* Escala tipográfica (CONTEXT.md §2) */
--fs-h1-home: 6.4vw;
--fs-h1-case: clamp(30px, 5.4vw, 76px);
--fs-h1-page: 48px;
--fs-h1-about: clamp(28px, 3vw, 40px);
--fs-h2: clamp(23px, 3.4vw, 32px);
--fs-h3: 20px;
--fs-menu: 42px;
--fs-lead: clamp(16px, 2.4vw, 20px);
--fs-body: clamp(15px, 1.7vw, 17px);
--fs-body-s: 16px;
--fs-meta: 13px;
--fs-caption: 12px;
--fs-label: 11px;
--fs-label-s: 10px;
--fs-mono: 12px;
--track-tight: -0.035em;
--track-h2: -0.02em;
--track-label: 0.14em;
--track-label-s: 0.10em;
--track-mono: 0.06em;
/* Medidas de línea */
--measure-lead: 58ch;
--measure-body: 62ch;
--measure-process: 58ch;
/* ---- Espaciado (4 · 8 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 160) ---- */
--s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
--s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px; --s-10: 160px;
/* ---- Contenedor y grilla ---- */
--container: 1280px;
--container-text: 1080px;
--pad-x: 48px; /* → 24px en ≤860px, ver layout.css */
--grid-case: 220px 1fr;
--gap-case: 64px;
--grid-process: 40px 1fr;
--gap-process: 24px;
/* Ritmo vertical entre secciones */
--rhythm: clamp(60px, 9vw, 120px);
--rhythm-sm: clamp(52px, 7vw, 96px);
/* ---- Forma ---- */
--radius-0: 0;
--radius: 4px;
--radius-pill: 999px;
--shadow-1: 0 1px 2px rgba(11, 11, 12, 0.06);
--shadow-2: 0 16px 40px -12px rgba(11, 11, 12, 0.16);
/* ---- Movimiento (curva única) ---- */
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--d-micro: 160ms;
--d-hover: 220ms;
--d-menu: 300ms;
--d-reveal: 650ms;
--d-img-scale: 420ms;
/* ---- z-index ---- */
--z-cushion: 0;
--z-content: 1;
--z-flowmenu: 25;
--z-nav: 30;
--z-menu: 60;
--z-nav-open: 80;
}
