/* ============================================================ tokens.css — Sistema de diseño (variables) Ajustar SOLO estos valores para re-brandear el template. ============================================================ */ :root { /* ----- Paleta base ----- */ --c-bg: #0a0806; --c-bg-soft: #141110; --c-surface: #1c1815; --c-line: #2a2420; --c-text: #f5efe6; --c-text-muted: #b8ac9c; --c-text-dim: #7a6f62; --c-brand: #c89b4e; /* dorado — cambiar por color corporativo */ --c-brand-ink: #0a0806; --c-brand-soft: #e0be83; --c-accent: #a33c2e; /* rojo especia — CTA secundario */ --c-success: #3f9d5c; --c-warn: #d9a048; --c-danger: #c44a3c; /* ----- Tipografía ----- */ --ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --ff-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --fs-h1: clamp(2.25rem, 4.5vw + 1rem, 4.25rem); --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); --fs-h3: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem); --fs-lead: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.55; --lh-loose: 1.7; --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; /* ----- Espacio (base 4px) ----- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* ----- Radios ----- */ --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px; /* ----- Sombras ----- */ --sh-sm: 0 1px 2px rgba(0,0,0,.2); --sh-md: 0 6px 20px rgba(0,0,0,.25); --sh-lg: 0 20px 48px rgba(0,0,0,.35); /* ----- Layout ----- */ --container: 1200px; --container-narrow: 820px; --nav-h: 72px; /* ----- Motion ----- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 440ms; /* ----- Z-index ----- */ --z-base: 1; --z-nav: 50; --z-drawer: 60; --z-lightbox: 80; --z-banner: 90; --z-toast: 100; } /* Modo claro opcional — activar añadiendo data-theme="light" al */ [data-theme="light"] { --c-bg: #faf7f1; --c-bg-soft: #f3ede2; --c-surface: #ffffff; --c-line: #e5dccc; --c-text: #221d17; --c-text-muted: #5c5247; --c-text-dim: #8a7e6d; --c-brand-ink: #faf7f1; --sh-md: 0 6px 20px rgba(40,28,10,.08); }