/* ═══════════════════════════════════════════════════════════════ ARJUNAFIT — DESIGN TOKENS ═══════════════════════════════════════════════════════════════ La fuente única de verdad para todo el sistema visual. Cualquier cambio aquí se refleja en TODA la app. Uso: incluir SIEMPRE primero en el ═══════════════════════════════════════════════════════════════ */ :root { /* ════════════════════════════════════════ COLORES — BACKGROUNDS ════════════════════════════════════════ */ --bg-base: #0c0714; /* Fondo principal de la app */ --bg-elevated: #160f24; /* Cards, modales, elementos elevados */ --bg-card: #1a1030; /* Cards interactivas */ --bg-input: rgba(255, 255, 255, 0.06); --bg-overlay: rgba(12, 7, 20, 0.92); --bg-glass: rgba(26, 16, 48, 0.7); /* ════════════════════════════════════════ COLORES — BRAND ════════════════════════════════════════ */ --primary: #7c3aed; /* Morado principal */ --primary-light: #a78bfa; --primary-dark: #6d28d9; --primary-glow: rgba(124, 58, 237, 0.4); --accent: #ec4899; /* Rosa secundario */ --accent-light: #f9a8d4; --accent-dark: #db2777; --accent-glow: rgba(236, 72, 153, 0.4); /* ════════════════════════════════════════ COLORES — SEMÁNTICOS ════════════════════════════════════════ */ --success: #4ade80; --success-bg: rgba(74, 222, 128, 0.12); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.12); --info: #60a5fa; --info-bg: rgba(96, 165, 250, 0.12); /* ════════════════════════════════════════ COLORES — TEXTO ════════════════════════════════════════ */ --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.72); --text-tertiary: rgba(255, 255, 255, 0.48); --text-muted: rgba(255, 255, 255, 0.28); --text-inverse: #0c0714; /* ════════════════════════════════════════ COLORES — BORDES ════════════════════════════════════════ */ --border-subtle: rgba(255, 255, 255, 0.06); --border-base: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-focus: rgba(124, 58, 237, 0.5); /* ════════════════════════════════════════ GRADIENTES ════════════════════════════════════════ */ --grad-primary: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%); --grad-primary-r: linear-gradient(45deg, #7c3aed 0%, #ec4899 100%); --grad-warm: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%); --grad-cool: linear-gradient(135deg, #60a5fa 0%, #7c3aed 100%); --grad-success: linear-gradient(135deg, #4ade80 0%, #22c55e 100%); --grad-danger: linear-gradient(135deg, #f87171 0%, #ec4899 100%); --grad-card: linear-gradient(160deg, #1a1030 0%, #0f0c1a 100%); --grad-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124, 58, 237, 0.4) 0%, transparent 70%); /* ════════════════════════════════════════ SPACING — Escala 4px ════════════════════════════════════════ */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ════════════════════════════════════════ RADIUS ════════════════════════════════════════ */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-3xl: 32px; --r-full: 9999px; /* ════════════════════════════════════════ SHADOWS ════════════════════════════════════════ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55); --shadow-2xl: 0 32px 96px rgba(0, 0, 0, 0.65); /* Glows con color */ --glow-primary: 0 0 24px rgba(124, 58, 237, 0.4); --glow-primary-lg: 0 8px 32px rgba(124, 58, 237, 0.5); --glow-accent: 0 0 24px rgba(236, 72, 153, 0.4); --glow-success: 0 0 16px rgba(74, 222, 128, 0.4); /* Inset (presión, profundidad) */ --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3); /* ════════════════════════════════════════ TIPOGRAFÍA ════════════════════════════════════════ */ --font-display: 'Outfit', -apple-system, system-ui, sans-serif; --font-body: 'Outfit', -apple-system, system-ui, sans-serif; --font-mono: 'SF Mono', 'Menlo', 'Monaco', monospace; /* Escala tipográfica */ --t-xs: 11px; --t-sm: 13px; --t-base: 15px; --t-md: 16px; --t-lg: 18px; --t-xl: 22px; --t-2xl: 28px; --t-3xl: 36px; --t-4xl: 48px; --t-display: clamp(36px, 9vw, 56px); /* Pesos */ --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --w-extra: 800; --w-black: 900; /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.7; /* Letter spacing */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.05em; --ls-wider: 0.1em; --ls-widest: 0.2em; /* ════════════════════════════════════════ ANIMACIÓN ════════════════════════════════════════ */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --d-instant: 100ms; --d-fast: 180ms; --d-normal: 280ms; --d-slow: 450ms; --d-slower: 650ms; /* ════════════════════════════════════════ LAYOUT ════════════════════════════════════════ */ --max-w: 430px; /* App container max width */ --max-w-content: 1160px; /* Landing page max width */ --nav-height: 64px; --bottom-nav-h: 72px; --safe-top: env(safe-area-inset-top, 0); --safe-bottom: env(safe-area-inset-bottom, 0); --safe-left: env(safe-area-inset-left, 0); --safe-right: env(safe-area-inset-right, 0); /* ════════════════════════════════════════ Z-INDEX ════════════════════════════════════════ */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-overlay: 400; --z-modal: 500; --z-popover: 600; --z-toast: 700; --z-tooltip: 800; --z-top: 9999; /* ════════════════════════════════════════ BLUR (glassmorphism) ════════════════════════════════════════ */ --blur-sm: blur(8px); --blur-md: blur(16px); --blur-lg: blur(24px); --blur-xl: blur(40px); } /* ═══════════════════════════════════════════════════════════════ SOPORTE DE COLOR-SCHEME Le dice al navegador que el sitio es dark — mejora autofill, scrollbars, etc en iOS/Android. ═══════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; } /* Si quisiéramos light mode en el futuro, sería: */ /* @media (prefers-color-scheme: light) { :root { --bg-base: #ffffff; ... } } */