/* Yes No Levels shared tokens + site header. Loaded by index.html and help.html.
   Page-specific layout stays in each page's own <style>; this file holds only what every page shares,
   so a page that loads it gains the tokens and the header and nothing else. */

:root {
    --bg: #0a0a0a;
    --surface: #121212;
    --surface-2: #1a1a1a;
    --border: #2a2a2a;
    --hairline: rgba(255, 255, 255, 0.08);

    /* The accent is the "yes" blue of the wordmark; "no" is the orange. */
    --accent: #32AFFF;
    --accent-dim: rgba(50, 175, 255, 0.12);
    --no: #F5871F;
    /* --gold kept as an alias for one release (it was always the blue, misnamed). Remove after 2026-10-25. */
    --gold: var(--accent);
    --gold-dim: var(--accent-dim);

    --text: #e5e5e5;
    --muted: #9a9a9a;
    --white: #fafafa;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Type scale, fluid between a 390 px phone and a 1280 px desktop. Body never drops under 16 px. */
    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --step-1: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
    --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
    --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
    --step-4: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem);

    --gutter: 16px;
    --maxw: 1120px;
    --radius: 16px;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* Shared header. Same markup on every page that loads this file:
   <header><nav><a class="nav-wordmark">…</a><div class="nav-links">…</div></nav></header> */
body > header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10, 10, 10, 0.78);
    -webkit-backdrop-filter: saturate(140%) blur(18px); backdrop-filter: saturate(140%) blur(18px);
    border-bottom: 1px solid var(--hairline);
}
body > header nav {
    max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); height: 60px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
body > header .nav-wordmark {
    font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
    text-decoration: none; white-space: nowrap;
}
body > header .nav-links { display: flex; gap: 18px; align-items: center; }
body > header .nav-link {
    font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--muted);
    text-decoration: none; transition: color 0.2s;
}
body > header .nav-link:hover { color: var(--white); text-decoration: none; }
body > header .nav-cta {
    font-family: var(--sans); font-size: 14px; font-weight: 600; white-space: nowrap;
    padding: 8px 14px; border-radius: 999px; text-decoration: none;
    background: var(--white); color: var(--bg); transition: opacity 0.2s;
}
body > header .nav-cta:hover { opacity: 0.86; text-decoration: none; }
@media (max-width: 420px) {
    body > header nav { gap: 8px; }
    body > header .nav-wordmark { font-size: 14px; letter-spacing: 0; }
    body > header .nav-links { gap: 12px; }
    body > header .nav-link, body > header .nav-cta { font-size: 13px; }
    body > header .nav-cta { padding: 7px 12px; }
}

/* Wordmark colours: yes = blue, no = orange, Levels = white. */
.w-yes { color: var(--accent) !important; }
.w-no { color: var(--no) !important; }
.w-lvl { color: var(--white) !important; }