:root {

    /* ===========================
       Colors
    =========================== */

    --bg: #070B14;
    --bg-secondary: #0D1422;
    --surface: rgba(20,30,48,.72);
    --surface-hover: rgba(28,40,62,.85);

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

    --primary: #31D7FF;
    --primary-dark: #178DFF;

    --success: #42F59E;
    --warning: #FFB84D;
    --danger: #FF5A76;

    --text: #F5F7FB;
    --text-secondary: #A8B8CE;
    --text-muted: #73839B;

    /* ===========================
       Typography
    =========================== */

    --font: "Inter", sans-serif;

    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 20px;
    --font-xl: 28px;
    --font-xxl: 40px;

    /* ===========================
       Layout
    =========================== */

    --container: 1440px;

    --header-height: 74px;

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 28px;

    --gap-xs: 8px;
    --gap-sm: 16px;
    --gap: 24px;
    --gap-lg: 40px;

    /* ===========================
       Effects
    =========================== */

    --blur: blur(22px);

    --shadow:

        0 0 60px rgba(49,215,255,.08);

    --transition: .25s ease;

}