/* Crossroad — shared brand tokens + primitives for the standalone pages
   (login, invite, privacy, terms, dpa). Mirrors the Console design system
   (public/index.html) and the extension onboarding page, so the whole funnel —
   marketing → invite → login → onboarding → console — shares one look.

   Fonts are loaded per page via a Google Fonts <link> (same families as the app).
   Theme is pre-painted from localStorage['pi_theme'] (falls back to
   prefers-color-scheme) by a tiny inline <script> in each page's <head>. */

:root, :root[data-theme="light"] {
  --page:#f7f7f8; --bg:#ffffff; --border:#ececef; --soft:#f0f0f3;
  --ink:#1a1d24; --muted:#5c616b; --muted2:#8a8f98; --muted3:#9ca3af;
  --accent:#4457d6; --accentSoft:#eef0ff; --ok:#1f8a4c; --danger:#c23a52;
  --field:#fbfbfc; --fieldBorder:#e0e1e6;
  --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --shadow:0 12px 40px rgba(20,21,25,.10);
}
:root[data-theme="dark"] {
  --page:#0b0c0f; --bg:#141519; --border:#232630; --soft:#1b1d24;
  --ink:#e7e8ec; --muted:#a2a6b0; --muted2:#888d98; --muted3:#6c7079;
  --accent:#6f7cf0; --accentSoft:#23264a; --ok:#74e6a4; --danger:#ff9fb0;
  --field:#16181e; --fieldBorder:#2a2e39;
  --shadow:0 12px 40px rgba(0,0,0,.45);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; }
body { background:var(--page); color:var(--ink); font:14px/1.55 var(--ui); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:var(--accentSoft); }
.mono { font-family:var(--mono); }

/* ---- brand header (logo tile + wordmark) ---- */
.cr-brand { display:flex; align-items:center; gap:11px; }
.cr-logo { width:32px; height:32px; border-radius:9px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
           background:linear-gradient(140deg,#4457d6,#7b5cff); box-shadow:0 2px 6px rgba(68,87,214,.35); }
.cr-wordmark { font:600 17px var(--display); letter-spacing:-.01em; color:var(--ink); }

/* ---- centered card (login, invite) ---- */
.cr-center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.cr-stack { width:100%; max-width:400px; }
.cr-card { width:100%; max-width:400px; background:var(--bg); border:1px solid var(--border); border-radius:16px;
           padding:30px 30px 26px; box-shadow:var(--shadow); }
.cr-card h1 { font:600 21px/1.25 var(--display); letter-spacing:-.02em; margin:0 0 6px; }
.cr-card p { color:var(--muted); font-size:13.5px; margin:0 0 20px; line-height:1.55; }
.cr-card strong { color:var(--ink); font-weight:600; }

/* ---- buttons ---- */
.btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; text-align:center;
       border:0; border-radius:10px; padding:11px; font:600 14px var(--ui); cursor:pointer; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.05); }
.btn-ghost { background:var(--field); color:var(--ink); border:1px solid var(--fieldBorder); font-weight:500; }
.btn-ghost:hover { background:var(--soft); }
.btn svg { width:18px; height:18px; }
.btn:disabled { opacity:.55; cursor:default; filter:none; }

/* ---- inputs ---- */
.input { width:100%; border:1px solid var(--fieldBorder); background:var(--field); color:var(--ink);
         border-radius:10px; padding:10px 12px; font:14px var(--ui); margin-bottom:9px; }
.input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accentSoft); }
.input.mono { font-family:var(--mono); font-size:12.5px; }

/* ---- text helpers ---- */
.muted { color:var(--muted); }
.fine { color:var(--muted3); font-size:11.5px; line-height:1.55; }
.err { color:var(--danger); font-size:13px; }
.ok { color:var(--ok); }

/* ---- long-form legal document (privacy, terms, dpa) ---- */
.cr-topbar { border-bottom:1px solid var(--border); padding:15px 24px; }
.cr-topbar .in { max-width:760px; margin:0 auto; }
.cr-doc { max-width:760px; margin:0 auto; padding:38px 24px 80px; }
.cr-doc h1 { font:600 27px/1.2 var(--display); letter-spacing:-.02em; margin:0 0 6px; }
.cr-doc h2 { font:600 16px var(--ui); margin:32px 0 8px; color:var(--ink); }
.cr-doc h3 { font:600 14px var(--ui); margin:22px 0 6px; color:var(--ink); }
.cr-doc p, .cr-doc li { color:var(--muted); font-size:14px; line-height:1.7; }
.cr-doc ul { padding-left:20px; margin:8px 0; }
.cr-doc li { margin:5px 0; }
.cr-doc strong { color:var(--ink); font-weight:600; }
.cr-doc a { color:var(--accent); }
.cr-doc table { border-collapse:collapse; width:100%; margin:12px 0; font-size:13.5px; }
.cr-doc th, .cr-doc td { border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top; color:var(--muted); }
.cr-doc th { color:var(--ink); font-weight:600; background:var(--soft); }
.cr-doc hr { border:0; border-top:1px solid var(--border); margin:26px 0; }
.cr-doc .updated { color:var(--muted3); font:12px var(--mono); margin:0 0 4px; }
