:root {

    --container-width: 1440px;

    /* Backgrounds */
    --bg-primary: #050613;
    --bg-secondary: #090b12;
    --bg-card: #0a0d1b;
    --bg-card-alt: #0d1020;
    --bg-box: #181a22;
    --bg-menu: #222;
    --bg-base: #0F0F13;
    --bg-surface: #18181F;

    /* Text */
    --text-heading: #ffffff;
    --text-primary: #d9d9d9;
    --text-secondary: #8A8AA8;
    --text-grey: #8A8AA8;
    --text-muted: #9ca3af;
    --text-meta: #7d8498;
    --accent: #096dd9;


    /* Brand */
    --primary: #8b3dff;
    --primary-light: #a855f7;

    --secondary: #096dd9;
    --secondary-light: #096dd9;
    --secondary-dark: #096dd9;

    --success: #5dc192;

    /* Borders */
    --border-light: rgba(255, 255, 255, .08);
    --border-medium: rgba(255, 255, 255, .06);
    --border-soft: rgba(255, 255, 255, .05);

    /* Glows */
    --left-glow-1: rgba(93, 52, 255, .25);
    --left-glow-2: rgba(93, 52, 255, .15);

    --right-glow-1: rgba(255, 92, 44, .20);
    --right-glow-2: rgba(255, 92, 44, .12);

    /* Gradients */
    --btn-gradient:
        linear-gradient(104deg, #3e86c6 0%, #a666aa 22.1231%, #ec4492 50.5298%, #ee4454 76.1508%, #f05427 100%);

    --follow-gradient:
        linear-gradient(104deg, #3e86c6 0%, #a666aa 22.1231%, #ec4492 50.5298%, #ee4454 76.1508%, #f05427 100%);

    --avatar-gradient:
        linear-gradient(135deg, #8b3dff, #ff7a59);

    --g1-gradient:
        linear-gradient(135deg, #7c3aed, #a855f7);

    --g2-gradient:
        linear-gradient(135deg, #ff6b35, #ff9b42);

    --g3-gradient:
        linear-gradient(135deg, #0ea5e9, #6366f1);

    --g4-gradient:
        linear-gradient(135deg, #fb923c, #ff6b35);

    --g5-gradient:
        linear-gradient(135deg, #8b5cf6, #38bdf8);

    --g6-gradient:
        linear-gradient(135deg, #10b981, #6366f1);
}

/* =========================
   LIGHT THEME
========================= */

body.light-theme {

    --bg-primary: #ffffff;
    --bg-secondary: #f7f8fb;
    --bg-card: #ffffff;
    --bg-card-alt: #f8fafc;
    --bg-box: #eef2f7;
    --bg-menu: #fff;
    --bg-base: #fff;
    --bg-surface: #fff;

    --text-heading: #111827;
    --text-primary: #374151;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-meta: #6b7280;
    --text-grey: #5A5A72;

    --border-light: rgba(0, 0, 0, .08);
    --border-medium: rgba(0, 0, 0, .06);
    --border-soft: rgba(0, 0, 0, .05);

    --left-glow-1: rgba(124, 58, 237, .15);
    --left-glow-2: rgba(124, 58, 237, .08);

    --right-glow-1: rgba(249, 115, 22, .12);
    --right-glow-2: rgba(249, 115, 22, .06);
}