:root {
    --bg: #0d0b1a;
    --surface: #16132b;
    --border: #2e2750;
    --text: #e6e1ff;
    --text-muted: #9a93c4;
    --accent: #ff2e88;
    --accent-2: #22e5ff;
    --glow: 0 0 0.35em rgb(255 46 136 / 0.6), 0 0 1.2em rgb(255 46 136 / 0.35);
    --glow-2: 0 0 0.35em rgb(34 229 255 / 0.55), 0 0 1.2em rgb(34 229 255 / 0.3);

    /* Legacy aliases */
    --primary-bg-color: var(--bg);
    --secondary-bg-color: var(--surface);
    --primary-text-color: var(--text);
    --secondary-text-color: var(--accent);

    color-scheme: dark;
}

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

html {
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgb(255 46 136 / 0.14), transparent 70%),
        linear-gradient(rgb(46 39 80 / 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgb(46 39 80 / 0.35) 1px, transparent 1px);
    background-size: 100% 100%, 48px 48px, 48px 48px;
    overflow-x: hidden;
}

/* CRT scanlines */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 2px,
        rgb(0 0 0 / 0.18) 3px
    );
    z-index: 100;
}

main {
    padding-bottom: clamp(48px, 8vw, 120px);
}

a {
    color: var(--accent-2);
    text-decoration: none;
    transition: color 0.15s, text-shadow 0.15s;
}

a:hover {
    color: var(--accent);
    text-shadow: var(--glow);
}

::selection {
    background: var(--accent);
    color: var(--bg);
}