/* =========================================================
   VULTREX - BASE
   Global variables, reset and shared foundations
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    /* =====================================================
       VULTREX PREMIUM GAMING PALETTE
    ===================================================== */

    --bg: #000000;

    --bg-soft: #080A0E;

    --surface: #111318;

    --surface-hover: #171A21;

    --surface-alt: #0C0E13;


    /* PRIMARY */

    --primary: #3B5BDB;

    --primary-hover: #5573E6;

    --primary-soft: rgba(59, 91, 219, 0.10);

    --primary-border: rgba(59, 91, 219, 0.28);


    /* SECONDARY */

    --secondary: #00A8FF;

    --secondary-hover: #4CC2FF;

    --secondary-soft: rgba(141, 150, 165, 0.12);


    /* PREMIUM ACCENT */

    --accent: #FF7A00;

    --accent-hover: #FF963D;

    --gold: #FFD166;

    --gold-soft: rgba(255, 209, 102, 0.10);

    --accent-soft: rgba(0, 168, 255, 0.10);


    /* TEXT */

    --text: #F8FAFC;

    --text-muted: #8D96A5;

    --text-soft: #CBD5E1;


    /* BORDERS */

    --border: #252936;

    --border-soft: rgba(141, 150, 165, 0.13);


    /* STATUS */

    --success: #34D399;

    --warning: #00A8FF;

    --danger: #F87171;


    /* GRADIENT */

    --brand-gradient:
        linear-gradient(
            135deg,
            #3B5BDB 0%,
            #00A8FF 100%
        );


    /* SHADOWS */

    --shadow-sm:
        0 6px 20px rgba(0, 0, 0, 0.22);

    --shadow-md:
        0 14px 40px rgba(0, 0, 0, 0.30);

    --glow-primary:
        0 0 24px rgba(59, 91, 219, 0.12);


    /* =====================================================
       COMPATIBILITY WITH OLD CSS
    ===================================================== */

    --purple: #8D96A5;

    --purple-light: #3B5BDB;

    --purple-dark: #727C8D;


    /* =====================================================
       LEGACY / EXISTING COMPONENT COMPATIBILITY
    ===================================================== */

    --bg-main: var(--bg);

    --text-main: var(--text);

    --card-bg: var(--surface);

    --teal: var(--primary);

    --teal-soft: #67E8F9;

    --orange: var(--secondary);

    --orange-soft: #C1C8D2;

    --shadow: var(--shadow-md);
}


/* =========================================================
   GLOBAL RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    min-height: 100vh;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--bg-main);

    color:
        var(--text-main);

    overflow-x: hidden;
}


/* =========================================================
   GLOBAL ELEMENTS
========================================================= */

a {
    text-decoration: none;

    color: inherit;
}


button,
input,
textarea,
select {
    font: inherit;
}


img {
    max-width: 100%;
}


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

.container {
    width:
        min(1320px, calc(100% - 80px));

    margin:
        0 auto;
}