/* ============================================================================ VIDGLASS — DESIGN SYSTEM / TOKENS Única fuente de verdad. Ningún componente define colores, tipografías, espaciados o radios propios: todo se consume desde acá. ========================================================================== */ :root { /* --- Color: neutrales -------------------------------------------------- */ /* Escala de grafito frío. Base de la identidad: casi negro, no negro puro. */ --c-ink-1000: #05070a; --c-ink-950: #080b0f; --c-ink-900: #0c1116; --c-ink-800: #131a21; --c-ink-700: #1c252e; --c-ink-600: #2a353f; --c-ink-500: #46545f; --c-ink-400: #6b7a86; --c-ink-300: #97a4ae; --c-ink-200: #c3ccd3; --c-ink-100: #e2e7ea; --c-ink-50: #f1f3f5; --c-paper: #ffffff; /* --- Color: acento ----------------------------------------------------- */ /* "Glass edge": el verde-cian que se ve en el canto de una plancha de vidrio float. Es el color propio de la categoría, no un azul genérico. */ --c-edge-600: #0f6a7d; --c-edge-500: #1a8ba3; --c-edge-400: #43adc4; --c-edge-300: #7ecad9; --c-edge-200: #b3e2ea; --c-edge-100: #ddf2f6; /* Señal secundaria: sólo para estados de éxito (WhatsApp / confirmaciones) */ --c-signal-500: #1f9d55; /* --- Roles semánticos: superficie clara (por defecto) ------------------- */ --surface-0: var(--c-paper); --surface-1: #fafbfb; --surface-2: var(--c-ink-50); --surface-3: var(--c-ink-100); --text-1: var(--c-ink-900); --text-2: var(--c-ink-500); --text-3: var(--c-ink-400); --hairline: rgba(12, 17, 22, .10); --hairline-2: rgba(12, 17, 22, .06); --accent: var(--c-edge-600); --accent-ink: var(--c-paper); /* --- Roles semánticos: superficie oscura -------------------------------- */ /* Se aplican con [data-theme="dark"] en cualquier
. Los componentes no saben en qué fondo viven; sólo leen estas variables. */ --dark-surface-0: var(--c-ink-950); --dark-surface-1: var(--c-ink-900); --dark-surface-2: var(--c-ink-800); --dark-text-1: #f4f7f8; --dark-text-2: var(--c-ink-300); --dark-hairline: rgba(255, 255, 255, .12); /* --- Tipografía --------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; /* Escala fluida (clamp) — ratio ~1.2 mobile / ~1.25 desktop. Evita media queries de tipografía y elimina saltos entre breakpoints. */ --fs-display: clamp(2.5rem, 1.5rem + 4.6vw, 5.25rem); /* 40 → 84 */ --fs-h1: clamp(2.25rem, 1.4rem + 3.8vw, 4.5rem); /* 36 → 72 */ --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); /* 28 → 52 */ --fs-h3: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); /* 20 → 28 */ --fs-h4: clamp(1.0625rem, 1rem + .35vw, 1.25rem); /* 17 → 20 */ --fs-lead: clamp(1.0625rem, 1rem + .55vw, 1.375rem); /* 17 → 22 */ --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.75rem; --lh-tight: 1.02; --lh-snug: 1.14; --lh-normal: 1.45; --lh-relaxed: 1.65; --tracking-display: -0.035em; --tracking-tight: -0.022em; --tracking-normal: -0.011em; --tracking-wide: 0.14em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* --- Espaciado (base 4px) ---------------------------------------------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* Ritmo vertical de sección: una sola variable gobierna todo el sitio. */ --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem); --section-y-tight: clamp(3rem, 2rem + 4.5vw, 6rem); /* --- Layout ------------------------------------------------------------- */ --container: 1280px; --container-text: 720px; /* medida óptima de lectura (~68ch) */ --gutter: clamp(1.25rem, .8rem + 2.2vw, 3rem); --grid-gap: clamp(1rem, .6rem + 1.6vw, 2rem); /* --- Radios ------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px; /* --- Sombras (suaves, en dos capas: contacto + difusión) ---------------- */ --sh-xs: 0 1px 2px rgba(8, 11, 15, .05); --sh-sm: 0 1px 2px rgba(8, 11, 15, .05), 0 4px 10px rgba(8, 11, 15, .05); --sh-md: 0 2px 4px rgba(8, 11, 15, .04), 0 12px 28px rgba(8, 11, 15, .08); --sh-lg: 0 4px 8px rgba(8, 11, 15, .04), 0 24px 56px rgba(8, 11, 15, .11); --sh-xl: 0 8px 16px rgba(8, 11, 15, .05), 0 40px 90px rgba(8, 11, 15, .16); /* --- Movimiento --------------------------------------------------------- */ /* Curvas: "out-expo" para entradas (rápido y luego se asienta), "spring-soft" sólo en interacciones directas del usuario. */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 520ms; --dur-reveal: 900ms; /* --- Elevación (z-index centralizado) ----------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-dock: 250; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* --- Cristal (glassmorphism controlado) --------------------------------- */ /* Se usa SÓLO en el header y el dock móvil: superficies que flotan sobre contenido en movimiento. En cualquier otro lado es ruido. */ --glass-blur: saturate(180%) blur(16px); --glass-light: rgba(255, 255, 255, .72); --glass-dark: rgba(8, 11, 15, .62); } /* Inversión de roles para bloques oscuros. Cualquier contenedor marcado data-theme="dark" reasigna los roles semánticos y todos sus hijos se adaptan sin una sola regla extra. */ [data-theme='dark'] { --surface-0: var(--dark-surface-0); --surface-1: var(--dark-surface-1); --surface-2: var(--dark-surface-2); --surface-3: var(--c-ink-700); --text-1: var(--dark-text-1); --text-2: var(--dark-text-2); --text-3: var(--c-ink-400); --hairline: var(--dark-hairline); --hairline-2: rgba(255, 255, 255, .06); --accent: var(--c-edge-300); --accent-ink: var(--c-ink-950); --sh-md: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .35); --sh-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 24px 56px rgba(0, 0, 0, .45); }