/* =====================================================================
   Xi - site stylesheet
   Design tokens live in assets/colors_and_type.css (imported below).
   ===================================================================== */
@import url('assets/colors_and_type.css');

/* ---------- Site-level layout, theme overrides, chrome ---------- */
html,body{margin:0;padding:0;background:var(--bg-void);}
  *{box-sizing:border-box;}
  :root{--xi-accent:#f5811f; --code-fg:#d8def0; --code-bg-deep:#050714; --code-ok:#83c9a0;
    --syn-com:#4a5378; --syn-str:#83c9a0; --syn-num:#f6c453; --syn-kind:#8aa9dd; --syn-kw:#6b8ed1; --syn-type:#9db0dc; --syn-pun:#7a83a8;}
  html{color-scheme:dark;}
  html[data-theme="light"]{color-scheme:light;
    --bg-void:#f7f8fc; --bg-surface:#ffffff; --bg-elevated:#e9edf6; --bg-inset:#f0f2f9;
    --bg-line:rgba(26,34,64,0.10); --bg-line-strong:rgba(26,34,64,0.22);
    --fg-1:#141b36; --fg-2:#3f4a70; --fg-3:#6b7499; --fg-4:#9aa3c0;
    --brand-steel:#4368ae; --brand-steel-hi:#35589c;
    --shadow-2:0 12px 40px rgba(26,34,64,0.12);
    --glow-steel:0 0 0 1px rgba(67,104,174,0.22), 0 6px 24px rgba(67,104,174,0.16);
    --code-fg:#273252; --code-bg-deep:#eef1f8; --code-ok:#1e7a4d;
    --syn-com:#9aa2c2; --syn-str:#1e7a4d; --syn-num:#a3690a; --syn-kind:#35589c; --syn-kw:#4368ae; --syn-type:#555f8c; --syn-pun:#6b7499;}
  @media (max-width:1420px){ [data-nav-tagline]{display:none !important;} }
  @media (max-width:1240px){ nav a[data-nav-sec]{display:none !important;} }
  @media (max-width:640px){ [data-nav-version]{display:none !important;} }
  
  html[data-theme="light"] body::after{opacity:0.045; mix-blend-mode:multiply;}
  html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c6cde3; border-color:#f7f8fc;}
  body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:200;background-image:url('assets/noise.svg');background-size:200px 200px;opacity:0.025;mix-blend-mode:overlay;}
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:var(--bg-void);}
  ::-webkit-scrollbar-thumb{background:#1a2240;border:2px solid var(--bg-void);}
  ::selection{background:var(--brand-ember);color:#0a0a0a;}
  textarea::selection{background:var(--brand-steel);color:#fff;}

/* nav: large translucent blurred header that shrinks on scroll */
nav{height:92px !important; background:rgba(7,9,26,0.45) !important; backdrop-filter:blur(24px) saturate(1.2) !important; -webkit-backdrop-filter:blur(24px) saturate(1.2) !important; transition:height 240ms cubic-bezier(0.16,1,0.3,1), background 240ms ease !important;}
html[data-scrolled="1"] nav{height:64px !important; background:rgba(7,9,26,0.78) !important;}
html[data-theme="light"] nav{background:rgba(247,248,252,0.55) !important;}
html[data-theme="light"][data-scrolled="1"] nav{background:rgba(247,248,252,0.88) !important;}

/* Playground: compile spinner */
.xi-spinner{
  width:11px; height:11px; flex:0 0 auto; display:inline-block;
  border:2px solid var(--bg-line-strong);
  border-top-color:var(--xi-accent, #f5811f);
  border-radius:999px;
  animation:xi-spin 0.7s linear infinite;
}
@keyframes xi-spin{ to{ transform:rotate(360deg); } }