/* =========================================================
   DESIGN SYSTEM
   Portfolio: Lekan Olowookere
   Version: 1.0
========================================================= */

:root{

    /* =====================================================
       BRAND COLORS
    ===================================================== */

    --color-primary:#3B82F6;
    --color-primary-light:#60A5FA;
    --color-primary-dark:#1D4ED8;

    --color-secondary:#06B6D4;
    --color-secondary-light:#22D3EE;

    --color-accent:#8B5CF6;

    --color-success:#10B981;
    --color-warning:#F59E0B;
    --color-danger:#EF4444;

    /* =====================================================
       BACKGROUND
    ===================================================== */

    --bg-body:#030712;
    --bg-surface:#0F172A;
    --bg-card:#111827;
    --bg-card-hover:#1E293B;
    --bg-glass:rgba(255,255,255,.05);
    --bg-glass-strong:rgba(255,255,255,.08);
    --bg-secondary:#0f172a;

    /* =====================================================
       TEXT
    ===================================================== */

    --text-primary:#F8FAFC;
    --text-secondary:#CBD5E1;
    --text-muted:#94A3B8;
    --text-inverse:#030712;

    /* =====================================================
       BORDER
    ===================================================== */

    --border-color:rgba(255,255,255,.08);
    --border-light:rgba(255,255,255,.15);

    /* =====================================================
       GRADIENTS
    ===================================================== */

    --gradient-primary:linear-gradient(135deg, #3B82F6, #06B6D4);
    --gradient-card:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    --gradient-text:linear-gradient(90deg, #3B82F6, #22D3EE);
    --gradient-aurora:radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 55%), radial-gradient(circle at bottom right, rgba(6,182,212,.16), transparent 60%), radial-gradient(circle at center, rgba(139,92,246,.12), transparent 65%);

    /* =====================================================
       TYPOGRAPHY
    ===================================================== */

    --font-heading:"Space Grotesk",sans-serif;
    --font-body:"Inter",sans-serif;
    --font-mono:"JetBrains Mono",monospace;

    /* =====================================================
       FONT SIZE
    ===================================================== */

    --fs-xs:.75rem;
    --fs-sm:.875rem;
    --fs-md:1rem;
    --fs-lg:1.125rem;
    --fs-xl:1.25rem;
    --fs-2xl:1.5rem;
    --fs-3xl:2rem;
    --fs-4xl:2.8rem;
    --fs-5xl:3.8rem;
    --fs-6xl:5rem;

    /* =====================================================
       FONT WEIGHT
    ===================================================== */

    --fw-light:300;
    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-black:800;

    /* =====================================================
       SPACING (8PX SYSTEM)
    ===================================================== */

    --space-1:.5rem;
    --space-2:1rem;
    --space-3:1.5rem;
    --space-4:2rem;
    --space-5:3rem;
    --space-6:4rem;
    --space-7:6rem;
    --space-8:8rem;

    /* =====================================================
       BORDER RADIUS
    ===================================================== */

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:20px;
    --radius-xl:28px;
    --radius-pill:999px;

    /* =====================================================
       SHADOWS
    ===================================================== */

    --shadow-sm:0 5px 12px rgba(0,0,0,.15);
    --shadow-md:0 15px 35px rgba(0,0,0,.25);
    --shadow-lg:0 30px 70px rgba(0,0,0,.45);
    --shadow-glow:0 0 35px rgba(59,130,246,.25);

    /* =====================================================
       TRANSITIONS
    ===================================================== */

    --transition-fast:.2s ease;
    --transition-normal:.35s ease;
    --transition-slow:.6s ease;

    /* =====================================================
       LAYOUT
    ===================================================== */

    --container-width:1280px;
    --navbar-height:88px;
    --section-padding:120px;

    /* =====================================================
       Z INDEX
    ===================================================== */

    --z-background:-10;
    --z-default:1;
    --z-header:1000;
    --z-modal:2000;
    --z-loader:9999;

    /* =====================================================
       BLUR
    ===================================================== */

    --blur-sm:10px;
    --blur-md:18px;
    --blur-lg:28px;

    /* ===========================
       CONTENT WIDTHS
    =========================== */

    --container-sm:768px;
    --container-md:1024px;
    --container-lg:1280px;
    --container-xl:1440px;

    /* ===========================
       GRID
    =========================== */

    --grid-gap:32px;

    /* ===========================
       ICON SIZE
    =========================== */

    --icon-sm:18px;
    --icon-md:24px;
    --icon-lg:32px;
    --icon-xl:48px;
}

:root[data-theme="light"]{
    --bg-body:#f8fafc;
    --bg-surface:#eef2ff;
    --bg-card:#ffffff;
    --bg-card-hover:#e2e8f0;
    --bg-glass:rgba(2,6,23,.05);
    --bg-glass-strong:rgba(2,6,23,.08);
    --bg-secondary:#f1f5f9;
    --text-primary:#020617;
    --text-secondary:#334155;
    --text-muted:#64748b;
    --text-inverse:#f8fafc;
    --border-color:rgba(15,23,42,.1);
    --border-light:rgba(15,23,42,.16);
    --shadow-sm:0 8px 20px rgba(15,23,42,.08);
    --shadow-md:0 18px 40px rgba(15,23,42,.12);
    --shadow-lg:0 35px 80px rgba(15,23,42,.16);
    --shadow-glow:0 0 30px rgba(59,130,246,.18);
}

:root{

    --bg:#050816;
    --surface:#0f172a;

    --text-primary:#ffffff;
    --text-secondary:#94a3b8;

    --border-color:rgba(255,255,255,.08);

}

[data-theme="light"]{

    --bg:#f8fafc;
    --surface:#ffffff;

    --text-primary:#0f172a;
    --text-secondary:#475569;

    --border-color:#e2e8f0;

}