/*
 * What every page shares: the theme's colours, and the header and footer
 * (src/pages/shell.tsx). The landing page adds landing.css; the guides, the
 * workflow pages and the uninstall page add the Tailwind build (app.css), whose
 * night/fg/mist colours read these variables (tailwind.config.js).
 *
 * Light and dark follow the system, or the header's switch, which shell.js
 * remembers and sets as data-theme on <html> before the page draws.
 */

/* Colours as channels, so Tailwind's opacity works: rgb(var(--fg) / .3) */
:root {
  --page: 251 251 249; --raised: 255 255 255; --card: 255 255 255; --sunk: 241 241 237;
  --fg: 22 24 29; --fg-2: 74 79 89; --muted: 111 116 128; --faint: 150 155 165;
  --line: #e7e7e3; --line-2: #dcdcd7;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --page: 11 12 14; --raised: 17 18 21; --card: 20 21 24; --sunk: 7 8 10;
  --fg: 238 240 243; --fg-2: 185 189 198; --muted: 138 143 152; --faint: 95 99 107;
  --line: #22242a; --line-2: #2c2f36;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: 11 12 14; --raised: 17 18 21; --card: 20 21 24; --sunk: 7 8 10;
    --fg: 238 240 243; --fg-2: 185 189 198; --muted: 138 143 152; --faint: 95 99 107;
    --line: #22242a; --line-2: #2c2f36;
    color-scheme: dark;
  }
}
/* The same colours by name, for plain CSS (landing.css uses these too) */
:root {
  --bg: rgb(var(--page)); --ink: rgb(var(--fg)); --ink-2: rgb(var(--fg-2)); --shell-muted: rgb(var(--muted));
  --btn: rgb(var(--fg)); --btn-ink: rgb(var(--page));
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { background: var(--bg); }

.wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }

/* ---------- The header ---------- */
nav.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; font-family: var(--font); color: var(--ink); }
nav.top.scrolled { border-bottom-color: var(--line); }
nav.top .wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 16px; text-decoration: none; letter-spacing: -.01em; color: inherit; }
.brand svg { display: block; width: 22px; height: 22px; }
.links { display: flex; gap: 22px; font-size: 14px; color: var(--ink-2); margin-left: 8px; }
.links a { text-decoration: none; color: inherit; }
.links a:hover, .links a[aria-current="page"] { color: var(--ink); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.signin { font-size: 14px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.signin:hover { color: var(--ink); }
.theme-btn { width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.theme-btn:hover { color: var(--ink); }
.theme-btn svg { display: block; width: 16px; height: 16px; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: transform .15s ease; }
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta svg { display: block; width: 15px; height: 15px; }

/* ---------- The footer ---------- */
footer.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; font: 13.5px/1.5 var(--font); color: var(--shell-muted); }
footer.foot .wrap { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; }
footer.foot a { text-decoration: none; color: inherit; }
footer.foot a:hover { color: var(--ink); }
footer.foot .brand { color: var(--ink); }
footer.foot .grow { flex: 1; }
footer.foot .tagline, footer.foot .copy { width: 100%; font-size: 12.5px; margin: 0; }
footer.foot .tagline { color: var(--ink-2); margin-top: 6px; }

/* ---------- Few (few-mount.js): a still that becomes the animated fox ---------- */
.few-face { display: block; aspect-ratio: 322 / 338; margin: 0 auto; }
.few-face img, .few-face canvas { display: block; width: 100%; height: 100%; border-radius: 9.3% / 8.9%; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45); }
.few-face.sm { width: 72px; }
.few-face.md { width: 104px; }
.few-face.lg { width: 148px; }

@media (max-width: 900px) {
  .links { display: none; }
}
@media (max-width: 520px) {
  .signin { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  nav.top, .nav-cta { transition: none; }
}