/* ── CircleCI theme for Scalar ─────────────────────────────────────────
   Brand tokens mirror the CircleCI CLI docs site
   (circleci-cli/docs/website/assets/css/main.css): Inter for body text,
   IBM Plex Mono for code, Space Grotesk for headings, the brand blue as
   the accent and the "slime" green for success/POST. Colours are defined
   for both Scalar colour modes (.light-mode / .dark-mode). */

:root {
  --scalar-font: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --scalar-font-code: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", monospace;
}

/* Space Grotesk on the big display headings, matching the CLI hero. */
.scalar-app h1,
.scalar-app .section-header,
.scalar-app .heading {
  font-family: "Space Grotesk", var(--scalar-font);
}

/* Brand accents shared across both colour modes. */
.light-mode,
.dark-mode {
  /* HTTP method / status colours keyed off the brand palette:
     GET/blue = brand blue, POST/green = slime. */
  --scalar-color-blue: oklch(66.87% 0.1757 260.55);
  --scalar-color-green: oklch(69.9% 0.1802 152.94);
  --scalar-color-red: oklch(63% 0.21 25);
  --scalar-color-orange: oklch(72% 0.17 62);
  --scalar-color-purple: oklch(58% 0.2 300);
}

/* Dark mode — CircleCI CLI dark palette (oklch tokens copied verbatim). */
.dark-mode {
  --scalar-background-1: oklch(19.3% 0.0324 264);
  --scalar-background-2: oklch(27.5% 0.035 261);
  --scalar-background-3: oklch(32% 0.035 261);
  --scalar-background-accent: oklch(66.87% 0.1757 260.55 / 12%);

  --scalar-color-1: oklch(93% 0.02 264);
  --scalar-color-2: oklch(80% 0.025 268);
  --scalar-color-3: oklch(63.89% 0.028 270.95);
  --scalar-color-accent: oklch(66.87% 0.1757 260.55);

  --scalar-border-color: oklch(100% 0 0 / 10%);

  --scalar-sidebar-background-1: oklch(27.5% 0.035 261);
  --scalar-sidebar-color-1: oklch(93% 0.02 264);
  --scalar-sidebar-color-2: oklch(63.89% 0.028 270.95);
  --scalar-sidebar-border-color: oklch(100% 0 0 / 10%);
  --scalar-sidebar-item-hover-color: oklch(100% 0 none);
  --scalar-sidebar-item-hover-background: oklch(100% 0 0 / 6%);
  --scalar-sidebar-item-active-background: oklch(66.87% 0.1757 260.55 / 14%);
  --scalar-sidebar-color-active: oklch(75.18% 0.1293 255.59);
  --scalar-sidebar-search-background: oklch(100% 0 0 / 6%);
  --scalar-sidebar-search-border-color: oklch(100% 0 0 / 18%);
  --scalar-sidebar-search-color: oklch(63.89% 0.028 270.95);
}

/* Tag group headers injected into the Scalar sidebar.
   Styled to match Scalar's own tag buttons. */
.cci-tag-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem;
  font-size: var(--scalar-font-size-3, 0.875rem);
  font-weight: 600;
  font-family: var(--scalar-font);
  color: var(--scalar-sidebar-color-2, #5a6b8a);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 0.25rem;
}
.cci-tag-group:hover {
  background: var(--scalar-sidebar-item-hover-background);
  color: var(--scalar-sidebar-item-hover-color, var(--scalar-sidebar-color-1));
}
.cci-tag-group__chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
  opacity: 0.6;
  transform: rotate(-90deg);
}
.cci-tag-group--expanded .cci-tag-group__chevron {
  transform: rotate(0deg);
}
/* Indent group members with Scalar's sub-menu line style. */
[data-cci-group] {
  margin-left: 0.75rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--scalar-sidebar-border-color, rgba(0,0,0,0.1));
}

/* The no-JS reference. Only ever seen by a client that does not run the
   inline script below, so it needs to be legible on its own and nothing
   more: Scalar's variables are not loaded at this point, and a browser
   does not darken a page's background for prefers-color-scheme on its
   own, so there is no dark variant to match. */
#nojs {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  color: #1a2035;
}
#nojs code,
#nojs pre {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
#nojs pre {
  overflow-x: auto;
  padding: 0.75rem 1rem;
  background: #f0f3fa;
  border-radius: 0.25rem;
}
#nojs h1,
#nojs h2 {
  font-family: "Space Grotesk", Inter, sans-serif;
}
#nojs h2 {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#nojs h3 {
  margin-top: 2rem;
}
#nojs h4 {
  margin-bottom: 0.25rem;
  color: #5a6b8a;
}
#nojs a {
  color: #1a5fd0;
}

/* Light mode — CircleCI CLI light palette. */
.light-mode {
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f0f3fa;
  --scalar-background-3: #e6ebf5;
  --scalar-background-accent: rgba(26, 95, 208, 0.08);

  --scalar-color-1: #1a2035;
  --scalar-color-2: #2b3757;
  --scalar-color-3: #5a6b8a;
  --scalar-color-accent: #1a5fd0;

  --scalar-border-color: rgba(0, 0, 0, 0.1);

  --scalar-sidebar-background-1: #f0f3fa;
  --scalar-sidebar-color-1: #1a2035;
  --scalar-sidebar-color-2: #5a6b8a;
  --scalar-sidebar-border-color: rgba(0, 0, 0, 0.1);
  --scalar-sidebar-item-hover-color: #1a2035;
  --scalar-sidebar-item-hover-background: rgba(26, 32, 53, 0.06);
  --scalar-sidebar-item-active-background: rgba(26, 95, 208, 0.1);
  --scalar-sidebar-color-active: #0b47ab;
  --scalar-sidebar-search-background: rgba(26, 32, 53, 0.04);
  --scalar-sidebar-search-border-color: rgba(0, 0, 0, 0.16);
  --scalar-sidebar-search-color: #5a6b8a;
}