Tokens · Bloque :root CSS
tokens.css · pegar tal cual.
Archivo disponible en tokens.css en la raíz del DS. En Tailwind v4, envolver el bloque en @theme { ... } en lugar de :root para exponer utilidades como bg-navy, text-cream.
/* tokens.css · v1.0 · Padelgazar */
:root {
/* Color */
--color-navy: #001F48;
--color-cream: #FAF8F3;
--color-paper: #E5E2DA;
--color-graphite: #1A1B1F;
--color-steel: #6B7280;
--color-ball: #E8F04A;
/* Tipografía */
--font-display: 'Archivo Black', sans-serif;
--font-body: 'Inter', sans-serif;
--tracking-display: -0.02em;
--tracking-mono-tag: 0.08em;
--lh-display: 1.05;
--lh-body: 1.5;
/* Escala (desktop/mobile vía clamp) */
--type-hero: clamp(56px, 7.2vw, 96px);
--type-h1: clamp(40px, 5vw, 64px);
--type-h2: clamp(28px, 3.2vw, 40px);
--type-h3: clamp(20px, 1.9vw, 24px);
--type-body-l: clamp(18px, 1.45vw, 20px);
--type-body: 16px;
--type-small: 14px;
--type-mono-tag: 12px;
/* Espacio · escala 4 px */
--space-1: 4px; --space-2: 8px;
--space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px;
--space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 128px;
/* Radius */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-pill: 999px;
/* Container */
--container-max: 1240px;
--container-pad: clamp(20px, 4vw, 32px);
--section-py: clamp(48px, 8vw, 96px);
/* Elevación funcional (no decorativa) */
--elevation-menu: 0 6px 16px rgba(0, 31, 72, 0.18);
--elevation-modal: 0 24px 48px rgba(0, 31, 72, 0.24);
}
