/* ============================================================
   USS — Unified Security Stack theme for docs.synoti.com
   ------------------------------------------------------------
   Reskins the gitdocai token + component layer to match the USS
   design system (blue accent #2563eb, surface/border palette,
   system-sans stack, rounded cards, accent-bordered sidebar and
   table-of-contents rail).

   Loaded last in <head> (after the per-doc inline overrides and
   after the base _astro CSS), so equal-specificity rules win.
   Disable by removing the <link> that ships with this file.
   ============================================================ */

/* ---------- Design tokens · light ---------- */
html:root{
  --background:#f6f7f9;
  --foreground:#18202b;

  --card:#ffffff;
  --card-foreground:#18202b;
  --popover:#ffffff;
  --popover-foreground:#18202b;

  --primary:#2563eb;
  --primary-foreground:#ffffff;
  --ring:#2563eb;
  --accent-color:#2563eb;

  --secondary:#f0f2f5;
  --secondary-foreground:#18202b;
  --muted:#f0f2f5;
  --muted-foreground:#5b6676;

  --accent:#e8effd;
  --accent-foreground:#1e40af;

  --destructive:#c2410c;
  --destructive-foreground:#ffffff;

  --border:#dde2e8;
  --input:#dde2e8;

  --sidebar:#ffffff;
  --sidebar-foreground:#18202b;
  --sidebar-border:#dde2e8;
  --sidebar-accent:#e8effd;
  --sidebar-accent-foreground:#1e40af;

  --content-text:#2b3542;

  --radius:.5rem;
  --radius-lg:12px;
  --radius-md:10px;
  --radius-sm:6px;

  --synoti-brand-purple:#2563eb;
  --synoti-brand-purple-2:#6d28d9;
  --synoti-brand-pink:#7c3aed;
  --synoti-brand-gradient:linear-gradient(100deg,#2563eb 0%,#7c3aed 100%);

  --font-sans:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}

/* ---------- Design tokens · dark ---------- */
html.dark{
  --background:#0c0f14;
  --foreground:#e7ecf2;

  --card:#12161d;
  --card-foreground:#e7ecf2;
  --popover:#12161d;
  --popover-foreground:#e7ecf2;

  --primary:#60a5fa;
  --primary-foreground:#0c0f14;
  --ring:#60a5fa;
  --accent-color:#60a5fa;

  --secondary:#171c25;
  --secondary-foreground:#e7ecf2;
  --muted:#171c25;
  --muted-foreground:#a0abb9;

  --accent:#16233a;
  --accent-foreground:#93c5fd;

  --destructive:#fb923c;
  --destructive-foreground:#0c0f14;

  --border:#252c37;
  --input:#252c37;

  --sidebar:#12161d;
  --sidebar-foreground:#e7ecf2;
  --sidebar-border:#252c37;
  --sidebar-accent:#16233a;
  --sidebar-accent-foreground:#93c5fd;

  --content-text:#cfd6e0;

  --synoti-brand-purple:#60a5fa;
  --synoti-brand-purple-2:#7c3aed;
  --synoti-brand-pink:#7c3aed;
  --synoti-brand-gradient:linear-gradient(100deg,#60a5fa 0%,#7c3aed 100%);

  color-scheme:dark;
}

html{ background:var(--background); }
body{ font-family:var(--font-sans); }

/* ---------- Topbar ---------- */
header{
  background:color-mix(in srgb,var(--card) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
}
header .subbar-row,
header + .border-b{
  background:color-mix(in srgb,var(--card) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
}

/* USS wordmark next to the emblem */
[data-header-left] > a::after{
  content:"Unified Security Stack";
  margin-left:4px;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
  color:var(--foreground);
}
@media (max-width:1023px){
  [data-header-left] > a::after{ display:none; }
}

/* ---------- Sidebar ---------- */
aside.static-sidebar{ background:var(--sidebar); }

/* group labels — uppercase, small, faint (USS nav labels) */
nav[data-sidebar-scroll] div.select-none{
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  color:var(--muted-foreground) !important;
}

/* active item — soft accent fill + left accent bar */
nav[data-sidebar-scroll] a.text-primary{
  background:var(--accent) !important;
  color:var(--accent-foreground) !important;
  border-left:2px solid var(--primary);
  border-radius:0 8px 8px 0 !important;
  font-weight:600 !important;
}

/* ---------- Table-of-contents rail ---------- */
.toc-link{
  border-left:2px solid var(--border);
  border-radius:0 !important;
}
.toc-link:hover{
  border-left-color:color-mix(in srgb,var(--primary) 45%,var(--border));
}
.toc-link--active{
  border-left-color:var(--primary) !important;
  color:var(--primary) !important;
  background:transparent !important;
  font-weight:600 !important;
}

/* ---------- Content ---------- */
.doc-article{ font-family:var(--font-sans); }
.tiptap-editor h1{ font-size:34px; letter-spacing:-.02em; }
.tiptap-editor h2{ letter-spacing:-.01em; }

/* links inside prose content inherit the accent */
.tiptap-editor a{ color:var(--primary); }

/* ---------- Selection ---------- */
::selection{
  background:color-mix(in srgb,var(--primary) 25%,transparent);
}