/** * ═══════════════════════════════════════════════════════════════════════════ * XBC DESIGN TOKENS - SISTEMA DE DISEÑO * ═══════════════════════════════════════════════════════════════════════════ * * Filosofía: LUZ · VIDRIO · PRECISIÓN * * Como mesa de arquitecto a las 6AM: * Silenciosa, luminosa, honesta. * * FUTURÍSTICA® The.Archi.Designers * Dashboard - Rediseño Editorial * Fecha: 2026-02-04 * * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ═════════════════════════════════════════════════════════════════════════ MATERIALES - Los 3 únicos colores base ═══════════════════════════════════════════════════════════════════════ */ --violeta-profundo: #1A0F1F; /* Void, noche, tinta */ --warm-void: #F5F3EE; /* Warm, día, papel */ --proton-green: #00FFA3; /* Acento marca, solo sidebar + night */ /* Derivados semánticos */ --color-text-primary: var(--violeta-profundo); --color-text-secondary: rgba(26, 15, 31, 0.60); --color-text-tertiary: rgba(26, 15, 31, 0.40); --color-background: var(--warm-void); --color-accent: var(--proton-green); /* ═════════════════════════════════════════════════════════════════════════ TIPOGRAFÍA - Ratio 1.333 (Perfect Fourth) ═══════════════════════════════════════════════════════════════════════ */ /* Familias */ --font-display: 'Tenor Sans', serif; /* Títulos hero */ --font-body: 'Cormorant Garamond', serif; /* Todo lo demás */ --font-mono: 'IBM Plex Mono', monospace; /* Código, datos */ /* Escala modular - ratio 1.333 */ --text-xs: 10px; /* Caption, labels uppercase */ --text-sm: 13px; /* Body small, meta info */ --text-base: 16px; /* Body principal */ --text-lg: 21px; /* Lead, destacado */ --text-xl: 28px; /* H3 */ --text-2xl: 37px; /* H2 */ --text-3xl: 49px; /* H1 */ --text-4xl: 65px; /* Display small */ --text-5xl: 87px; /* Display */ --text-6xl: 116px; /* Hero (mobile) */ --text-hero: 160px; /* H1 Hero desktop - 10rem */ /* Line heights */ --leading-tight: 1.2; --leading-normal: 1.6; --leading-loose: 2.0; /* Letter spacing */ --tracking-tight: -0.04em; /* Hero grande */ --tracking-normal: 0; --tracking-wide: 0.15em; /* Labels */ --tracking-wider: 0.25em; /* Widget titles uppercase */ /* Font weights */ --weight-light: 200; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; /* ═════════════════════════════════════════════════════════════════════════ ESPACIADO MODULAR - Base 8px ═══════════════════════════════════════════════════════════════════════ */ --space-1: 4px; /* Inline micro */ --space-2: 8px; /* Relacionados */ --space-3: 12px; /* Grupos pequeños */ --space-4: 16px; /* Elementos */ --space-6: 24px; /* Grupos */ --space-8: 32px; /* Secciones pequeñas */ --space-12: 48px; /* Widgets padding */ --space-16: 64px; /* Widgets grandes */ --space-20: 80px; /* Hero sections */ --space-24: 96px; /* Separadores */ --space-32: 128px; /* Separadores mayores */ --space-40: 160px; /* Section breaks */ /* ═════════════════════════════════════════════════════════════════════════ GLASSMORPHISM - 5 Niveles de elevación ═══════════════════════════════════════════════════════════════════════ */ /* Flat - sin elevación, transparente */ --glass-flat-bg: transparent; --glass-flat-blur: none; --glass-flat-shadow: none; /* Low - sutil, elementos secundarios */ --glass-low-bg: rgba(255, 255, 255, 0.40); --glass-low-blur: blur(20px) saturate(180%); --glass-low-shadow: 0 2px 8px rgba(26, 15, 31, 0.08); /* Mid - estándar, widgets principales */ --glass-mid-bg: rgba(255, 255, 255, 0.50); --glass-mid-blur: blur(32px) saturate(200%); --glass-mid-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8) inset, 0 8px 24px rgba(26, 15, 31, 0.12), 0 2px 8px rgba(26, 15, 31, 0.08); /* High - destacado, modals */ --glass-high-bg: rgba(255, 255, 255, 0.60); --glass-high-blur: blur(40px) saturate(220%); --glass-high-shadow: 0 0 0 1px rgba(255, 255, 255, 1) inset, 0 16px 48px rgba(26, 15, 31, 0.16), 0 4px 12px rgba(26, 15, 31, 0.10); /* Ultra - overlay máximo */ --glass-ultra-bg: rgba(255, 255, 255, 0.75); --glass-ultra-blur: blur(48px) saturate(250%); --glass-ultra-shadow: 0 0 0 2px rgba(255, 255, 255, 1) inset, 0 24px 64px rgba(26, 15, 31, 0.20), 0 8px 16px rgba(26, 15, 31, 0.12); /* ═════════════════════════════════════════════════════════════════════════ BORDER RADIUS - Solo círculos conceptuales ═══════════════════════════════════════════════════════════════════════ */ --radius-none: 0; /* Default - arquitectónico */ --radius-circle: 50%; /* SOLO avatares, dots */ /* ═════════════════════════════════════════════════════════════════════════ LÍNEAS Y DIVISORES ═══════════════════════════════════════════════════════════════════════ */ --border-subtle: 1px solid rgba(26, 15, 31, 0.08); --border-normal: 1px solid rgba(26, 15, 31, 0.12); --border-strong: 1px solid rgba(26, 15, 31, 0.15); /* ═════════════════════════════════════════════════════════════════════════ ANIMACIONES - Curvas signature ═══════════════════════════════════════════════════════════════════════ */ /* Duraciones */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; --duration-circadian: 2500ms; /* Transiciones luz */ /* Curvas */ --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* Hover general */ --ease-enter: cubic-bezier(0.4, 0, 0.2, 1); /* Fade in */ --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Fade out */ --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Checkboxes */ --ease-circadian: cubic-bezier(0.4, 0, 0.2, 1); /* Luz circadiana */ /* ═════════════════════════════════════════════════════════════════════════ Z-INDEX - Capas ordenadas ═══════════════════════════════════════════════════════════════════════ */ --z-base: 1; --z-sidebar: 100; --z-header: 200; --z-dropdown: 300; --z-modal: 400; --z-tooltip: 500; --z-circadian: 0; /* Fondo luz, detrás de todo */ --z-grid: 1; /* Grid arquitectónico */ /* ═════════════════════════════════════════════════════════════════════════ ICONOGRAFÍA ═══════════════════════════════════════════════════════════════════════ */ --icon-size-sm: 16px; --icon-size-base: 24px; --icon-size-lg: 32px; --icon-stroke: 1.5px; /* ═════════════════════════════════════════════════════════════════════════ GRID ARQUITECTÓNICO ═══════════════════════════════════════════════════════════════════════ */ --grid-size: 8px; /* Base módulo */ --grid-color: rgba(26, 15, 31, 0.03); --grid-color-strong: rgba(26, 15, 31, 0.06); /* ═════════════════════════════════════════════════════════════════════════ BREAKPOINTS - Media queries ═══════════════════════════════════════════════════════════════════════ */ --breakpoint-mobile: 375px; --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px; --breakpoint-wide: 1440px; --breakpoint-ultra: 1920px; } /* ═════════════════════════════════════════════════════════════════════════ CLASES UTILITARIAS - Glassmorphism ═════════════════════════════════════════════════════════════════════════ */ .glass-flat { background: var(--glass-flat-bg); backdrop-filter: var(--glass-flat-blur); box-shadow: var(--glass-flat-shadow); } .glass-low { background: var(--glass-low-bg); backdrop-filter: var(--glass-low-blur); box-shadow: var(--glass-low-shadow); } .glass-mid { background: var(--glass-mid-bg); backdrop-filter: var(--glass-mid-blur); box-shadow: var(--glass-mid-shadow); } .glass-high { background: var(--glass-high-bg); backdrop-filter: var(--glass-high-blur); box-shadow: var(--glass-high-shadow); } .glass-ultra { background: var(--glass-ultra-bg); backdrop-filter: var(--glass-ultra-blur); box-shadow: var(--glass-ultra-shadow); } /* ═════════════════════════════════════════════════════════════════════════ NOTAS DE USO ═════════════════════════════════════════════════════════════════════════ ESPACIADO: - Widgets: padding mínimo 48px (var(--space-12)) - Sections: margin mínimo 160px (var(--space-40)) TIPOGRAFÍA: - H1 Hero: font-size: var(--text-hero) = 160px desktop - Widget titles: font-size: var(--text-xs), letter-spacing: var(--tracking-wider) - Stats: font-size: 6rem, font-weight: var(--weight-light) GLASSMORPHISM: - Widgets principales: .glass-mid (50% transparencia) - Fondos circadianos: 30-40% intensidad en ::before - NUNCA rgba() > 0.75 en cards BORDER RADIUS: - Default: var(--radius-none) = 0 - SOLO círculos: var(--radius-circle) = 50% (avatares, dots) ANIMACIONES: - Hover: var(--ease-spring) + var(--duration-normal) - Circadiano: var(--ease-circadian) + var(--duration-circadian) - Entrada escalonada: stagger 80ms ═════════════════════════════════════════════════════════════════════════ */