/* ============================================================= HAXOF GROUP — tokens.css Sistema de diseño: variables globales reutilizables Importar PRIMERO en style.css o en ============================================================= */ :root { /* ── Colores principales ── */ --c-primary: #3486FF; --c-secondary: #8338EC; --c-accent: #00d4ff; --c-danger: #ef4444; --c-success: #22c55e; --c-warning: #eab308; /* ── Fondo y superficies ── */ --c-bg: #0a0e17; --c-bg-alt: #0b0f1a; --c-surface: #111827; --c-surface-2: #1a1a25; --c-surface-3: #12121a; /* ── Texto ── */ --c-text: #ffffff; --c-text-muted: #8892a4; --c-text-soft: #b0b0b0; --c-text-dim: #9ca3af; --c-text-faint: #6b7280; /* ── Bordes ── */ --c-border: rgba(255, 255, 255, 0.07); --c-border-soft: rgba(255, 255, 255, 0.04); --c-border-em: rgba(65, 105, 225, 0.35); /* ── Gradientes reutilizables ── */ --g-brand: linear-gradient(90deg, var(--c-primary) 0%, var(--c-secondary) 100%); --g-brand-135: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%); --g-btn: linear-gradient(135deg, #4169e1, #8a2be2); --g-btn-submit: linear-gradient(90deg, #7b00ff 0%, #a200ff 100%); --g-bg-card: linear-gradient(to bottom, #090022, #1D016B); /* ── Sombras de glowing ── */ --shadow-primary: 0 0 15px rgba(65, 105, 225, 0.7); --shadow-primary-s: 0 0 10px rgba(65, 105, 225, 0.4); --shadow-primary-l: 0 0 30px rgba(65, 105, 225, 0.55); /* ── Tipografía ── */ --font-base: "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Poppins", sans-serif; --font-mono: "Space Mono", monospace; /* ── Espaciado ── */ --space-xs: 8px; --space-sm: 16px; --space-md: 32px; --space-lg: 64px; --space-xl: 96px; /* ── Radio ── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 30px; --radius-pill: 999px; /* ── Transiciones ── */ --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s cubic-bezier(0.25, 1, 0.5, 1); }