/* assets/css/02-base.css */
/* Global element styles and typography ---- */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

html { font-size: 16px; }

body {
    font-family:      var(--font-body);
    font-weight:      400;
    background-color: var(--bg-deep);
    color:            var(--fg-primary);
    overflow-x:       hidden;
}

h1, h2, h3, h4, h5 {
    font-family:  var(--font-display);
    font-weight:  800;
    line-height:  1.1;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; font-weight: 700; }

p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--fg-secondary);
}

code, pre {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

::selection {
    background: var(--teal-glow);
    color: var(--fg-primary);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--border-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }