/* ==========================================================
   DESIGN TOKENS
========================================================== */

:root {
    --color-background: #020711;
    --color-background-soft: #06111f;
    --color-panel: #08182b;
    --color-panel-strong: #0b2039;
    --color-blue: #0b6cff;
    --color-blue-light: #31a8ff;
    --color-gold: #f5c242;
    --color-white: #ffffff;
    --color-text: #f7f9ff;
    --color-muted: #aebbd0;
    --color-border: #173a64;

    --font-display: "Anton", sans-serif;
    --font-heading: "Barlow Condensed", sans-serif;
    --font-body: "Inter", sans-serif;

    --shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.28);
    --radius-small: 0.45rem;
    --radius-medium: 0.8rem;
    --radius-large: 1.2rem;
}

/* ==========================================================
   RESET
========================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(circle at 75% 4%, rgba(0, 92, 220, 0.32), transparent 34rem),
        var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

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

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    line-height: 1.05;
}

p:last-child {
    margin-bottom: 0;
}

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 999;
    transform: translateY(-200%);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-small);
    background: var(--color-white);
    color: #111111;
    font-weight: 700;
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 3px;
}

.muted {
    color: var(--color-muted);
}