/* surf-next-web shared stylesheet.
 *
 * Served (embedded, via rust-embed) at /static/app.css and linked from
 * templates/base.html. Styles every page that extends base.html: the home
 * landing (/), the docs list + viewer (/docs, /docs/{slug}), and the not-found
 * page. The /access page is intentionally self-contained (its own inline
 * light-mode styles) and does NOT use this file.
 *
 * Palette + radii follow the Surf Style Guide v1: a single blue accent
 * (#2563eb), sharp 2px radii, light surfaces. No teal/amber, no pill curves.
 */

:root {
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --bg-tint: #eff6ff;
    --text: #0f172a;
    --text-secondary: #334155;
    --text-muted: #5b6b7d;
    --border: #e2e8f0;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --danger: #b91c1c;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    /* Previously only var() fallbacks existed for these three — defining them
       here lets the dark block below retheme every consumer (surf.css board
       cards, settings/downloads inline styles). Values = the old fallbacks. */
    --card-bg: #ffffff;
    --hover-bg: rgba(0, 0, 0, 0.02);
    --active-bg: rgba(59, 130, 246, 0.08);
    /* This file is linked AFTER tokens.css in app_base.html, so a literal
       here silently beat the canonical scale's `--radius` alias and froze
       every consumer (buttons, badges, cards, inputs, <pre>) at the retired
       sharp value. Resolve through the scale instead; the fallback covers
       any surface that somehow loads app.css without tokens.css. */
    --radius: var(--surf-radius-md, 6px);
    --maxw: 74rem;
    --readw: 46rem;
}

/* Dark theme — mirrors the shell's pure-black palette (surf-shell.css §1:
   #000 page, #0a0a0a sheet, #161616 soft, #262626 line, neutral gray text).
   In-shell pages (app_base.html) consume these legacy vars via surf.css and
   inline styles; without this block they froze at the light values above.
   The public landing (base.html) never sets data-theme, so it stays light. */
[data-theme="dark"] {
    --bg: #000000;
    --bg-soft: #0a0a0a;
    --bg-tint: rgba(37, 99, 235, 0.12);
    --text: #fafafa;
    --text-secondary: #a3a3a3;
    --text-muted: #8a8a8a;
    --border: #262626;
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.12);
    --danger-border: #7f1d1d;
    --card-bg: #0a0a0a;
    --hover-bg: #161616;
    --active-bg: rgba(37, 99, 235, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    /* Type canon (W-C 2026-07-29): Inter for body/UI text — headings get
       Surf Display Black in surf-shell.css. tokens.css loads first and
       carries the @font-face declarations. */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
/* The blanket `a:hover { text-decoration: underline }` that used to sit here
   was the source of hover underlines across every Surfspace surface (this file
   is the only stylesheet loaded by BOTH base.html and app/app_base.html).
   Removed 2026-07-24. The standing replacement — including the
   `:not(:focus-visible)` accessibility guard — lives in the base/reset layer at
   the top of static/css/surf.css. Do not reintroduce a bare `a:hover`
   underline here; scope deliberate underlines to a class instead. */
h1, h2, h3 { letter-spacing: -0.02em; }

/* ---------- Site header / session-aware nav ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.site-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.875rem 1.25rem;
    max-width: var(--maxw); margin: 0 auto;
}
.brand {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--text);
}
.brand:hover { text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 0.35rem; }
.nav-link { color: var(--text-secondary); padding: 0.5rem 0.6rem; font-size: 0.875rem; font-weight: 600; }
.nav-link:hover { color: var(--text); text-decoration: none; }
.btn {
    display: inline-block; padding: 0.5rem 0.875rem;
    font-size: 0.875rem; font-weight: 600; border-radius: var(--radius);
    line-height: 1; border: 1px solid transparent; cursor: pointer;
    font-family: inherit;
}
.btn-ghost { color: var(--text-secondary); background: none; }
.btn-ghost:hover { color: var(--text); text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); text-decoration: none; color: #fff; }

/* ---------- Landing hero ---------- */
.landing-hero {
    max-width: var(--maxw); margin: 0 auto;
    padding: 4.5rem 1.25rem 3rem; text-align: center;
}
.eyebrow {
    display: inline-block; font-size: 0.8125rem; font-weight: 700;
    color: var(--primary); background: var(--bg-tint); border: 1px solid #dbeafe;
    padding: 0.3rem 0.75rem; border-radius: var(--radius); margin: 0 0 1.25rem;
}
.hero-title {
    font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800;
    margin: 0 0 1rem; line-height: 1.08;
}
.hero-sub {
    font-size: clamp(1.0625rem, 2.2vw, 1.25rem); color: var(--text-secondary);
    max-width: 40rem; margin: 0 auto 2rem;
}
.hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.btn-lg { padding: 0.75rem 1.4rem; font-size: 1rem; }

/* ---------- Primitives / IA grid ---------- */
.primitives {
    max-width: var(--maxw); margin: 0 auto; padding: 1rem 1.25rem 4rem;
}
.primitives-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 860px) { .primitives-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .primitives-grid { grid-template-columns: 1fr; } }
.primitive {
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.25rem;
}
.primitive h3 { margin: 0 0 0.4rem; font-size: 1.0625rem; }
.primitive p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; }

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 2rem 1.25rem; text-align: center;
    color: var(--text-muted); font-size: 0.8125rem;
}

/* ---------- Docs list ---------- */
.docs-list { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.docs-list-header h1 { margin: 0 0 1.5rem; font-size: 1.75rem; }
.docs-empty { color: var(--text-muted); }
.docs-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.docs-card {
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.docs-card:hover { border-color: var(--primary); }
.docs-card-link { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; }
.docs-card-link:hover { text-decoration: none; }
.docs-card-title { font-weight: 700; color: var(--text); font-size: 1.0625rem; }
.docs-card-meta { color: var(--text-muted); font-size: 0.8125rem; }

/* ---------- Doc viewer ---------- */
.doc-view { max-width: var(--readw); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.doc-view-header { margin-bottom: 2rem; }
.doc-view-header h1 { margin: 0 0 0.5rem; font-size: 2rem; }
.doc-view-meta { color: var(--text-muted); font-size: 0.8125rem; }
.doc-back { display: inline-block; margin-bottom: 1.5rem; font-size: 0.875rem; }
.doc-body { font-size: 1.0625rem; }
.doc-body h1, .doc-body h2, .doc-body h3 { margin-top: 2rem; }
.doc-body pre {
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem; overflow-x: auto;
}
.doc-body code { font-size: 0.9em; }
.doc-body img { max-width: 100%; height: auto; }

/* ---------- Not found ---------- */
.not-found { max-width: var(--readw); margin: 0 auto; padding: 4rem 1.25rem; text-align: center; }
.not-found h1 { font-size: 2rem; margin: 0 0 0.75rem; }
.not-found p { color: var(--text-muted); }