:root {
    /* Cosmic palette */
    --cosmic-black: #03050e;
    --midnight-navy: #0a1128;
    --deep-space: #0d1b3a;
    --electric-cyan: #00e5ff;
    --ice-blue: #7fe7ff;
    --ultraviolet: #8b5cf6;
    --nebula-purple: #a855f7;
    --magenta: #e879f9;
    --warm-gold: #fbbf24;

    /* Text */
    --text-primary: #e8eefc;
    --text-secondary: #9aacce;
    --text-muted: #5c6b8a;

    /* Surfaces */
    --glass-bg: rgba(10, 17, 40, 0.55);
    --glass-bg-heavy: rgba(6, 11, 28, 0.78);
    --glass-border: rgba(127, 231, 255, 0.16);
    --glass-border-hover: rgba(127, 231, 255, 0.42);

    /* Glow */
    --glow-cyan: rgba(0, 229, 255, 0.45);
    --glow-purple: rgba(168, 85, 247, 0.4);

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 7rem;

    /* Timing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 180ms;
    --t-med: 380ms;
    --t-slow: 700ms;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Fonts */
    --font-body: 'Inter', sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--cosmic-black);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
}

a {
    color: var(--electric-cyan);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover {
    color: var(--ice-blue);
}

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

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--cosmic-black);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--electric-cyan), var(--ultraviolet));
    border-radius: 10px;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 10000;
    background: var(--electric-cyan);
    color: var(--cosmic-black);
    padding: 1rem 2rem;
    font-weight: 700;
}

.skip-link:focus {
    left: 0;
}