/* Xuantify — the site stylesheet.
 *
 * Loaded by includes/head.php on EVERY page: the hand-built ones (home, faq,
 * latest, indicators, analyze, privacy) and the managed ones (the blog, its
 * posts, anything made in the dashboard). A page adds its own rules on top
 * through $head_extra; what is shared lives here.
 *
 * Dark is the default; [data-theme="light"] is the light skin the theme
 * toggle switches to.
 */

:root {
  /* The palette, under the site's own names. */
  --bg:#070b18; --fg:#e8e9f3; --p1:#6d5cff; --p2:#4f7cff; --card:#0d1226; --border:#212a4c;

  /* The style contract (core/lib/ui/site-tokens.css) filled in with that
     palette — this is what blocks, widget skins and the chat read.
     NB: in the contract --muted is a quiet SURFACE. The grey text colour is
     --muted-foreground. */
  --background:var(--bg); --foreground:var(--fg);
  --card-foreground:var(--fg);
  --muted:#121935; --muted-foreground:#878aa6;
  --border-strong:#34407a;
  --input:var(--border); --ring:var(--p1);
  --primary:var(--p1); --primary-foreground:#fff;
  --secondary:#161d3d; --secondary-foreground:var(--fg);
  --accent:var(--p2); --accent-foreground:#fff; --on-accent:#fff;
  --link:#a99bff; --link-hover:#c6bcff; --link-strong:#c6bcff;
  --cta:var(--p1); --cta-foreground:#fff;
  --radius:13px;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-heading:var(--font-body);

  /* Nav-widget token values (the core/nav skin reads --nav-*). */
  --nav-text:var(--muted-foreground); --nav-text-hover:var(--fg);
  --nav-link-size:14px; --nav-link-size-mobile:22px; --nav-link-gap:22px; --nav-link-weight:500;
  --nav-bg-overlay:rgba(7,11,24,.97); --nav-burger-color:var(--fg);
}

/* ── Light skin: token overrides applied when <html data-theme="light"> ── */
[data-theme="light"] {
  --bg:#f5f7fc; --fg:#101626; --card:#ffffff; --border:#e4e8f1;
  --muted:#eceff7; --muted-foreground:#5b6678;
  --border-strong:#c9d0e0; --secondary:#eceff7;
  --link:#5546e0; --link-hover:#3d30b8; --link-strong:#3d30b8;
  --nav-bg-overlay:rgba(245,247,252,.98);
  --field:#ffffff; --field-ph:#8a93a8;   /* input / textarea bg + placeholder in light mode */
}

* { box-sizing:border-box; }
body { margin:0; background:
    radial-gradient(1100px 560px at 50% -12%, rgba(118,96,255,.20), transparent 60%),
    radial-gradient(820px 520px at 88% 2%, rgba(70,118,255,.12), transparent 55%), var(--bg);
  color:var(--fg); font-family:var(--font-body); line-height:1.6; }
[data-theme="light"] body {
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(118,96,255,.10), transparent 60%),
    radial-gradient(820px 520px at 88% 2%, rgba(70,118,255,.07), transparent 55%), var(--bg);
  color: var(--fg);
}

/* ── Top navigation shell (includes/nav.php) ──
   NB: the blur lives on ::before, NOT on .xn — backdrop-filter on .xn would make it
   a containing block and trap the core/nav mobile drawer (position:fixed inset:0) inside the
   header instead of the viewport (the "CSS containing-block trap"). */
.xn { position:sticky; top:0; z-index:50; background:rgba(7,11,24,.78); border-bottom:1px solid var(--border); }
.xn::before { content:''; position:absolute; inset:0; z-index:-1; backdrop-filter:saturate(140%) blur(10px); pointer-events:none; }
.xn-in { max-width:1080px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:16px; height:60px; }
.xn-brand { display:flex; align-items:center; gap:9px; text-decoration:none; }
.xn-mark { width:28px; height:28px; display:grid; place-items:center; font-weight:800; font-size:16px; background:linear-gradient(135deg,var(--p1),var(--p2)); border-radius:8px; color:#fff; }
.xn-brand b { color:var(--fg); font-size:17px; letter-spacing:.2px; }
.xn .cms-nav { margin-left:14px; }
.xn-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
[data-theme="light"] .xn { background:rgba(245,247,252,.82); }
/* The theme toggle's dot skin fills itself with --muted (a surface in the
   contract); on this dark header the grey of the nav text reads better. */
.xn .theme-dot { --theme-dot-bg:var(--muted-foreground); --theme-dot-hover-bg:var(--muted-foreground); }

/* core/lib/ui/search.css reads --muted as a TEXT colour; in the contract it is
   a surface. Hand it the grey it means. */
body .ui-search { --uis-muted:var(--muted-foreground); }

/* ── Footer (includes/footer.php) ── */
.xn-footer {
  max-width: 1100px; margin: 56px auto 0; padding: 18px 20px 28px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--muted-foreground);
}
.xn-footer a { color: var(--muted-foreground); text-decoration: none; }
.xn-footer a:hover { text-decoration: underline; }
.xn-footer nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* ── Managed pages (core/cms/page.php): the blog, its posts ── */
.cmsb-main { padding:26px 0 40px; }
.cmsb-main h1, .cmsb-main h2, .cmsb-main h3 { font-weight:800; letter-spacing:-.3px; }