/**
 * The Independent Pharmacy — Scalar API Reference theme.
 * Built from the brand design tokens (Independent Pharmacy - Design System,
 * assets/tokens.css): navy content/surfaces, Vivid/Pulse Green accent,
 * Savoy Blue secondary, Sofia Pro + Fields typefaces.
 *
 * Loaded with `theme: 'none'` + `withDefaultFonts: false` in index.html so
 * none of Scalar's built-in presets fight these values.
 */

/* Brand fonts — same licensed Adobe Typekit kit (wqm4mko) as the main
   TIP site. Sofia Pro = body, Fields = display/headings. No local font
   files: the licence is a Typekit web-font licence. */
@import url("https://use.typekit.net/wqm4mko.css");

:root {
  --scalar-radius: 8px;
  --scalar-header-height: 0px; /* .t-doc__header isn't rendered (no header content configured) — this was reserving dead space above the dev toolbar */
  --scalar-sidebar-width: 280px;
  --scalar-toc-width: 280px;

  --scalar-font: "sofia-pro", "Sofia Pro", Arial, sans-serif;
  --scalar-font-code:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ── LIGHT MODE ──────────────────────────────────────────────────── */
.light-mode {
  color-scheme: light;

  --scalar-color-1: #303c69; /* content-foundation: headings / primary text */
  --scalar-color-2: #44538d; /* content-quiet: secondary / body text */
  --scalar-color-3: #6a82e0; /* muted tertiary text */
  --scalar-color-disabled: #c0cdfc;
  --scalar-color-ghost: #8fa3ed;
  --scalar-color-accent: #38c297; /* Vivid Green — brand primary action */

  --scalar-background-1: #ffffff;
  --scalar-background-2: #ffffff;
  --scalar-background-3: #e7ecfd; /* layer-highlight: hover fills */
  --scalar-background-4: rgba(48, 60, 105, 0.06);
  --scalar-background-accent: #e6fcf4; /* green-tinted accent wash */

  --scalar-border-color: #e7ecfd;
  --scalar-scrollbar-color: rgba(48, 60, 105, 0.18);
  --scalar-scrollbar-color-active: rgba(48, 60, 105, 0.36);
  --scalar-lifted-brightness: 1;
  --scalar-backdrop-brightness: 1;
  --tip-changelog-rule-color: #e7ecfd; /* matches --scalar-border-color */

  --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
  --scalar-shadow-2: 0px 19px 25px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);

  --scalar-button-1: #38c297; /* primary button fill */
  --scalar-button-1-color: #ffffff;
  --scalar-button-1-hover: #2c785e; /* status-success-dark */

  /* HTTP method / status colors */
  --scalar-color-green: #2c785e; /* success-dark, legible on white */
  --scalar-color-red: #db0f64; /* status-error-default */
  --scalar-color-yellow: #856d32; /* status-warning-dark, legible on white */
  --scalar-color-blue: #526ed6; /* Savoy Blue */
  --scalar-color-orange: #ea580c; /* no brand orange — Scalar default kept */
  --scalar-color-purple: #7c3aed; /* no brand purple — Scalar default kept */
  --scalar-color-query: #2c785e;
}

/* ── DARK MODE ───────────────────────────────────────────────────── */
.dark-mode {
  color-scheme: dark;

  --scalar-color-1: #ffffff; /* content-inverted-foundation */
  --scalar-color-2: #c0cdfc; /* content-inverted-quiet */
  --scalar-color-3: #8fa3ed;
  --scalar-color-disabled: #44538d;
  --scalar-color-ghost: #303c69;
  --scalar-color-accent: #72edc7; /* Pulse Green — brand's dark-bg accent default */

  --scalar-background-1: #000000;
  --scalar-background-2: #121212;
  --scalar-background-3: #1f1f1f;
  --scalar-background-4: rgba(255, 255, 255, 0.06);
  --scalar-background-accent: rgba(114, 237, 199, 0.12);

  --scalar-border-color: rgba(199, 208, 255, 0.12);
  --scalar-scrollbar-color: rgba(255, 255, 255, 0.24);
  --scalar-scrollbar-color-active: rgba(255, 255, 255, 0.48);
  --scalar-lifted-brightness: 1.45;
  --scalar-backdrop-brightness: 0.5;
  --tip-changelog-rule-color: rgba(199, 208, 255, 0.32); /* stronger than --scalar-border-color — visible on #000 */

  --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --scalar-shadow-2: rgba(0, 0, 0, 0.3) 0px 3px 6px, rgba(0, 0, 0, 0.5) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.08);

  --scalar-button-1: #72edc7;
  --scalar-button-1-color: #161c33;
  --scalar-button-1-hover: #38c297;

  /* HTTP method / status colors */
  --scalar-color-green: #38c297;
  --scalar-color-red: #ff4d99; /* Shouty Pink — brand's shared light/dark accent */
  --scalar-color-yellow: #f6c952; /* Zesty Yellow — dark-bg accent */
  --scalar-color-blue: #8fa3ed;
  --scalar-color-orange: #ff8d4d; /* no brand orange — Scalar default kept */
  --scalar-color-purple: #b191f9; /* no brand purple — Scalar default kept */
  --scalar-color-query: #72edc7;
}

