/* ========================================================================== Symphony Design System v2.0 — Rediseño Premium Tokens de diseño con tipografía fluida, grano, mesh gradients y sistema de movimiento unificado. ========================================================================== */ /* --- @property para animaciones CSS de mesh gradient --- */ @property --mesh-x1 { syntax: ''; initial-value: 20%; inherits: false; } @property --mesh-y1 { syntax: ''; initial-value: 30%; inherits: false; } @property --mesh-x2 { syntax: ''; initial-value: 70%; inherits: false; } @property --mesh-y2 { syntax: ''; initial-value: 60%; inherits: false; } @property --mesh-x3 { syntax: ''; initial-value: 50%; inherits: false; } @property --mesh-y3 { syntax: ''; initial-value: 80%; inherits: false; } @property --cta-angle { syntax: ''; initial-value: 0deg; inherits: false; } :root { /* ----------------------------------------------------------------------- 1. PALETA CROMÁTICA — Deep Indigo / Royal Purple / Electric Violet Directamente del brandbook oficial de Symphony. ----------------------------------------------------------------------- */ /* Escala Índigo */ --sy-indigo-50: #eef2ff; --sy-indigo-100: #e0e7ff; --sy-indigo-200: #c7d2fe; --sy-indigo-300: #a5b4fc; --sy-indigo-400: #818cf8; --sy-indigo-500: #6366f1; --sy-indigo-600: #4f46e5; --sy-indigo-700: #4338ca; --sy-indigo-800: #3730a3; --sy-indigo-900: #312e81; --sy-indigo-950: #1e1b4b; /* Escala Púrpura */ --sy-purple-50: #faf5ff; --sy-purple-100: #f3e8ff; --sy-purple-200: #e9d5ff; --sy-purple-300: #d8b4fe; --sy-purple-400: #c084fc; --sy-purple-500: #a855f7; --sy-purple-600: #9333ea; --sy-purple-700: #7e22ce; --sy-purple-800: #6b21a8; --sy-purple-900: #581c87; --sy-purple-950: #3b0764; /* Tonos de acento Violeta */ --sy-violet-400: #a78bfa; --sy-violet-500: #8b5cf6; --sy-violet-600: #7c3aed; /* Acento cálido Ámbar — para estados "vivos" y notificaciones */ --sy-amber-400: #fbbf24; --sy-amber-500: #f59e0b; --sy-amber-glow: rgba(251, 191, 36, 0.15); /* Estados semánticos oficiales */ --sy-color-success: #22c55e; --sy-color-warning: #f59e0b; --sy-color-error: #ef4444; --sy-color-info: #3b82f6; /* ----------------------------------------------------------------------- 2. SUPERFICIES Y FONDOS ----------------------------------------------------------------------- */ /* Fondo oscuro principal con matiz índigo profundo */ --sy-bg-deep: #0b0a1f; --sy-bg-base: #0f0e24; --sy-bg-elevated: #16152e; --sy-bg-card: #1a1938; --sy-bg-card-hover:#201f42; /* Sección clara (blanco cálido con tinte lila, NO blanco puro) */ --sy-bg-light: #f6f4ff; --sy-bg-light-alt: #eeebfa; /* Bordes */ --sy-border-subtle: rgba(165, 180, 252, 0.06); --sy-border-default: rgba(165, 180, 252, 0.10); --sy-border-strong: rgba(165, 180, 252, 0.18); --sy-border-gradient: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.1), rgba(99,102,241,0.3)); /* ----------------------------------------------------------------------- 3. TEXTO ----------------------------------------------------------------------- */ --sy-text-primary: #f0eeff; --sy-text-secondary: rgba(240, 238, 255, 0.65); --sy-text-tertiary: rgba(240, 238, 255, 0.40); --sy-text-on-light: #1a1738; --sy-text-on-light-secondary: rgba(26, 23, 56, 0.60); /* ----------------------------------------------------------------------- 4. GRADIENTES DE MARCA ----------------------------------------------------------------------- */ --sy-gradient-brand: linear-gradient(175deg, #1e1b4b 0%, #312e81 40%, #3b0764 100%); --sy-gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6); --sy-gradient-accent: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7); --sy-gradient-text: linear-gradient(135deg, #a5b4fc 0%, #c084fc 50%, #818cf8 100%); --sy-gradient-glow: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%); --sy-gradient-section: linear-gradient(180deg, var(--sy-bg-deep) 0%, var(--sy-bg-base) 100%); /* Mesh gradient del hero: 4 puntos de color animables */ --sy-mesh-hero: radial-gradient(ellipse 60% 50% at var(--mesh-x1) var(--mesh-y1), rgba(99,102,241,0.25), transparent), radial-gradient(ellipse 50% 60% at var(--mesh-x2) var(--mesh-y2), rgba(139,92,246,0.20), transparent), radial-gradient(ellipse 55% 45% at var(--mesh-x3) var(--mesh-y3), rgba(168,85,247,0.15), transparent), radial-gradient(ellipse 70% 70% at 50% 50%, rgba(30,27,75,0.8), transparent); /* ----------------------------------------------------------------------- 5. TIPOGRAFÍA FLUIDA — Escala con clamp() Mobile-first: base 360px, escala hasta 1440px+ ----------------------------------------------------------------------- */ --sy-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sy-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Display / Hero H1: 36px → 60px (elegante, 2-3 líneas, sin desborde vertical) */ --sy-text-display: clamp(2.25rem, 1.6rem + 2.2vw, 3.75rem); /* H2 de sección: 30px → 52px */ --sy-text-h2: clamp(1.85rem, 1.3rem + 1.8vw, 3.25rem); /* H3: 24px → 36px */ --sy-text-h3: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); /* H4: 20px → 24px */ --sy-text-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* Cuerpo: 17px → 20px (mínimo 16px siempre) */ --sy-text-body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* Cuerpo grande: 18px → 22px */ --sy-text-body-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* Texto secundario/caption: mínimo 14px */ --sy-text-small: clamp(0.875rem, 0.85rem + 0.15vw, 1rem); /* Label de sección: 13px → 15px */ --sy-text-label: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem); /* Métricas grandes: 48px → 96px */ --sy-text-metric: clamp(3rem, 2rem + 4vw, 6rem); /* Marquee: 17px → 21px (elegante, refinado, sin escala desmedida) */ --sy-text-marquee: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); /* Tracking (letter-spacing) */ --sy-tracking-tight: -0.04em; --sy-tracking-snug: -0.02em; --sy-tracking-normal: 0; --sy-tracking-wide: 0.05em; --sy-tracking-widest: 0.1em; /* Line heights */ --sy-leading-none: 0.95; --sy-leading-tight: 1.05; --sy-leading-snug: 1.2; --sy-leading-normal: 1.55; --sy-leading-relaxed:1.65; /* Pesos tipográficos */ --sy-font-regular: 400; --sy-font-medium: 500; --sy-font-semibold: 600; --sy-font-bold: 700; --sy-font-extrabold: 800; /* ----------------------------------------------------------------------- 6. ESPACIADO MODULAR — Base 8px ----------------------------------------------------------------------- */ --sy-space-1: 0.25rem; /* 4px */ --sy-space-2: 0.5rem; /* 8px */ --sy-space-3: 0.75rem; /* 12px */ --sy-space-4: 1rem; /* 16px */ --sy-space-5: 1.25rem; /* 20px */ --sy-space-6: 1.5rem; /* 24px */ --sy-space-7: 2rem; /* 32px */ --sy-space-8: 2.5rem; /* 40px */ --sy-space-9: 3rem; /* 48px */ --sy-space-10: 4rem; /* 64px */ --sy-space-11: 5rem; /* 80px */ --sy-space-12: 6rem; /* 96px */ /* Espaciado fluido entre secciones */ --sy-section-gap: clamp(5rem, 12vw, 10rem); /* ----------------------------------------------------------------------- 7. RADIOS DE BORDE ----------------------------------------------------------------------- */ --sy-radius-xs: 4px; --sy-radius-sm: 8px; --sy-radius-md: 12px; --sy-radius-lg: 16px; --sy-radius-xl: 24px; --sy-radius-2xl: 32px; --sy-radius-3xl: 48px; --sy-radius-full: 9999px; /* ----------------------------------------------------------------------- 8. SOMBRAS CON TINTE VIOLETA (no negras puras) 3 niveles de elevación como Linear/Raycast ----------------------------------------------------------------------- */ --sy-shadow-sm: 0 1px 3px rgba(30, 27, 75, 0.15), 0 1px 2px rgba(30, 27, 75, 0.10); --sy-shadow-md: 0 4px 12px rgba(30, 27, 75, 0.20), 0 2px 4px rgba(30, 27, 75, 0.12); --sy-shadow-lg: 0 12px 40px rgba(30, 27, 75, 0.30), 0 4px 12px rgba(30, 27, 75, 0.15); --sy-shadow-xl: 0 24px 60px rgba(30, 27, 75, 0.35), 0 8px 20px rgba(30, 27, 75, 0.20); --sy-shadow-glow:0 0 40px rgba(99, 102, 241, 0.25), 0 0 80px rgba(139, 92, 246, 0.10); --sy-shadow-card:0 0 0 1px rgba(165, 180, 252, 0.08), 0 8px 32px rgba(30, 27, 75, 0.25); /* ----------------------------------------------------------------------- 9. SISTEMA DE MOVIMIENTO — Una sola curva, 3 duraciones ----------------------------------------------------------------------- */ --sy-ease: cubic-bezier(0.32, 0.72, 0, 1); --sy-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sy-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --sy-dur-micro: 180ms; --sy-dur-base: 420ms; --sy-dur-macro: 900ms; --sy-stagger: 60ms; /* ----------------------------------------------------------------------- 10. Z-INDEX SCALE ----------------------------------------------------------------------- */ --sy-z-base: 1; --sy-z-elevated: 10; --sy-z-sticky: 100; --sy-z-dropdown: 700; --sy-z-overlay: 800; --sy-z-modal: 900; --sy-z-header: 1000; --sy-z-progress: 1100; /* ----------------------------------------------------------------------- 11. CONTENEDORES ----------------------------------------------------------------------- */ --sy-container-sm: 720px; --sy-container-md: 960px; --sy-container-lg: 1200px; --sy-container-xl: 1360px; --sy-gutter: clamp(1rem, 3vw, 2rem); /* ----------------------------------------------------------------------- 12. GRANO / NOISE — Textura SVG inline para quitar look "plano digital" Opacidad 3-6%, aplicar como pseudo-elemento ::after ----------------------------------------------------------------------- */ --sy-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); } /* ----------------------------------------------------------------------- 13. ANIMACIONES DE MESH GRADIENT ----------------------------------------------------------------------- */ @keyframes mesh-drift { 0% { --mesh-x1: 20%; --mesh-y1: 30%; --mesh-x2: 70%; --mesh-y2: 60%; --mesh-x3: 50%; --mesh-y3: 80%; } 33% { --mesh-x1: 40%; --mesh-y1: 50%; --mesh-x2: 30%; --mesh-y2: 40%; --mesh-x3: 70%; --mesh-y3: 30%; } 66% { --mesh-x1: 60%; --mesh-y1: 20%; --mesh-x2: 80%; --mesh-y2: 70%; --mesh-x3: 20%; --mesh-y3: 60%; } 100% { --mesh-x1: 20%; --mesh-y1: 30%; --mesh-x2: 70%; --mesh-y2: 60%; --mesh-x3: 50%; --mesh-y3: 80%; } } @keyframes cta-glow-rotate { from { --cta-angle: 0deg; } to { --cta-angle: 360deg; } } /* ----------------------------------------------------------------------- 14. REDUCED MOTION — Desactivar animaciones costosas ----------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --sy-dur-micro: 0ms; --sy-dur-base: 0ms; --sy-dur-macro: 0ms; } }