/* ==========================================================================
 * AeroSim theme for the Shibuya docs.
 *
 * CSS-first on purpose: this single file is loaded on the main site (via
 * html_css_files in docs/source/conf.py) AND injected into the nassu / cfdmod /
 * validation submodule builds at build time by build_docs.sh, so all four docs
 * builds share one brand without any commit to the submodule repos.
 *
 * This is a *single* theme, not an accent tweak: the light/dark toggle is
 * removed and both color-mode classes are pinned to the same AeroSim look, so
 * the docs always render in the brand palette regardless of OS/stored
 * preference (which we can't override from a submodule's config).
 *
 * Brand system (pulled from aerosim.io):
 *   font       Archivo (display / headings) + Inter (body)
 *   indigo     #3834A3   (primary)          deep navy #14123A
 *   orange     #E0832F   (action / CTA)      hover     #C56A1E
 *   green      #00A544   (streamline accent)
 *   body text  #474C60   borders #C9CDDB     light bg  #F4F5FB
 * ======================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --as-indigo: #3834a3;
  --as-indigo-hover: #2a2680;
  --as-navy: #14123a;
  --as-orange: #e0832f;
  --as-orange-hover: #c56a1e;
  --as-green: #00a544;
  --as-surface: #f4f5fb;
  --as-accent-surface: #eeedf8;

  /* Typography */
  --sy-f-text: "Inter", var(--sy-f-sys), var(--sy-f-cjk), sans-serif;
  --sy-f-heading: "Archivo", "Inter", var(--sy-f-sys), var(--sy-f-cjk), sans-serif;
}

/* --------------------------------------------------------------------------
 * Single theme: pin both color-mode classes to the identical AeroSim palette.
 * Everything downstream reads these semantic --sy-c-* vars, so overriding them
 * here (higher specificity than the theme's :root defaults, and explicit hex
 * so they don't swap with the Radix light/dark scale) fully brands the site in
 * both modes.
 * ----------------------------------------------------------------------- */
html.light,
html.dark {
  color-scheme: light;

  --sy-c-background: #ffffff;
  --sy-c-background-contrast: #14123a;
  /* Frosted-white header background (this var backs .sy-head-blur, not the
   * modal backdrop - that one is --sy-c-overlay below). */
  --sy-c-background-dropback: rgba(255, 255, 255, 0.82);
  --sy-c-surface: var(--as-surface);
  --sy-c-overlay: rgba(20, 18, 58, 0.42);

  /* Body text is neutral near-black - deliberately NOT the brand navy/indigo,
   * which reads as purple. These hexes are hue-neutral (R=G=B) so there is no
   * purple cast at all. Navy stays for surfaces (footer), indigo for links/
   * accents only. */
  --sy-c-text: #1a1a1a;
  --sy-c-heading: #111111;
  --sy-c-bold: #111111;
  --sy-c-light: #616161;

  --sy-c-border: #e6e7f1;
  --sy-c-divider: #ecedf4;

  --sy-c-link: #3834a3;
  --sy-c-link-hover: #2a2680;

  /* Branded navy footer. */
  --sy-c-foot-background: #14123a;
  --sy-c-foot-text: #c9cddb;
  --sy-c-foot-divider: rgba(255, 255, 255, 0.12);

  /* Accent scale consumed by admonitions / focus rings / active toctree. */
  --accent-9: #3834a3;
  --accent-10: #2a2680;
  --accent-a3: rgba(56, 52, 163, 0.08);
  --accent-a10: #3834a3;
  --accent-a11: #2a2680;
  --accent-contrast: #ffffff;
  --color-surface-accent: var(--as-accent-surface);

  /* Keep syntax highlighting in its light palette even under html.dark. */
  --syntax-text: var(--syntax-light-text);
  --syntax-comment: var(--syntax-light-comment);
}

/* --------------------------------------------------------------------------
 * Kill the light/dark switch and lock the light (indigo) logo, since the
 * header stays white in every mode.
 * ----------------------------------------------------------------------- */
.theme-switch {
  display: none !important;
}
.sy-head-brand .light-logo {
  display: inline !important;
}
.sy-head-brand .dark-logo {
  display: none !important;
}

/* --------------------------------------------------------------------------
 * Typography.
 * ----------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.yue h1,
.yue h2,
.yue h3,
.yue h4,
.yue h5,
.yue h6,
h1.sy-title {
  font-family: var(--sy-f-heading);
  color: var(--sy-c-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.yue h1 {
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.12;
}
.yue h2 {
  padding-top: 0.3em;
}

/* Section headers in the sidebar / global toc use the display face too. */
.globaltoc .caption {
  font-family: var(--sy-f-heading);
  color: var(--as-indigo);
}

/* --------------------------------------------------------------------------
 * Header: white bar with an AeroSim gradient hairline on top.
 * ----------------------------------------------------------------------- */
.sy-head {
  position: relative;
  border-bottom-color: var(--sy-c-divider);
}
.sy-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--as-indigo) 0%, #5b56c9 48%, var(--as-orange) 100%);
  z-index: 2;
}

/* --------------------------------------------------------------------------
 * Sidebar active item: indigo, with a soft brand highlight.
 * ----------------------------------------------------------------------- */
.globaltoc > ul a.current {
  color: var(--as-indigo);
  font-weight: 600;
}
.globaltoc li.toctree-l1 > a.current {
  background: var(--as-accent-surface);
  border-radius: 6px;
}
.globaltoc li.toctree-l2.current {
  border-color: var(--as-indigo);
}

/* On-this-page (right rail) active anchor. */
.localtoc a.current,
.page-toc a.current {
  color: var(--as-indigo);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Inline code: subtle indigo chip.
 * ----------------------------------------------------------------------- */
.yue :not(pre) > code {
  background: #f0eff9;
  color: var(--as-indigo);
  border: 1px solid #e5e3f4;
  border-radius: 6px;
  padding: 0.12em 0.38em;
  font-size: 0.88em;
}

/* Code blocks: quiet brand-tinted frame. */
.yue .highlight,
.highlight pre {
  border-radius: 8px;
}
.yue div[class*="highlight-"] {
  border: 1px solid var(--sy-c-border);
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
 * Actions: orange is the AeroSim call-to-action color (matches the injected
 * "Open Web Solver" pill in docs/inject_nav.py).
 * ----------------------------------------------------------------------- */
.sd-btn-primary,
.sd-btn-primary:visited {
  background-color: var(--as-orange) !important;
  border-color: var(--as-orange) !important;
  color: var(--as-navy) !important;
  font-weight: 600;
}
.sd-btn-primary:hover {
  background-color: var(--as-orange-hover) !important;
  border-color: var(--as-orange-hover) !important;
  color: var(--as-navy) !important;
}

/* Opt-in orange CTA pill for use in content. */
.as-cta {
  display: inline-block;
  background: var(--as-orange);
  color: var(--as-navy) !important;
  font-weight: 600;
  padding: 0.42rem 0.95rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.as-cta:hover {
  background: var(--as-orange-hover);
}

/* --------------------------------------------------------------------------
 * Small brand touches.
 * ----------------------------------------------------------------------- */
::selection {
  background: rgba(56, 52, 163, 0.2);
}

/* Links get a touch more weight so indigo reads as interactive. */
.yue a {
  font-weight: 500;
}

/* Footer wordmark/logo: use the white logo on the navy footer if present. */
.sy-foot .light-logo {
  display: none !important;
}
.sy-foot .dark-logo {
  display: inline !important;
}