/* ========================================================================== TOKENS — Opción A: "Criterio en blanco" Azul tinta · Terracota · Bricolage Grotesque + Inter ========================================================================== */ :root { /* ------------------------------------------------------------------------- COLORES — Fondos -------------------------------------------------------------------------- */ --color-bg: #FAFAF7; /* Blanco roto cálido — canvas principal */ --color-surface: #FFFFFF; /* Blanco puro — cards, modales */ --color-surface-alt: #F3F3EF; /* Gris arena — secciones alternas */ /* ------------------------------------------------------------------------- COLORES — Texto -------------------------------------------------------------------------- */ --color-text-primary: #0F0F0F; /* Negro profundo — cuerpo, títulos */ --color-text-secondary: #5C5C5A; /* Gris oscuro — subtítulos, metadatos */ --color-text-muted: #9C9C98; /* Gris medio — captions, placeholders */ --color-text-on-accent: #FFFFFF; /* Blanco — texto sobre fondos oscuros */ /* ------------------------------------------------------------------------- COLORES — Acento primario: Azul tinta Institucional, serio, autoridad sin agresividad. -------------------------------------------------------------------------- */ --color-accent-primary: #1A2B4A; --color-accent-primary-hover: #243A62; --color-accent-primary-subtle: #EEF1F8; /* Fondo sutil de uso informativo */ /* ------------------------------------------------------------------------- COLORES — Acento cálido: Terracota CTAs, llamadas a la acción, energía sin gritar. -------------------------------------------------------------------------- */ --color-accent-warm: #D4633A; --color-accent-warm-hover: #BE4F29; --color-accent-warm-subtle: #FBF0EC; /* ------------------------------------------------------------------------- COLORES — Bordes -------------------------------------------------------------------------- */ --color-border: #E4E4DF; --color-border-strong:#C8C8C2; /* ------------------------------------------------------------------------- COLORES — Dark overlay Usado en la banda de bonificación y secciones de énfasis. En Opción A = azul tinta oscuro. -------------------------------------------------------------------------- */ --color-dark-bg: #1A2B4A; --color-dark-surface: #243A62; --color-dark-text-primary: #F5F5F2; --color-dark-text-secondary: #A8B4CC; --color-dark-border: rgba(255, 255, 255, 0.10); /* ------------------------------------------------------------------------- TIPOGRAFÍA -------------------------------------------------------------------------- */ --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'Inter', sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Escala tipográfica — mobile-first con clamp */ --text-xs: clamp(0.75rem, 1vw, 0.8125rem); /* 12-13px */ --text-sm: clamp(0.875rem, 1.25vw, 0.9375rem); /* 14-15px */ --text-base: clamp(1rem, 1.5vw, 1.125rem); /* 16-18px */ --text-lg: clamp(1.125rem, 2vw, 1.25rem); /* 18-20px */ --text-xl: clamp(1.25rem, 2.5vw, 1.5rem); /* 20-24px */ --text-2xl: clamp(1.5rem, 3vw, 2rem); /* 24-32px */ --text-3xl: clamp(2rem, 4vw, 2.75rem); /* 32-44px */ --text-4xl: clamp(2.5rem, 5vw, 3.5rem); /* 40-56px */ --text-hero: clamp(2.75rem, 7vw, 6rem); /* 44-96px */ /* Line heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing */ --tracking-tighter: -0.03em; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.10em; --tracking-widest: 0.15em; /* ------------------------------------------------------------------------- ESPACIADO — Base 8px -------------------------------------------------------------------------- */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-7: 56px; --space-8: 64px; --space-10: 80px; --space-12: 96px; --space-14: 112px; --space-16: 128px; /* ------------------------------------------------------------------------- BORDES — Radio -------------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px; /* ------------------------------------------------------------------------- SOMBRAS — Multicapa, sutiles -------------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-sm: 0 1px 3px rgba(15, 15, 15, 0.05), 0 2px 8px rgba(15, 15, 15, 0.04); --shadow-md: 0 2px 8px rgba(15, 15, 15, 0.06), 0 8px 24px rgba(15, 15, 15, 0.05); --shadow-lg: 0 8px 24px rgba(15, 15, 15, 0.08), 0 20px 48px rgba(15, 15, 15, 0.06); --shadow-xl: 0 16px 48px rgba(15, 15, 15, 0.10), 0 32px 80px rgba(15, 15, 15, 0.07); /* ------------------------------------------------------------------------- TRANSICIONES -------------------------------------------------------------------------- */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; /* ------------------------------------------------------------------------- LAYOUT -------------------------------------------------------------------------- */ --container-max: 1280px; --container-padding: clamp(var(--space-3), 5vw, var(--space-8)); --section-gap: clamp(var(--space-12), 10vw, var(--space-16)); }