/* ============================================================================
   Flero docs — chrome deltas on top of shared/brand.css.

   The docs load the marketing design system verbatim (/shared/brand.css), so
   the nav, mega-menu, footer, buttons, fonts and tokens are the same objects
   flero.ai renders. This file holds only what the docs need on top of it:

     1. a dark-theme token layer (brand.css is light-only; the docs keep the
        theme toggle, so every V3 token gets a dark value here)
     2. docs-only chrome: sticky nav, the contents button, the sidebar toggle
     3. two docs-only accent tokens the marketing site has no use for

   Nothing here restyles a marketing component. If a colour looks wrong on
   flero.ai and in the docs, fix shared/brand.css.
   ========================================================================== */

/* ── 1. Dark theme ────────────────────────────────────────────────────────
   brand.css declares no dark values, so we re-point its own token names.
   Every surface is built from the V3 ink hue (#101223), not neutral grey, so
   dark mode reads as the same brand rather than a generic inversion. */
[data-theme="dark"]{
  /* Neutral off-black, not navy: every surface is grey built from black, no blue hue. */
  --bg:#111113;          /* off-black page */
  --surface:#191919;     /* cards, sidebar, raised panels */
  --surface2:#212121;
  --line:#2C2C2E;
  --line2:#3A3A3D;
  --ink:#ECECEE;
  --muted:#A6A6AB;
  --faint:#78787E;
  --blue:#1585DC;        /* links: curious blue in dark mode (Tanja); reads clearly on off-black */
  --blue-deep:#1274C4;
  --peri:#8CA9EF;
  --peri-soft:rgba(140,169,239,.14);
  --wash:#1E1E20;        /* neutral raised wash (e.g. active sidebar item), not navy */
  --cta:#1585DC;         /* CTA button blue, same as light */
  --cta-deep:#1274C4;
  --brand:#1250FF;       /* not used for the docs footer/header in dark (see below) */
}

/* Footer + header (nav): both use the off-black page colour (--bg) in dark mode,
   so the header matches the footer exactly instead of being a navy band. Marketing
   has no dark mode, so this is docs-only. The nav selector mirrors the specificity
   of the light rule below (incl. the :has() hover state) so it wins in every state. */
[data-theme="dark"] footer{ background:var(--bg); }
[data-theme="dark"] .nav,
[data-theme="dark"] .nav.solid,
[data-theme="dark"] .nav:is(.solid, :has(.mitem:is(:hover, :focus-within))){ background:var(--bg) !important; }

/* ── 2. Docs-only accent tokens ──────────────────────────────────────────
   The screenshot/gif callouts reuse the amber the nav "Soon" pill already
   uses, so the docs introduce no new hue. */
:root{
  --amber-ink:#A8650A;
  --amber-soft:rgba(245,158,11,.12);
}
[data-theme="dark"]{
  --amber-ink:#E8A33C;
  --amber-soft:rgba(245,158,11,.10);
}

/* ── 3. Nav ──────────────────────────────────────────────────────────────
   Marketing pins the nav over a full-height hero. The docs open straight onto
   content under a sticky sidebar, so the bar sits in flow and is always solid.
   !important because the brand rules carry specificity from their :has(). */
.nav{position:sticky; top:0; z-index:300;}
.nav, .nav.solid, .nav:is(.solid, :has(.mitem:is(:hover, :focus-within))){
  background:var(--surface) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--line) !important;
}
.nav .brand, .nav:is(.solid, :has(.mitem:is(:hover, :focus-within))) .brand{color:var(--ink);}

/* Mobile-only contents toggle, injected into the nav at build time. */
.nav .docs-menu-btn{
  display:none; width:40px; height:40px; align-items:center; justify-content:center;
  border:none; background:none; color:var(--ink); cursor:pointer;
  border-radius:9999px; margin-right:4px;
}
.nav .docs-menu-btn:hover{background:var(--surface2);}
@media (max-width:820px){ .nav .docs-menu-btn{display:inline-flex;} }

/* ── 4. Theme toggle ─────────────────────────────────────────────────────
   Lives at the top of the docs sidebar. It was in the nav, where the
   mega-menu overlay made it hard to click. */
.docs-sidebar-theme{display:flex; justify-content:flex-end; padding:2px 0 12px;}
.docs-sidebar-theme .theme-toggle{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1; cursor:pointer;
  border-radius:9999px; transition:background .15s, border-color .15s;
}
.docs-sidebar-theme .theme-toggle:hover{background:var(--surface2); border-color:var(--line2);}