/* ============================================================================
 * SlowBooks Pro — Base Styles
 * Reset, typography, layout primitives. Design direction from tokens.css;
 * this file only arranges.
 * ============================================================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-modern);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--content-bg);
    font-feature-settings: "cv02", "cv03", "cv11", "ss01";
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--qb-navy-mid); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--qb-blue-accent); }

::selection { background: var(--qb-navy); color: var(--qb-gold-light); }

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-modern);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--ink);
    text-wrap: balance;
}

h1 { font-size: var(--text-6xl); letter-spacing: -0.035em; font-weight: 900; line-height: 0.98; }
h2 { font-size: var(--text-5xl); letter-spacing: -0.028em; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.1em; }

p  { font-size: var(--text-lg); color: var(--text-secondary); text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

code, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
    font-feature-settings: "zero", "ss01";
}

code {
    padding: 0.12em 0.4em;
    color: var(--qb-navy-mid);
    background: rgba(0, 51, 102, 0.07);
    border-radius: var(--radius-sm);
}

pre  { padding: var(--sp-5); overflow-x: auto; line-height: 1.55; border-radius: var(--radius-sm); }
pre code { background: transparent; padding: 0; color: inherit; font-size: var(--text-sm); }

small { font-size: var(--text-sm); color: var(--text-muted); }
strong { font-weight: 700; color: var(--ink); }

/* ---------- Layout primitives ---------- */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sp-6);
}

.container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--sp-6);
}

section {
    padding: var(--sp-16) 0;
    position: relative;
}

/* Section background variants */
section.panel-bg     { background: var(--panel-bg); }
section.paper-bg     { background: var(--invoice-bg); }
section.navy-bg      {
    background:
        linear-gradient(180deg, var(--qb-navy) 0%, var(--qb-navy-dark) 100%);
    color: white;
}
section.navy-bg h1,
section.navy-bg h2,
section.navy-bg h3,
section.navy-bg h4 { color: white; }
section.navy-bg p  { color: var(--text-on-navy); }

@media (max-width: 900px) {
    section { padding: var(--sp-12) 0; }
}

/* ---------- Utilities ---------- */

.eyebrow {
    font-family: var(--font-retro);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--qb-gold);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: var(--qb-gold);
    display: inline-block;
}

.eyebrow--on-navy { color: var(--qb-gold-light); }
.eyebrow--on-navy::before { background: var(--qb-gold-light); }

.lede {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 42rem;
}
.lede--center { margin-left: auto; margin-right: auto; text-align: center; }

.mono-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--qb-blue-light);
    font-weight: 500;
}

.text-center { text-align: center; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}