/* variables.css — Design tokens de ALICIA ONE --------------------------------------------------------------------------- Todo el color, tipografía y espaciado del sitio pasa por estas variables. Nunca se deben usar valores hex/px sueltos en el resto de los CSS: así, cambiar la paleta (o crear el futuro tema Pro) es cuestión de tocar SOLO este archivo. SISTEMA DE TEMAS POR PLAN (preparado para el futuro) --------------------------------------------------------------------------- El puede llevar un atributo `data-plan="essential|plus|pro"`. Hoy los tres usan la misma paleta (bloque :root). El día que se quiera dar a Pro una identidad visual propia, basta con añadir un bloque `[data-plan="pro"] { --color-accent: ...; }` más abajo: ningún componente tiene que tocarse porque todos leen `var(--color-*)`. */ :root { /* ---- Paleta oficial ALICIA ONE ---------------------------------- */ --alicia-bg: #0B111B; --alicia-bg-2: #0D1420; --alicia-surface: #111B2A; --alicia-surface-2: #141F30; --alicia-blue: #3D7CFF; --alicia-cyan: #1DD7FF; --alicia-purple: #7C5CFF; --alicia-blue-light: #7ACBFF; --alicia-text: #F6F8FB; --alicia-muted: #9AA6B5; /* ---- Tokens semánticos (lo que consume el resto del CSS) -------- */ --color-bg: var(--alicia-bg); --color-bg-2: var(--alicia-bg-2); --color-surface: var(--alicia-surface); --color-surface-2: var(--alicia-surface-2); --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.16); --color-primary: var(--alicia-blue); --color-accent: var(--alicia-cyan); --color-accent-2: var(--alicia-purple); --color-text: var(--alicia-text); --color-text-muted: var(--alicia-muted); --color-text-on-primary: #08101F; --color-success: #2FD97C; --color-danger: #FF6B6B; --color-warning: #FFC24B; --gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-accent)); --gradient-brand-soft: linear-gradient(135deg, rgba(61, 124, 255, 0.16), rgba(29, 215, 255, 0.10)); --gradient-violet: linear-gradient(135deg, var(--color-primary), var(--color-accent-2)); /* ---- Tipografía -------------------------------------------------- Sin fuentes de pago ni CDNs pesados: pila de sistema + Google Fonts variable (una sola familia, con font-display: swap) es suficiente para el objetivo "premium pero ligero" del brief. */ --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; --fs-4xl: 3.75rem; /* Titulares fluidos — más contraste entre H1 y H2 que la escala fija. */ --fs-h1: clamp(3.4rem, 6vw, 6rem); --fs-h2: clamp(2.2rem, 4vw, 4rem); --lh-tight: 1.15; --lh-normal: 1.5; --lh-relaxed: 1.7; /* ---- Espaciado (escala de 4px) ------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---- Radios, sombras, capas -------------------------------------- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.40); --shadow-glow: 0 0 0 1px rgba(61, 124, 255, 0.25), 0 12px 40px rgba(61, 124, 255, 0.18); --container-max: 1200px; --container-narrow: 760px; --transition-fast: 150ms ease; --transition-base: 220ms ease; --transition-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1); --z-header: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } /* --------------------------------------------------------------------- Tema por plan — placeholders listos para usar, sin efecto visual hoy. Añadir reglas reales aquí (o en un archivo aparte, p. ej. theme-pro.css) el día que Pro tenga una paleta propia. El resto del sitio no cambia. ------------------------------------------------------------------------ */ [data-plan="essential"] { /* --color-accent: var(--alicia-cyan); */ } [data-plan="plus"] { /* --color-accent: var(--alicia-cyan); */ } [data-plan="pro"] { /* Ejemplo futuro: --color-accent: var(--alicia-purple); --gradient-brand: linear-gradient(135deg, var(--alicia-purple), var(--alicia-cyan)); */ } /* Respeta la preferencia de movimiento reducido del sistema operativo. */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } }