/* ===== Xpenote shared theme + navbar =====================================
   Single source of truth for theme tokens and the site-wide glass navbar.
   Loaded by EVERY page (before any page stylesheet). The navbar markup and
   behaviour live in assets/nav.js — pages only carry a placeholder.

   Dark = brand default on :root. Light appears twice by design (no build
   step): once for OS preference, once for explicit data-theme choice.
   KEEP THE TWO LIGHT BLOCKS IDENTICAL. */
:root {
  color-scheme: dark;
  --bg:#070707;
  --bg-soft:#0d0f0a;
  --band-tint:rgba(255,255,255,0.012);
  --bg-raised:rgba(255,255,255,0.035);
  --surface-btn:rgba(255,255,255,0.06);
  --surface-glass:rgba(18,18,18,0.6);
  --surface-chip:rgba(20,20,20,0.82);
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);
  --text:#F5F5F0;
  --text-muted:rgba(245,245,240,0.66);
  --text-faint:rgba(245,245,240,0.5);
  --text-ghost:rgba(245,245,240,0.28);
  --accent:#C5F24A;
  --on-accent:#0a0a0a;
  --accent-text:#C5F24A;
  --accent-text-hi:#eaffb0;
  --accent-soft:rgba(197,242,74,0.1);
  --accent-border:rgba(197,242,74,0.3);
  --glow-accent:rgba(197,242,74,0.4);
  --glow-accent-strong:rgba(197,242,74,0.62);
  --teal:#19BFB5;
  --teal-text:#19BFB5;
  --gold:#F2B01E;
  --gold-text:#F2B01E;
  --gold-soft:rgba(242,176,30,0.14);
  --gold-border:rgba(242,176,30,0.34);
  --tint-accent-weak:rgba(197,242,74,0.07);
  --tint-teal-weak:rgba(25,191,181,0.04);
  --selection-bg:rgba(197,242,74,0.35);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:#FAFAF7;
    --bg-soft:#F1F3EA;
    --band-tint:rgba(10,10,10,0.02);
    --bg-raised:#FFFFFF;
    --surface-btn:rgba(10,10,10,0.05);
    --surface-glass:rgba(250,250,247,0.78);
    --surface-chip:rgba(255,255,255,0.92);
    --border:rgba(10,10,10,0.1);
    --border-strong:rgba(10,10,10,0.18);
    --text:#191A14;
    --text-muted:#565A4E;
    --text-faint:#6E7263;
    --text-ghost:rgba(25,26,20,0.3);
    --accent:#C5F24A;
    --on-accent:#0a0a0a;
    --accent-text:#55700D;
    --accent-text-hi:#789B30;
    --accent-soft:rgba(85,112,13,0.09);
    --accent-border:rgba(85,112,13,0.35);
    --glow-accent:rgba(140,180,20,0.35);
    --glow-accent-strong:rgba(140,180,20,0.5);
    --teal:#19BFB5;
    --teal-text:#0E756F;
    --gold:#F2B01E;
    --gold-text:#8A6207;
    --gold-soft:rgba(138,98,7,0.1);
    --gold-border:rgba(138,98,7,0.35);
    --tint-accent-weak:rgba(85,112,13,0.06);
    --tint-teal-weak:rgba(14,117,111,0.05);
    --selection-bg:rgba(197,242,74,0.55);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#FAFAF7;
  --bg-soft:#F1F3EA;
  --band-tint:rgba(10,10,10,0.02);
  --bg-raised:#FFFFFF;
  --surface-btn:rgba(10,10,10,0.05);
  --surface-glass:rgba(250,250,247,0.78);
  --surface-chip:rgba(255,255,255,0.92);
  --border:rgba(10,10,10,0.1);
  --border-strong:rgba(10,10,10,0.18);
  --text:#191A14;
  --text-muted:#565A4E;
  --text-faint:#6E7263;
  --text-ghost:rgba(25,26,20,0.3);
  --accent:#C5F24A;
  --on-accent:#0a0a0a;
  --accent-text:#55700D;
  --accent-text-hi:#789B30;
  --accent-soft:rgba(85,112,13,0.09);
  --accent-border:rgba(85,112,13,0.35);
  --glow-accent:rgba(140,180,20,0.35);
  --glow-accent-strong:rgba(140,180,20,0.5);
  --teal:#19BFB5;
  --teal-text:#0E756F;
  --gold:#F2B01E;
  --gold-text:#8A6207;
  --gold-soft:rgba(138,98,7,0.1);
  --gold-border:rgba(138,98,7,0.35);
  --tint-accent-weak:rgba(85,112,13,0.06);
  --tint-teal-weak:rgba(14,117,111,0.05);
  --selection-bg:rgba(197,242,74,0.55);
}
/* dark is the :root default; block kept so future tooling sees the hook */
:root[data-theme="dark"] {}

/* legacy aliases used by styles.css (legal pages) — follow the theme */
:root {
  --muted: var(--text-muted);
  --card: var(--bg-raised);
  --accent-2: var(--accent-text);
}

/* ---- theme toggle icons ---- */
.icon-moon { display:none; }
:root[data-theme="light"] .icon-sun { display:none; }
:root[data-theme="light"] .icon-moon { display:block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .icon-sun { display:none; }
  :root:not([data-theme]) .icon-moon { display:block; }
}
/* ---- theme switch transition (fallback when View Transitions unavailable) ---- */
.theme-switching, .theme-switching * { transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease !important; }
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
@media (prefers-reduced-motion: reduce) {
  .theme-switching, .theme-switching * { transition:none !important; }
}

/* ===== Site navbar (markup injected by assets/nav.js) ==================== */
.site-nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px 0; }
.site-nav .nav-inner { display:flex; align-items:center; justify-content:space-between; width:min(1180px,92vw); padding:11px 14px 11px 18px; }
.site-nav .nav-brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text); }
.site-nav .nav-logo { width:34px; height:34px; border-radius:11px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:var(--on-accent); font-weight:700; font-size:21px; box-shadow:0 0 18px var(--glow-accent); }
.site-nav .nav-wordmark { font-weight:700; font-size:19px; letter-spacing:-0.3px; font-family:'Poppins',-apple-system,system-ui,sans-serif; }
.site-nav .nav-links { display:flex; align-items:center; gap:26px; }
.site-nav .nav-links a { text-decoration:none; color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; transition: transform .2s ease-out, color .2s ease-out; }
.site-nav .nav-links a:hover { color:var(--text); }
.site-nav .nav-links a[aria-current="page"] { color:var(--accent-text); }
.site-nav .nav-actions { display:flex; align-items:center; gap:10px; }
.site-nav .nav-theme-toggle { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; background:var(--surface-btn); border:1px solid var(--border-strong); color:var(--text); cursor:pointer; padding:0; }
.site-nav .nav-cta { display:flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:14px; background:var(--accent); font-weight:700; font-size:14px; color:var(--on-accent); text-decoration:none; box-shadow:0 8px 20px var(--glow-accent); font-family:'Poppins',-apple-system,system-ui,sans-serif; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.site-nav .nav-cta:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .site-nav .nav-cta:hover { transform:none; } }

/* ---- iOS-style liquid glass bar (live backdrop-filter refraction) ---- */
.nav-glass {
  position: relative;
  border-radius: 22px;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(30px) saturate(185%);
  backdrop-filter: blur(30px) saturate(185%);
  border: 1px solid var(--border);
  box-shadow:
    0 8px 30px rgba(0,0,0,0.40),
    inset 0 1px 0.5px rgba(255,255,255,0.22),
    inset 0 -1px 1px rgba(0,0,0,0.18);
}
.nav-glass > * { position: relative; z-index: 1; }
.nav-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 22%, rgba(255,255,255,0) 46%),
    radial-gradient(130% 170% at 12% -45%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.nav-glass::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%; top: 0;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  opacity: 0.6;
  pointer-events: none;
}
:root[data-theme="light"] .nav-glass {
  box-shadow:
    0 8px 30px rgba(17,20,24,0.12),
    inset 0 1px 0.5px rgba(255,255,255,0.90),
    inset 0 -1px 1px rgba(17,20,24,0.05);
}
:root[data-theme="light"] .nav-glass::before {
  background:
    linear-gradient(125deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 24%, rgba(255,255,255,0) 50%),
    radial-gradient(130% 170% at 12% -45%, rgba(255,255,255,0.50), rgba(255,255,255,0) 60%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .nav-glass {
    box-shadow:
      0 8px 30px rgba(17,20,24,0.12),
      inset 0 1px 0.5px rgba(255,255,255,0.90),
      inset 0 -1px 1px rgba(17,20,24,0.05);
  }
  :root:not([data-theme]) .nav-glass::before {
    background:
      linear-gradient(125deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 24%, rgba(255,255,255,0) 50%),
      radial-gradient(130% 170% at 12% -45%, rgba(255,255,255,0.50), rgba(255,255,255,0) 60%);
  }
}

/* ---- mobile hamburger nav ---- */
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--surface-btn);border:1px solid var(--border-strong);color:var(--text);cursor:pointer;padding:0;}
.mobile-menu{display:none;}
.mobile-menu[data-open="true"]{display:flex;flex-direction:column;gap:4px;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:5;padding:10px;border-radius:18px;background:var(--surface-chip);-webkit-backdrop-filter:blur(30px) saturate(185%);backdrop-filter:blur(30px) saturate(185%);border:1px solid var(--border);box-shadow:0 12px 40px rgba(0,0,0,0.5);}
.mobile-menu a{color:var(--text);padding:12px 14px;border-radius:12px;font:500 13px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;}
.mobile-menu a:hover{background:var(--surface-btn);}
@media (max-width:900px){
  .nav-burger{display:flex;}
  .site-nav .nav-links{display:none;}
}

button:focus-visible { outline:3px solid var(--accent-text); outline-offset:3px; border-radius:6px; }

/* ---- skip link (canonical off-screen method, shared) ---- */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:fixed; top:12px; left:12px; width:auto; height:auto; padding:10px 18px; border-radius:10px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:15px; z-index:9999; text-decoration:none; box-shadow:0 4px 16px var(--glow-accent); }