/* ==========================================================
 * Landing Page Configuration
 * Change these variables to customize the landing page palette,
 * typography, spacing, and effects in one place.
 * ========================================================== */
:root {
    /* ---- Brand Colors ---- */
    --lp-primary: #3931c3;
    --lp-primary-light: #6366F1;
    --lp-primary-dark: #2a2499;
    --lp-primary-glow: rgba(57, 49, 195, 0.35);
    --lp-secondary: #C026D3;
    --lp-secondary-light: #D946EF;
    --lp-accent: #06B6D4;

    /* ---- Neutral Palette ---- */
    --lp-white: #FFFFFF;
    --lp-off-white: #F8FAFC;
    --lp-gray-50: #F1F5F9;
    --lp-gray-100: #E2E8F0;
    --lp-gray-200: #CBD5E1;
    --lp-gray-400: #94A3B8;
    --lp-gray-500: #64748B;
    --lp-gray-600: #475569;
    --lp-gray-700: #334155;
    --lp-gray-800: #1E293B;
    --lp-gray-900: #0F172A;
    --lp-black: #020617;

    /* ---- Typography ---- */
    --lp-font-heading: 'Outfit', sans-serif;
    --lp-font-body: 'DM Sans', sans-serif;
    --lp-font-mono: 'JetBrains Mono', monospace;

    /* ---- Spacing Scale ---- */
    --lp-section-py: 6rem;
    --lp-section-py-mobile: 3.5rem;

    /* ---- Border Radius ---- */
    --lp-radius-sm: 8px;
    --lp-radius-md: 12px;
    --lp-radius-lg: 20px;
    --lp-radius-xl: 28px;
    --lp-radius-full: 9999px;

    /* ---- Shadows ---- */
    --lp-shadow-sm: 0 1px 3px rgba(15,23,42,0.06);
    --lp-shadow-md: 0 4px 16px rgba(15,23,42,0.08);
    --lp-shadow-lg: 0 12px 40px rgba(15,23,42,0.12);
    --lp-shadow-glow: 0 0 60px var(--lp-primary-glow);

    /* ---- Glass Effect ---- */
    --lp-glass-bg: rgba(255,255,255,0.72);
    --lp-glass-border: rgba(255,255,255,0.3);
    --lp-glass-blur: 16px;

    /* ---- Transitions ---- */
    --lp-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --lp-transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --lp-transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}