/* ================================================================= BOOK LANDING · DESIGN TOKENS ────────────────────────────────────────────────────────────────── POR QUÉ TOKENS Los tokens son la única fuente de verdad visual del proyecto. En lugar de escribir "#0071dc" 50 veces, usamos --bl-color-primary. Cambiar una variable = re-temar todo el sistema coherentemente. POR QUÉ SCOPED BAJO .book-landing (y no :root) Este componente se incrustará dentro de un WordPress existente. Si defiásemos tokens en :root: - Sobrescribiríamos variables del tema padre (fuga hacia afuera) - Heredaríamos variables del tema padre (fuga hacia adentro) Scoped bajo .book-landing = aislamiento total en ambas direcciones. ================================================================= */ .book-landing { /* ============================================================= 1. COLOR PRIMITIVES La paleta cruda. NUNCA usar estos directamente en componentes. Siempre usar los aliases semánticos de más abajo. ============================================================= */ /* Brand blue — médico, profesional, confiable (alineado al sitio existente) */ --bl-blue-50: #eff6ff; --bl-blue-100: #dbeafe; --bl-blue-200: #bfdbfe; --bl-blue-300: #93c5fd; --bl-blue-400: #60a5fa; --bl-blue-500: #0071dc; /* = primary del sitio existente */ --bl-blue-600: #025ec0; --bl-blue-700: #024a99; --bl-blue-800: #02325f; --bl-blue-900: #021e40; /* = dark del sitio existente */ /* Neutros — superficies, texto, bordes */ --bl-gray-50: #f8fafc; --bl-gray-100: #f1f5f9; --bl-gray-200: #e2e8f0; --bl-gray-300: #cbd5e1; --bl-gray-400: #94a3b8; --bl-gray-500: #64748b; --bl-gray-600: #475569; --bl-gray-700: #334155; --bl-gray-800: #1e293b; --bl-gray-900: #0f172a; /* Puros */ --bl-white: #ffffff; --bl-black: #000000; /* Acento premium (oro) — detalle sutil del libro, CTA secundario */ --bl-gold-400: #d4b45a; --bl-gold-500: #c9a64b; --bl-gold-600: #a98438; /* Feedback semántico */ --bl-success: #16a34a; --bl-warning: #f59e0b; --bl-danger: #dc2626; /* ============================================================= 2. SEMANTIC ALIASES Los componentes referencian SOLO estos. Cambiar alias = re-temar. ============================================================= */ /* Fondos */ --bl-color-bg: var(--bl-white); --bl-color-bg-subtle: var(--bl-gray-50); --bl-color-bg-muted: var(--bl-gray-100); --bl-color-surface: var(--bl-white); --bl-color-surface-glass: rgba(255, 255, 255, 0.65); --bl-color-surface-overlay: rgba(2, 30, 64, 0.55); /* Texto */ --bl-color-text: var(--bl-gray-800); --bl-color-text-muted: var(--bl-gray-500); --bl-color-text-subtle: var(--bl-gray-400); --bl-color-text-heading: var(--bl-blue-900); --bl-color-text-inverse: var(--bl-white); /* Marca / CTA */ --bl-color-primary: var(--bl-blue-500); --bl-color-primary-hover: var(--bl-blue-600); --bl-color-primary-active: var(--bl-blue-700); --bl-color-on-primary: var(--bl-white); /* Acento */ --bl-color-accent: var(--bl-gold-500); --bl-color-accent-hover: var(--bl-gold-600); /* Bordes */ --bl-color-border: var(--bl-gray-200); --bl-color-border-strong: var(--bl-gray-300); /* ============================================================= 3. TIPOGRAFÍA 2 familias, ambas variable fonts, ambas en Google Fonts. - Manrope → display / headings (carácter geométrico pero cálido) - Inter → body (la sans neutral más legible del mercado) ============================================================= */ --bl-font-display: 'Manrope', 'Inter', system-ui, sans-serif; --bl-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --bl-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Escala fluida con clamp(min, preferido, max) → escala solo con viewport */ --bl-text-xs: 0.75rem; /* 12 */ --bl-text-sm: 0.875rem; /* 14 */ --bl-text-base: 1rem; /* 16 */ --bl-text-md: 1.125rem; /* 18 */ --bl-text-lg: 1.25rem; /* 20 */ --bl-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20 → 24 */ --bl-text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* 24 → 32 */ --bl-text-3xl: clamp(2rem, 1.5rem + 2vw, 2.75rem); /* 32 → 44 */ --bl-text-4xl: clamp(2.5rem, 1.8rem + 3vw, 3.75rem); /* 40 → 60 */ --bl-leading-tight: 1.1; --bl-leading-snug: 1.25; --bl-leading-normal: 1.55; --bl-leading-relaxed: 1.75; --bl-tracking-tight: -0.02em; --bl-tracking-normal: 0; --bl-tracking-wide: 0.04em; --bl-tracking-uppercase: 0.08em; --bl-weight-regular: 400; --bl-weight-medium: 500; --bl-weight-semibold: 600; --bl-weight-bold: 700; --bl-weight-extrabold: 800; /* ============================================================= 4. ESPACIADO Base 4px. Ritmo consistente. Usar solo estos escalones. ============================================================= */ --bl-space-0: 0; --bl-space-1: 0.25rem; /* 4 */ --bl-space-2: 0.5rem; /* 8 */ --bl-space-3: 0.75rem; /* 12 */ --bl-space-4: 1rem; /* 16 */ --bl-space-5: 1.5rem; /* 24 */ --bl-space-6: 2rem; /* 32 */ --bl-space-7: 3rem; /* 48 */ --bl-space-8: 4rem; /* 64 */ --bl-space-9: 6rem; /* 96 */ --bl-space-10: 8rem; /* 128 */ /* ============================================================= 5. RADIUS ============================================================= */ --bl-radius-sm: 6px; --bl-radius-md: 10px; --bl-radius-lg: 16px; --bl-radius-xl: 24px; --bl-radius-2xl: 32px; --bl-radius-pill: 9999px; --bl-radius-full: 50%; /* ============================================================= 6. SHADOWS Sombra tintada con blue-900 (no gris neutro) → sensación premium. ============================================================= */ --bl-shadow-xs: 0 1px 2px rgba(2, 30, 64, 0.05); --bl-shadow-sm: 0 2px 8px rgba(2, 30, 64, 0.07); --bl-shadow-md: 0 8px 24px rgba(2, 30, 64, 0.08); --bl-shadow-lg: 0 16px 48px rgba(2, 30, 64, 0.10); --bl-shadow-xl: 0 32px 80px rgba(2, 30, 64, 0.14); --bl-shadow-glow: 0 12px 40px rgba(0, 113, 220, 0.30); --bl-shadow-book: 0 30px 60px -15px rgba(2, 30, 64, 0.40), 0 18px 36px -18px rgba(2, 30, 64, 0.25); /* Glassmorphism */ --bl-blur-glass: 16px; --bl-glass-bg: rgba(255, 255, 255, 0.65); --bl-glass-border: rgba(255, 255, 255, 0.45); /* ============================================================= 7. MOTION ============================================================= */ --bl-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --bl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --bl-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --bl-duration-fast: 150ms; --bl-duration: 250ms; --bl-duration-slow: 450ms; --bl-float-duration: 6s; /* libro flotando */ /* ============================================================= 8. LAYOUT ============================================================= */ --bl-container-max: 1120px; --bl-container-pad: var(--bl-space-4); --bl-section-pad-y: var(--bl-space-8); --bl-section-pad-y-lg: var(--bl-space-10); /* ============================================================= 9. Z-INDEX SCALE Un número por capa. Evita guerras de z-index. ============================================================= */ --bl-z-base: 1; --bl-z-content: 10; --bl-z-sticky: 100; --bl-z-overlay: 1000; --bl-z-modal: 2000; } /* =========================================================== BREAKPOINTS ──────────────────────────────────────────────────────────── Las CSS custom properties NO se pueden usar dentro de @media. Se documentan aquí como referencia y para uso desde JS. Filosofía MOBILE-FIRST: estilos base = móvil, y añadimos min-width media queries para enriquecer en pantallas grandes. =========================================================== */ /* --bl-bp-sm: 640px landscape de móvil grande --bl-bp-md: 768px tablet --bl-bp-lg: 1024px laptop / desktop pequeño --bl-bp-xl: 1280px desktop --bl-bp-2xl: 1536px desktop grande */ /* =========================================================== TEMA DARK (preloadado, no se activará hasta que el usuario lo pida) Cambiar solo los aliases semánticos — los primitivos no se tocan. =========================================================== */ .book-landing[data-theme="dark"] { --bl-color-bg: var(--bl-gray-900); --bl-color-bg-subtle: var(--bl-gray-800); --bl-color-bg-muted: var(--bl-gray-800); --bl-color-surface: var(--bl-gray-800); --bl-color-surface-glass: rgba(15, 23, 42, 0.65); --bl-color-text: var(--bl-gray-100); --bl-color-text-muted: var(--bl-gray-400); --bl-color-text-heading: var(--bl-white); --bl-color-border: var(--bl-gray-700); --bl-color-border-strong: var(--bl-gray-600); }