/* theme.css — the site-wide dark look, split out of landing.css on
   2026-09-21 so every page shares the home page's palette and chrome.
   Every rule is scoped under body.themed (each page's <body> carries the
   class; index.html carries "landing themed"). Load order on every page:
   site.css, then theme.css, then any page-only sheet (landing.css,
   admin.css). site.css is token-driven, so most of the work here is
   re-pointing its design tokens; the rest is the chrome (header, nav,
   footer, buttons, inputs) the landing draft restyled. No inline styles,
   no external fonts: the CSP is style-src 'self' / font-src 'self'. */

body.themed {
  /* landing palette */
  --bg2: #0b1f21;
  --panel: #10282b;
  --panel2: #0d2224;
  --text: #f6fbfb;
  --muted: #a9c0c2;
  --teal: #259091;
  --teal2: #36b9ba;
  --orange: #fd7414;
  --orange2: #ff9b57;
  --shadow: 0 28px 80px rgba(0,0,0,.42);

  /* site.css tokens, re-pointed to the dark palette (same in light and
     dark colour schemes — the theme is always dark) */
  --bg: #071517; --bg-elev: #10282b; --bg-sunken: #061214; --bg-ink: #0d1719;
  --ink: #f6fbfb; --ink-2: #a9c0c2; --ink-3: #91abad;
  --ink-on-dark: #f6fbfb; --ink-2-on-dark: #a9c0c2;
  --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.22);
  --accent: #36b9ba; --accent-hov: #5ad0d1; --accent-ink: #04231f;
  --accent-soft: #0f2726; --accent-line: #235049; --focus: #36b9ba;
  /* light salmon: 9:1 on the dark background at body size */
  --danger: #ff9a8a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 12px 28px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 4px 10px rgba(0,0,0,.4), 0 28px 60px -24px rgba(0,0,0,.8);
  --radius: 18px;
  --radius-sm: 11px;
  --radius-lg: 24px;
  /* one sans face for headings and body, like the home page */
  --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: clip;
}

/* --- base ---------------------------------------------------------------- */
body.themed {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 80% -8%, rgba(37,144,145,.26), transparent 60%),
    radial-gradient(650px 420px at 5% 25%, rgba(253,116,20,.10), transparent 62%),
    linear-gradient(180deg,#061214 0%,#08191b 45%,#061214 100%);
  line-height: 1.55;
}
body.themed h1, body.themed h2, body.themed h3, body.themed h4 { font-family: inherit; color: inherit; }
body.themed h1, body.themed h2 { letter-spacing: -0.035em; font-weight: 800; line-height: 1.04; }
body.themed h3 { font-weight: 750; letter-spacing: -0.02em; }
body.themed h4 { font-weight: 700; }
body.themed .brand { font-family: inherit; font-weight: 800; }
body.themed .brand-mark { border-radius: 9px; }

/* --- buttons ------------------------------------------------------------- */
body.themed .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 13px; padding: 13px 19px; font-weight: 800; border: 1px solid transparent; transition: .2s ease; cursor: pointer; }
body.themed .btn-primary { background: linear-gradient(135deg,var(--orange),#ff8a38); color: #1d0d02; box-shadow: 0 10px 30px rgba(253,116,20,.24); }
body.themed .btn-primary:hover { background: linear-gradient(135deg,var(--orange),#ff8a38); color: #1d0d02; transform: translateY(-2px); box-shadow: 0 16px 38px rgba(253,116,20,.30); }
body.themed .btn-secondary, body.themed .btn-ghost { background: rgba(255,255,255,.055); border-color: var(--line-strong); color: var(--text); }
body.themed .btn-secondary:hover, body.themed .btn-ghost:hover { background: rgba(255,255,255,.09); border-color: var(--accent); color: var(--text); }
body.themed .btn-tiny { padding: 0.3rem 0.7rem; border-radius: 9px; font-weight: 700; }
body.themed .btn-danger { color: #14181b; }

/* --- header, nav, mobile menu ------------------------------------------- */
body.themed .site-header { background: rgba(7,21,23,.86); }
body.themed .nav-menu a:not(.btn) { color: var(--muted); }
body.themed .nav-menu a:not(.btn):hover { color: var(--text); }
body.themed .nav-menu a:not(.btn)[aria-current="page"] { color: var(--text); }
body.themed .nav-menu .btn { padding: 9px 15px; font-size: 14px; }
body.themed .nav-toggle { color: var(--text); }

/* --- links in body text -------------------------------------------------- */
body.themed main a:not(.btn) { color: var(--teal2); text-decoration: underline; text-underline-offset: 0.2em; }
body.themed main a:not(.btn):hover { color: var(--accent-hov); }

/* --- forms --------------------------------------------------------------- */
body.themed .input { background: rgba(255,255,255,.04); border-color: var(--line-strong); color: var(--text); }
body.themed .input::placeholder { color: var(--ink-3); opacity: 1; }
body.themed .input:hover:not(:disabled) { border-color: rgba(255,255,255,.34); }
body.themed .input:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
body.themed .input:disabled { background: rgba(255,255,255,.02); }
body.themed .note-draft { border-left-color: #d6a83c; }

/* --- footer -------------------------------------------------------------- */
body.themed .site-footer { background: #061214; }
body.themed .footer-col a { color: var(--muted); }
body.themed .footer-col a:hover { color: var(--text); }