.light-mode,
.dark-mode {
  --scalar-border: var(--scalar-border-width) solid var(--scalar-border-color);
}

/* ── SIDEBAR — white in light mode, black in dark mode ──────────── */
.light-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: #ffffff;
  --scalar-sidebar-item-hover-color: #303c69;
  --scalar-sidebar-item-hover-background: #e7ecfd;
  --scalar-sidebar-item-active-background: rgba(56, 194, 151, 0.15);
  --scalar-sidebar-border-color: #e7ecfd;
  --scalar-sidebar-color-1: #303c69;
  --scalar-sidebar-color-2: #44538d;
  --scalar-sidebar-color-active: #38c297;
  --scalar-sidebar-search-background: rgba(48, 60, 105, 0.04);
  --scalar-sidebar-search-border-color: #e7ecfd;
  --scalar-sidebar-search--color: #44538d;
}

.dark-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: #000000;
  --scalar-sidebar-item-hover-color: #ffffff;
  --scalar-sidebar-item-hover-background: #1f1f1f;
  --scalar-sidebar-item-active-background: rgba(114, 237, 199, 0.15);
  --scalar-sidebar-border-color: rgba(255, 255, 255, 0.12);
  --scalar-sidebar-color-1: #ffffff;
  --scalar-sidebar-color-2: #c0cdfc;
  --scalar-sidebar-color-active: #72edc7;
  --scalar-sidebar-search-background: rgba(255, 255, 255, 0.06);
  --scalar-sidebar-search-border-color: rgba(255, 255, 255, 0.12);
  --scalar-sidebar-search--color: #c0cdfc;
}

/* ── TABLE OF CONTENTS ───────────────────────────────────────────── */
.light-mode .t-doc__toc,
.dark-mode .t-doc__toc {
  --table-of-contents-heading-color: var(--scalar-color-1);
  --table-of-contents-section-color: var(--scalar-color-2);
  --table-of-contents-section-color-active: var(--scalar-color-accent);
}

/* ── HEADER — navy, matches the sidebar for a single brand band ──── */
.light-mode .t-doc__header,
.dark-mode .t-doc__header {
  --scalar-header-background-1: #303c69;
  --scalar-header-border-color: #44538d;
  --scalar-header-color-1: #ffffff;
  --scalar-header-color-2: #c0cdfc;
  --scalar-header-background-toggle: #c0cdfc;
  --scalar-header-call-to-action-color: #72edc7;
}

/* ── DEVELOPER TOOLS PANEL — breathing room top and bottom ───────
   Top padding compensates for --scalar-header-height: 0 removing the
   header's reserved space above this toolbar. */
.references-developer-tools {
  padding-top: 16px !important; /* tip-space-100 */
  padding-bottom: 16px !important; /* tip-space-100 */
}

/* ── INTRODUCTION CARD — drop Client Libraries, keep Server/Auth ─
   Scoped to the Introduction page's own card only. Does not affect
   the per-operation client picker on Operation pages. */
.scalar-reference-intro-clients {
  display: none !important;
}

/* ── CHANGELOG HEADING — visually separate from the description ──
   `#### Changelog` (h4) is otherwise unused across the spec, so this
   safely targets only that heading. Scalar hardcodes .markdown h4 to
   1rem (same as body text), so the size needs its own override to
   read as smaller/secondary rather than a fourth heading level. */
.markdown h4 {
  font-size: var(--scalar-mini) !important; /* 13px, below the 16px body text */
  color: var(--scalar-color-2) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 12px;
  border-top: var(--scalar-border-width) solid var(--tip-changelog-rule-color);
}

/* Everything after the Changelog heading (Version subheaders + their
   bullets) reads as small print. Changelog is always the last section
   in a description, so "siblings after h4" only ever matches its own
   content — earlier sections (e.g. Order Item Requirements) are
   untouched since they come before the h4 in document order. */
.markdown h4 ~ p,
.markdown h4 ~ ul {
  font-size: var(--scalar-mini) !important; /* 13px */
  color: var(--scalar-color-2) !important;
  line-height: 1.5;
}

/* Bottom rule — Changelog is always the last section in a description,
   so its final element is always .markdown's last child. */
.markdown h4 ~ :last-child {
  padding-bottom: 12px;
  border-bottom: var(--scalar-border-width) solid var(--tip-changelog-rule-color);
}