@import url('https://fonts.googleapis.com/css2?family=General+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root,
:root[data-theme='dark'] {
    --bg-main: #0c1116;
    --bg-muted: #151c25;
    --surface: rgba(17, 23, 32, 0.8);
    --surface-strong: rgba(18, 25, 35, 0.94);
    --surface-hover: rgba(24, 32, 43, 0.98);
    --border: rgba(154, 171, 196, 0.16);
    --border-strong: rgba(154, 171, 196, 0.28);
    --text-main: #eef3f8;
    --text-secondary: #bdc8d8;
    --text-muted: #8190a5;
    --accent: #79baff;
    --accent-strong: #3d97ff;
    --accent-soft: rgba(121, 186, 255, 0.14);
    --accent-2: #ffb08f;
    --accent-2-soft: rgba(255, 176, 143, 0.16);
    --success-soft: rgba(133, 221, 182, 0.16);
    --success: #85ddb6;
    --shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
    --grid-line: rgba(128, 172, 221, 0.05);
    --hero-glow-a: rgba(61, 151, 255, 0.12);
    --hero-glow-b: rgba(255, 176, 143, 0.08);
    --gradient-main: linear-gradient(135deg, #79baff 0%, #ffb08f 100%);
    --button-text: #08111a;
}

:root[data-theme='light'] {
    --bg-main: #f3efe7;
    --bg-muted: #fbf7f0;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-strong: rgba(255, 255, 255, 0.94);
    --surface-hover: rgba(255, 255, 255, 1);
    --border: rgba(43, 63, 89, 0.14);
    --border-strong: rgba(43, 63, 89, 0.26);
    --text-main: #182334;
    --text-secondary: #3c4d64;
    --text-muted: #6e7a8d;
    --accent: #216fbe;
    --accent-strong: #0d5ea9;
    --accent-soft: rgba(33, 111, 190, 0.12);
    --accent-2: #c76f50;
    --accent-2-soft: rgba(199, 111, 80, 0.13);
    --success-soft: rgba(79, 165, 126, 0.12);
    --success: #2f9066;
    --shadow: 0 16px 42px rgba(49, 58, 79, 0.1);
    --grid-line: rgba(74, 107, 158, 0.05);
    --hero-glow-a: rgba(33, 111, 190, 0.08);
    --hero-glow-b: rgba(199, 111, 80, 0.06);
    --gradient-main: linear-gradient(135deg, #216fbe 0%, #c76f50 100%);
    --button-text: #ffffff;
}

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

html {
    color-scheme: dark light;
    scroll-behavior: smooth;
}

body {
    font-family: 'General Sans', sans-serif;
    background:
        radial-gradient(circle at 12% 12%, var(--hero-glow-a) 0%, transparent 26%),
        radial-gradient(circle at 88% 18%, var(--hero-glow-b) 0%, transparent 24%),
        linear-gradient(180deg, var(--bg-main) 0%, var(--bg-muted) 100%);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background 0.35s ease, color 0.35s ease;
}

.page-bg,
.page-noise {
    pointer-events: none;
    position: fixed;
    inset: 0;
}

.page-bg {
    z-index: 0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.65), transparent 92%);
}

.page-noise {
    z-index: 1;
    opacity: 0.025;
    background-image: radial-gradient(circle at 1px 1px, var(--text-main) 1px, transparent 0);
    background-size: 4px 4px;
}

a,
button {
    font: inherit;
}