@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    /* Colors — Dark Mystical Palette */
    --clr-black: #0B0B10;
    --clr-navy: #141424;
    --clr-lavender: #B78BFF;
    --clr-lavender-dim: rgba(183,139,255,0.4);
    --clr-white: #F4F2FF;
    --clr-gray: #A7A3B6;
    --clr-border: rgba(244,242,255,0.12);
    --clr-border-hover: rgba(183,139,255,0.3);
    --clr-glass-bg: rgba(11,11,16,0.78);
    --clr-overlay-light: rgba(244,242,255,0.08);

    /* Typography */
    --ff-heading: 'Sora', sans-serif;
    --ff-body: 'Inter', sans-serif;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

    /* Font sizes */
    --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem;
    --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem;
    --fs-3xl: 2rem; --fs-4xl: 2.5rem; --fs-5xl: 3.25rem;
    --fs-6xl: 4rem; --fs-7xl: 4.5rem;

    /* Spacing */
    --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
    --sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;

    /* Layout */
    --max-w: 1200px;
    --max-w-narrow: 720px;
    --gutter: 24px;

    /* Borders & Shadows */
    --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-2xl: 22px; --r-full: 9999px;
    --shadow-glow: 0 0 30px rgba(183,139,255,0.4);
    --shadow-glow-lg: 0 0 60px rgba(183,139,255,0.3);

    /* Transitions */
    --ease: cubic-bezier(0.4,0,0.2,1);
    --dur: 300ms;
}

@media (max-width: 768px) {
    :root {
        --fs-5xl: 2.25rem;
        --fs-4xl: 2rem;
        --fs-6xl: 2.75rem;
        --fs-7xl: 3rem;
    }
}