/* ==========================================================================
   AI Conversation Analyzer — Base & Typography
   ========================================================================== */

/* ===========================
   Reset & Base
   =========================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 20px);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

.container {
    width: min(var(--container), 92%);
    margin: 0 auto;
}

/* ===========================
   Typography
   =========================== */

h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -1.5px; font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -1px; font-weight: 700; }
h3 { font-size: 1.35rem; line-height: 1.3; font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 600; }

p { color: var(--text-secondary); line-height: 1.75; }

.text-muted { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-center { text-align: center; }
.text-sm { font-size: 0.9rem; }
.text-mono { font-family: var(--font-mono); }
.font-medium { font-weight: 500; }

/* ===========================
   Scrollbar
   =========================== */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-dim); }