:root {
    --font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --color-primary: #6ea8ff;
    --color-secondary: #8a7dff;
    --color-accent: #6ff2d4;
    --color-background: #08111f;
    --color-background-alt: #0d1830;
    --color-surface: rgba(13, 24, 48, 0.78);
    --color-surface-strong: #11203d;
    --color-border: rgba(168, 194, 255, 0.16);
    --color-text: #f5f7ff;
    --color-text-muted: #a8b6d8;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-error: #fb7185;
    --shadow-soft: 0 24px 80px rgba(3, 8, 20, 0.38);
    --radius-xl: 28px;
    --radius-pill: 999px;
    --transition-base: 220ms;
    --site-max-width: 1200px;
    --section-space: clamp(4.5rem, 8vw, 8rem);
    --container-gutter: clamp(1.25rem, 2vw, 2rem);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--color-text);
    background:
        radial-gradient(circle at top left, rgba(110, 168, 255, 0.18), transparent 30%),
        radial-gradient(circle at top right, rgba(138, 125, 255, 0.18), transparent 34%),
        linear-gradient(180deg, #08111f 0%, #091425 38%, #070d18 100%);
    min-height: 100vh;
}

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

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

button,
input,
textarea {
    font: inherit;
}

button {
    color: inherit;
}