/* ============================================
   LogicLoft Design Tokens
   ============================================ */

:root {
    /* === BACKGROUNDS === */
    --bg-primary: #0a0e1a;
    --bg-secondary: #0f1424;
    --bg-elevated: #141a2e;
    --bg-surface: #1a2138;
    --bg-hover: #1e2745;

    /* === GLASS MORPHISM === */
    --glass-bg: rgba(20, 26, 46, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 16px;
    --glass-bg-strong: rgba(20, 26, 46, 0.85);

    /* === ACCENT COLORS === */
    --accent-primary: #00d4ff;
    --accent-primary-rgb: 0, 212, 255;
    --accent-secondary: #7c5cfc;
    --accent-secondary-rgb: 124, 92, 252;
    --accent-warm: #f59e0b;
    --accent-warm-rgb: 245, 158, 11;
    --accent-success: #10b981;
    --accent-danger: #ef4444;

    /* === GLOW EFFECTS === */
    --glow-cyan: 0 0 20px rgba(0, 212, 255, 0.3), 0 0 60px rgba(0, 212, 255, 0.1);
    --glow-purple: 0 0 20px rgba(124, 92, 252, 0.3), 0 0 60px rgba(124, 92, 252, 0.1);
    --glow-subtle: 0 0 40px rgba(0, 212, 255, 0.08);
    --glow-warm: 0 0 20px rgba(245, 158, 11, 0.3), 0 0 60px rgba(245, 158, 11, 0.1);

    /* === TEXT === */
    --text-primary: #f0f2f5;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-accent: var(--accent-primary);

    /* === BORDERS === */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-accent: rgba(0, 212, 255, 0.3);

    /* === GRADIENTS === */
    --gradient-hero: linear-gradient(135deg, #0a0e1a 0%, #0f1424 50%, #141a2e 100%);
    --gradient-card: linear-gradient(135deg, rgba(20, 26, 46, 0.8), rgba(26, 33, 56, 0.4));
    --gradient-accent: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    --gradient-text: linear-gradient(135deg, #f0f2f5, #94a3b8);
    --gradient-mesh: radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
                     radial-gradient(ellipse at 80% 20%, rgba(124, 92, 252, 0.06) 0%, transparent 50%),
                     radial-gradient(ellipse at 50% 80%, rgba(0, 212, 255, 0.04) 0%, transparent 50%);

    /* === TYPOGRAPHY === */
    --font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;

    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;

    /* === SPACING === */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --section-padding: var(--space-24);
    --container-max: 1200px;
    --container-padding: var(--space-6);

    /* === BORDER RADIUS === */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* === TRANSITIONS === */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    /* === Z-INDEX === */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}