:root {
    --color-bg: #080b12;
    --color-surface: #10151f;
    --color-text: #f8fafc;
    --color-muted: #94a3b8;
    --color-blue: #3b82f6;
    --color-blue-light: #60a5fa;
    --color-border: rgba(255, 255, 255, 0.1);

    --container: 1280px;

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 96px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --heading-xl: clamp(48px, 5.5vw, 82px);
    --heading-lg: clamp(38px, 4vw, 60px);
    --heading-md: clamp(28px, 3vw, 42px);
    --heading-sm: clamp(22px, 2vw, 30px);

    --weight-medium: 500;
    --weight-semibold: 600;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: var(--color-blue);
    color: white;
}

.container {
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
}