/* =============================================================
 * SynthRadio — Base Reset & Typography
 * Loads AFTER variables.css.
 * ============================================================= */

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

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, button, abbr, address, cite, code, em, img, small, strong, sub, sup,
b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, section, summary,
time, mark, audio, video, input, textarea, select {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family: var(--sr-font);
    font-size: var(--sr-fs-base);
    line-height: var(--sr-lh-base);
    color: var(--sr-text);
    background-color: var(--sr-black);
    background-image:
        radial-gradient(1200px 800px at 85% -10%, rgba(0, 102, 255, 0.10), transparent 60%),
        radial-gradient(1000px 700px at -10% 20%, rgba(199, 21, 133, 0.08), transparent 55%),
        linear-gradient(180deg, var(--sr-black) 0%, var(--sr-bg-2) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,172,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,172,255,0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

::selection {
    background: rgba(0, 172, 255, 0.35);
    color: var(--sr-text);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: var(--sr-lh-tight);
    letter-spacing: -0.01em;
    color: var(--sr-text);
}

h1 { font-size: var(--sr-fs-3xl); }
h2 { font-size: var(--sr-fs-2xl); }
h3 { font-size: var(--sr-fs-xl); }
h4 { font-size: var(--sr-fs-lg); }
h5 { font-size: var(--sr-fs-md); }
h6 { font-size: var(--sr-fs-base); }

p { color: var(--sr-text); line-height: var(--sr-lh-base); }

small, .muted {
    color: var(--sr-muted);
    font-size: var(--sr-fs-sm);
}

a {
    color: var(--sr-electric);
    text-decoration: none;
    transition: color var(--sr-transition);
}

a:hover { color: var(--sr-cyan); }

strong { font-weight: 700; }
em { font-style: italic; }
code {
    font-family: var(--sr-font-mono);
    font-size: 0.9em;
    background: var(--sr-panel-2);
    padding: 2px 6px;
    border-radius: var(--sr-radius-sm);
    border: 1px solid var(--sr-border);
}

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sr-border-strong), transparent);
    margin: var(--sr-space-8) 0;
}

img, svg, video { max-width: 100%; display: block; }
button { cursor: pointer; background: none; color: inherit; font-family: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

:focus-visible {
    outline: 2px solid var(--sr-electric);
    outline-offset: 3px;
    border-radius: var(--sr-radius-sm);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sr-bg-2); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--sr-panel-2), var(--sr-blue-2));
    border-radius: var(--sr-radius-round);
    border: 2px solid var(--sr-bg-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--sr-electric); }