:root{

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

    --primary:#0079FF;
    --primary-hover:#0067db;
    --primary-light:#e8f3ff;

    --secondary:#FF0060;
    --secondary-hover:#e60056;
    --secondary-light:#ffe5ef;

    --success:#10b981;
    --warning:#f59e0b;
    --danger:#ef4444;
    --info:#06b6d4;

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

    --bg:#f6f8fc;
    --bg-card:#ffffff;
    --bg-sidebar:#ffffff;
    --bg-header:#ffffff;
    --bg-modal:#ffffff;

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

    --text:#111827;
    --text-light:#6b7280;
    --text-muted:#9ca3af;
    --text-white:#ffffff;

    /* =========================
       BORDERS
    ========================== */

    --border:#e5e7eb;
    --border-light:#f3f4f6;

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

    --shadow-sm:
        0 1px 2px rgba(0,0,0,.04);

    --shadow-md:
        0 4px 12px rgba(0,0,0,.08);

    --shadow-lg:
        0 10px 30px rgba(0,0,0,.12);

    --shadow-xl:
        0 20px 60px rgba(0,0,0,.18);

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

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:18px;
    --radius-xl:24px;
    --radius-full:999px;

    /* =========================
       SPACING
    ========================== */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:28px;
    --space-8:32px;
    --space-10:40px;
    --space-12:48px;
    --space-16:64px;

    /* =========================
       HEADER
    ========================== */

    --header-height:70px;

    /* =========================
       SIDEBAR
    ========================== */

    --sidebar-width:260px;
    --rightbar-width:320px;

    /* =========================
       CONTAINER
    ========================== */

    --container:1400px;

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

    --font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-xs:12px;
    --font-sm:13px;
    --font-md:15px;
    --font-lg:18px;
    --font-xl:22px;
    --font-2xl:28px;
    --font-3xl:36px;

    /* =========================
       FONT WEIGHTS
    ========================== */

    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-extra:800;

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

    --z-header:1000;
    --z-sidebar:900;
    --z-dropdown:1100;
    --z-modal:1200;
    --z-toast:1300;
    --z-loader:1400;

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

    --transition-fast:.15s ease;
    --transition:.25s ease;
    --transition-slow:.4s ease;

    /* =========================
       FEED
    ========================== */

    --feed-max-width:760px;

    /* =========================
       MOBILE
    ========================== */

    --mobile-header:60px;
    --mobile-bottom-nav:70px;

}

/* =========================
   DARK MODE READY
========================== */

[data-theme="dark"]{

    --bg:#0f172a;
    --bg-card:#111827;
    --bg-sidebar:#111827;
    --bg-header:#111827;
    --bg-modal:#111827;

    --text:#f8fafc;
    --text-light:#cbd5e1;
    --text-muted:#94a3b8;

    --border:#1f2937;
    --border-light:#273244;

}