/* ==========================================================================
   Watchbot brand layer — loaded LAST on every page so the whole site matches
   the homepage: blue-black night, signal orange, Bricolage Grotesque.
   Page styles keep their layout; this file only owns colour + type.
   ========================================================================== */
:root{
  /* palette (homepage) */
  --wb-ink:#0F1626; --wb-ink-2:#172033; --wb-ink-3:#1E2940; --wb-line:#26314A;
  --wb-text:#E9ECF2; --wb-muted:#A3ADC2; --wb-faint:#7C879E;
  --wb-signal:#FF7A1A; --wb-on-signal:#1A0C02; --wb-alive:#3DDC97; --wb-amber:#F2B134; --wb-red:#F05D5E;
  --wb-sans:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wb-code:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* map every token name the older pages use onto the brand */
  --bg:var(--wb-ink); --ink:var(--wb-ink);
  --surface:var(--wb-ink-2); --panel:var(--wb-ink-2); --panel2:var(--wb-ink-3);
  --border:var(--wb-line); --line:var(--wb-line); --line-soft:var(--wb-ink-3);
  --text:var(--wb-text); --paper:var(--wb-text);
  --muted:var(--wb-muted); --dim:var(--wb-faint); --faint:var(--wb-faint);
  --accent:var(--wb-signal); --on-accent:var(--wb-on-signal);
  --success:var(--wb-alive); --good:var(--wb-alive);
  --warn:var(--wb-amber); --danger:var(--wb-red); --bad:var(--wb-red);
  --header-bg:rgba(15,22,38,.92);
  /* pages set most UI text in var(--mono); the brand sets text in Bricolage */
  --sans:var(--wb-sans); --mono:var(--wb-sans);
}

/* ── base type ───────────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%}
body{background:var(--wb-ink) !important;color:var(--wb-text);font-family:var(--wb-sans);font-optical-sizing:auto}
h1,h2,h3,h4{font-family:var(--wb-sans);letter-spacing:-.02em;color:var(--wb-text)}
h1{font-weight:800;font-stretch:84%;line-height:1.04}
h2{font-weight:700;font-stretch:88%;line-height:1.1}
h3,h4{font-weight:700}
p,li,td,th,dd,dt,label,small{font-family:var(--wb-sans)}
a{color:inherit}
:focus-visible{outline:2px solid var(--wb-signal);outline-offset:3px}
::selection{background:rgba(255,122,26,.35)}

/* code stays monospace — only code */
code,pre,kbd,samp,pre *,code *{font-family:var(--wb-code) !important;font-stretch:100%}
pre{background:#0B1120;border:1px solid var(--wb-line);border-radius:12px}

/* numbers line up in tables and prices */
table,.num,.price,.pprice,[class*="price"]{font-variant-numeric:tabular-nums}

/* ── buttons: homepage pill style (page CTAs; header keeps nav.css) ──── */
main .btn,section .btn,.wrap .btn,.cta .btn,.hero .btn,form button[type="submit"]{
  border-radius:999px;font-family:var(--wb-sans);font-weight:600;letter-spacing:0}
main .btn:not(.ghost):not(.btn-outline):not(.btn-quiet),form button[type="submit"]{
  background:var(--wb-signal);color:var(--wb-on-signal);border-color:transparent}
main .btn.ghost,main .btn-outline,main .btn-quiet{background:transparent;color:var(--wb-text);border:1.5px solid var(--wb-line)}

/* ── account pages (sign in / sign up / reset) ─────────────────────── */
body:has(.login-container,.register-container,.reset-container){display:block !important;min-height:100vh;padding:0 !important}
.login-container,.register-container,.reset-container{
  margin:56px auto 64px !important;background:var(--wb-ink-2) !important;border:1px solid var(--wb-line) !important;border-radius:20px !important;padding:36px 32px !important;max-width:420px}
.login-container h1,.register-container h1,.reset-container h1{color:var(--wb-text) !important;font-size:2rem !important;text-align:left !important;margin-bottom:24px !important}
.login-container label,.register-container label,.reset-container label{color:var(--wb-muted) !important}
.login-container input,.register-container input,.reset-container input{
  background:var(--wb-ink) !important;border:1px solid var(--wb-line) !important;border-radius:10px !important;color:var(--wb-text) !important;font-family:var(--wb-sans) !important;font-size:1rem !important}
.login-container input:focus,.register-container input:focus,.reset-container input:focus{border-color:var(--wb-signal) !important}
.login-container button[type="submit"],.register-container button[type="submit"],.reset-container button[type="submit"]{
  background:var(--wb-signal) !important;color:var(--wb-on-signal) !important;border-radius:999px !important;min-height:48px;font-size:1rem !important}
.login-container button[type="submit"]:hover,.register-container button[type="submit"]:hover,.reset-container button[type="submit"]:hover{background:#FF8F3D !important}
.password-toggle button{background:none !important;color:var(--wb-muted) !important;width:auto !important;border-radius:6px !important}
.success-message{background:rgba(61,220,151,.12) !important;color:var(--wb-text) !important;border:1px solid var(--wb-alive) !important}
.error-message{background:rgba(240,93,94,.12) !important;color:var(--wb-text) !important;border:1px solid var(--wb-red) !important}
.links a{color:var(--wb-muted) !important}.links a:hover{color:var(--wb-text) !important}
.footer{color:var(--wb-faint) !important}

/* keep the shared header immune to page-level `button {}` rules */
.site-header button{width:auto;background:none;font-family:inherit}
.site-header .nav-toggle{padding:10px;border-radius:8px;width:44px;height:44px}
.site-header .dd-trigger{padding:8px 10px;border-radius:6px;color:var(--wb-muted)}
.site-header .logo{font-family:var(--wb-sans) !important;font-weight:700;letter-spacing:-.01em}
.site-header .nav-cta .btn{font-family:var(--wb-sans) !important}