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

:root {

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

    --bg-primary: #0a0e14;
    --bg-secondary: #0f1420;

    --text-primary: #f1f3f6;
    --text-secondary: #8b95a8;
    --text-muted: #5a6478;

    --accent: #4a7cff;
    --accent-hover: #6591ff;
    --accent-soft: #1a2942;

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

    --white: #ffffff;
    --black: #000000;

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

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

    --font-heading: "Playfair Display", serif;
    --font-body: "Inter", sans-serif;

    /* Font Sizes */

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.25rem;
    --fs-lg: 1.75rem;
    --fs-xl: 2.5rem;
    --fs-2xl: 3.5rem;
    --fs-3xl: 4.5rem;

    /* Font Weight */

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    --letter-spacing: .06em;

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

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;

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

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-round: 999px;

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

    --shadow-soft:
        0 10px 30px rgba(0,0,0,.18);

    --shadow-lg:
        0 30px 60px rgba(0,0,0,.28);

    --shadow-lg: 0 25px 70px rgba(0,0,0,.35);

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

    --container-width: 1200px;

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

    --section-padding: 96px;

    /* ===========================
       NAVIGATION
    =========================== */

    --nav-height: 88px;
    --nav-height-scrolled: 64px;

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

    --transition-fast: .2s cubic-bezier(.16,1,.3,1);
    --transition: .3s cubic-bezier(.16,1,.3,1);
    --transition-medium: .5s cubic-bezier(.16,1,.3,1);
    --transition-slow: .7s cubic-bezier(.16,1,.3,1);

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

    --z-loader: 99999;
    --z-cursor: 9999;
    --z-progress: 9998;
    --z-nav: 999;
    --z-chatbot: 998;
    --z-command: 997;
}

/* ==========================================================
   SELECTION
========================================================== */

::selection {

    background: var(--accent);
    color: var(--white);

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: var(--bg-primary);

}

::-webkit-scrollbar-thumb {

    background: var(--accent-soft);
    border-radius: var(--radius-round);

}

::-webkit-scrollbar-thumb:hover {

    background: var(--accent);

}