@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-ext-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-latin-ext-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

:root {
    color-scheme: dark;

    --color-bg: #111111;
    --color-black: #050505;
    --color-black-pure: #000000;
    --color-surface: #171619;
    --color-surface-2: #1a1a1a;
    --color-surface-3: #282828;
    --color-white: #ffffff;
    --color-text: #b5b5b5;
    --color-text-strong: #e3e3e3;
    --color-muted: #838383;
    --color-accent: #65ddff;
    --color-accent-strong: #5574ff;
    --color-accent-ink: #031115;
    --color-line: rgba(255, 255, 255, 0.12);
    --color-accent-line: rgba(101, 221, 255, 0.42);

    --font-display: "Inter", Arial, sans-serif;
    --font-body: "Inter", Arial, sans-serif;

    --container-content: 1300px;
    --container-header: 1410px;
    --container-footer: 1150px;

    --space-1: 5px;
    --space-2: 10px;
    --space-3: 15px;
    --space-4: 20px;
    --space-5: 30px;
    --space-6: 40px;
    --space-7: 60px;
    --space-8: 90px;
    --space-9: 140px;

    --radius-card: 20px;
    --radius-team: 30px;
    --radius-header: 50px;
    --radius-pill: 100px;

    --ease-brand: cubic-bezier(0.55, 0.085, 0, 0.99);
    --ease-standard: ease-in-out;

    --z-background: -2;
    --z-ambient: -1;
    --z-content: 1;
    --z-creative: 2;
    --z-hero-ui: 3;
    --z-header: 50;
    --z-menu: 60;
    --z-cursor: 100;
}