@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

/* Netevia Figma style guide */
:root {
  --netevia-primary: #187ac9;
  --netevia-secondary: #023047;
  --netevia-dark-grey: #3b3e43;
  --netevia-white: #ffffff;
  /* Was a flat #444444 — too close to --netevia-dark-grey (#3b3e43, only
     0-9 apart per channel, worse in blue) and a hue mismatch with the cool
     blue-gray undertone of --netevia-dark-grey/#2f3236. This tint follows
     the same R<G<B slope so background-2 surfaces (table headers, the
     search box, sidebar hover) read as a clearly distinct raised surface
     instead of blending into the page. */
  --netevia-surface-dark: #4b4e53;
  --netevia-text: rgba(0, 0, 0, 0.87);
  --netevia-text-muted: rgba(0, 0, 0, 0.6);
  --netevia-icon: rgba(0, 0, 0, 0.56);
  --netevia-font: "Noto Sans", ui-sans-serif, system-ui, sans-serif;

  /* Dark-mode-safe tint of --netevia-primary (same hue, lifted lightness so
     accent text/badges clear 4.5:1 on the dark surfaces below — the same
     approach already used for --scalar-link-color in .dark-mode). */
  --netevia-primary-tint: #7eb6e4;

  /* Semantic status colors, extending the single-accent palette so HTTP
     method badges, required/optional field markers, code syntax
     highlighting, and alert callouts stay legible. Scalar ships defaults
     for these, but they were never checked against Netevia's custom
     backgrounds — several fail WCAG AA (e.g. default yellow is 1.75:1 on
     white, default red is 2.39:1 on the dark surface). Each pair below
     keeps the original hue/saturation and only shifts lightness: darker
     for light backgrounds, lighter for dark ones, until it clears 4.5:1
     against every background-1/2/3 surface in that mode. */
  --netevia-success: #007d32;
  --netevia-warning: #c04200;
  --netevia-caution: #85690b;
  --netevia-danger: #d61a18;
  --netevia-info: #5203d1;

  --netevia-success-dark: #08c987;
  --netevia-warning-dark: #ff965b;
  --netevia-caution-dark: #ffc90d;
  --netevia-danger-dark: #ff9194;
  --netevia-info-dark: #bda2fa;

  --scalar-font: var(--netevia-font);
  --scalar-radius: 4px;
  --scalar-regular: 400;
  --scalar-semibold: 500;
  --scalar-font-medium: 500;
  --scalar-heading-1: 24px;
  --scalar-heading-2: 20px;
  --scalar-heading-3: 16px;
  --scalar-heading-4: 16px;
  --scalar-paragraph: 16px;
  --scalar-small: 14px;
  --scalar-mini: 12px;
  --scalar-micro: 12px;
  --scalar-page-description: 16px;
}

.light-mode {
  color-scheme: light;
  --netevia-icon: rgba(0, 0, 0, 0.56);
  /* background-2/-3 were only 6-8 RGB points off white — background-2 in
     particular is the fallback for the table header, search box, and
     sidebar hover backgrounds, so all three read as barely-there. Widened
     the steps so each surface is clearly distinguishable from white and
     from each other. */
  --scalar-background-1: var(--netevia-white);
  --scalar-background-2: #f1f3f5;
  --scalar-background-3: #dfe3e6;
  --scalar-background-accent: color-mix(in srgb, var(--netevia-primary) 10%, transparent);

  --scalar-color-1: var(--netevia-text);
  --scalar-color-2: var(--netevia-text-muted);
  --scalar-color-3: var(--netevia-icon);
  --scalar-color-accent: var(--netevia-primary);
  --scalar-color-blue: var(--netevia-primary);

  --scalar-color-green: var(--netevia-success);
  --scalar-color-orange: var(--netevia-warning);
  --scalar-color-yellow: var(--netevia-caution);
  --scalar-color-red: var(--netevia-danger);
  --scalar-color-purple: var(--netevia-info);

  --scalar-border-color: rgba(59, 62, 67, 0.12);
  --scalar-link-color: var(--netevia-primary);
  --scalar-link-color-hover: var(--netevia-secondary);

  --scalar-button-1: var(--netevia-primary);
  --scalar-button-1-hover: var(--netevia-secondary);
  --scalar-button-1-color: var(--netevia-white);

  --scalar-sidebar-item-active-background: color-mix(in srgb, var(--netevia-primary) 10%, transparent);
  --scalar-sidebar-color-active: var(--netevia-primary);
  --scalar-sidebar-indent-border-active: var(--netevia-primary);
}

.dark-mode {
  color-scheme: dark;
  --netevia-icon: rgba(255, 255, 255, 0.56);
  --scalar-background-1: var(--netevia-dark-grey);
  --scalar-background-2: var(--netevia-surface-dark);
  --scalar-background-3: #2f3236;
  --scalar-background-accent: color-mix(in srgb, var(--netevia-primary) 16%, transparent);

  --scalar-color-1: rgba(255, 255, 255, 0.87);
  --scalar-color-2: rgba(255, 255, 255, 0.6);
  --scalar-color-3: var(--netevia-icon);
  /* var(--netevia-primary) is only 2.2-2.4:1 on these dark surfaces (fails
     WCAG AA); use the same accessible tint already defined for the link
     color below instead of the raw brand blue. */
  --scalar-color-accent: var(--netevia-primary-tint);
  --scalar-color-blue: var(--netevia-primary-tint);

  --scalar-color-green: var(--netevia-success-dark);
  --scalar-color-orange: var(--netevia-warning-dark);
  --scalar-color-yellow: var(--netevia-caution-dark);
  --scalar-color-red: var(--netevia-danger-dark);
  --scalar-color-purple: var(--netevia-info-dark);

  --scalar-border-color: rgba(255, 255, 255, 0.1);
  --scalar-link-color: var(--netevia-primary-tint);
  --scalar-link-color-hover: var(--netevia-white);

  --scalar-button-1: var(--netevia-primary);
  --scalar-button-1-hover: #0b6dbc;
  --scalar-button-1-color: var(--netevia-white);

  --scalar-sidebar-item-active-background: color-mix(in srgb, var(--netevia-primary) 18%, transparent);
  --scalar-sidebar-color-active: var(--netevia-white);
  --scalar-sidebar-indent-border-active: var(--netevia-primary);
}

.light-mode,
.dark-mode {
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
  font-family: var(--netevia-font);
}

/* typography/h5 — page titles */
.scalar-app h1,
article h1 {
  font-family: var(--netevia-font);
  font-weight: 400;
  font-size: 24px;
  line-height: 133.4%;
  letter-spacing: 0;
}

/* typography/h6 */
.scalar-app h2,
article h2 {
  font-family: var(--netevia-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 160%;
  letter-spacing: 0.15px;
  /* A font-size jump alone doesn't read as a section break on a long page —
     a hairline underneath gives each major section a clear start. */
  padding-bottom: 8px;
  border-bottom: 1px solid var(--scalar-border-color);
}

/* typography/subtitle1 */
.scalar-app h3,
article h3 {
  font-family: var(--netevia-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 175%;
  letter-spacing: 0.15px;
}

/* typography/body1 */
.scalar-app p,
article p,
.scalar-app li,
article li {
  font-family: var(--netevia-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.15px;
}

/* table/header */
.scalar-app th,
article th {
  font-family: var(--netevia-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.17px;
}

/* Guide pages render markdown through a different component (t-editor__*)
   than the API Reference's .scalar-app .markdown — it isn't covered by
   --scalar-link-color at all, so links there inherit plain body-text color
   instead of the brand blue. */
.t-editor__anchor {
  color: var(--scalar-link-color);
  text-decoration-color: color-mix(in srgb, var(--scalar-link-color) 30%, transparent);
}

.t-editor__anchor:hover {
  color: var(--scalar-link-color-hover);
}

/* Scalar's own zebra-striping rule mixes background-2 at a flat 50% opacity,
   which lands within a few RGB values of the page background in both modes
   (e.g. ~(64,65,68) stripe vs ~(59,62,67) page in dark mode) — the stripe is
   there but not perceptible. Use the same solid background-2 surface as the
   table header (and the search box / sidebar hover) so the stripe is both
   visible and a consistent surface color across the page. */
.t-editor__table tr:nth-child(2n) {
  background-color: var(--scalar-background-2);
}

/* Collapsible "Prerequisites" / "What you learn" boxes had a hairline
   border with 0 width (effectively none) and a fully transparent header —
   they read as plain text, not a distinct, scannable box. Give the box a
   real border and the header row a filled surface so it reads as a card. */
.t-editor__detail {
  border: 1px solid var(--scalar-border-color);
  border-radius: var(--scalar-radius);
  overflow: hidden;
}

.t-editor__detail-summary {
  background-color: var(--scalar-background-2);
}

.t-editor__detail-marker {
  color: var(--scalar-color-accent);
}

.t-editor__detail-title {
  font-weight: var(--scalar-semibold);
}

/* Dropdown/menu triggers (version picker, "Copy Page" menu, code-sample
   language picker) ship with a transparent or page-matching fill and muted
   text — they read as static labels, not controls. Give each a fill that's
   visibly different from whatever it sits on, plus an accent-colored
   hover/open state so the affordance is obvious. */
/* Specificity note: Scalar's own utility classes (e.g. .bg-b-1) are always
   written as .scalar-app .bg-b-1 — two classes. A bare single-class
   selector here loses that tie even though this stylesheet loads later, so
   every selector below is prefixed with .scalar-app to match. */
.scalar-app .version-selector__button,
.scalar-app .page-copy__button,
.scalar-app .page-copy__icon-button {
  background-color: var(--scalar-background-2);
  border: 1px solid var(--scalar-border-color);
  color: var(--scalar-color-1);
}

/* Sits on a card that's already background-2, so it needs the next step
   down to stand out from its own container. */
.scalar-app .scalar-card-header button {
  background-color: var(--scalar-background-3);
  border-radius: var(--scalar-radius);
  color: var(--scalar-color-1);
}

.scalar-app .version-selector__button:hover,
.scalar-app .version-selector__button[aria-expanded="true"],
.scalar-app .page-copy__button:hover,
.scalar-app .page-copy__icon-button:hover,
.scalar-app .scalar-card-header button:hover {
  color: var(--scalar-color-accent);
}

/* Header wordmark */
header .logo,
header img[src*="netevia-logo"] {
  height: 28px;
  width: auto;
}

/* Icons follow the surrounding text color so they flip with light/dark.
   Phosphor icons are inlined as SVG with fill="currentColor". Data-URI
   SVGs Scalar can't inline render as <img> and resolve currentColor to
   black — invert those in dark mode so they stay visible. */
.t-editor__button svg,
.t-editor__icon svg,
.t-editor__callout svg,
.t-editor__card svg,
.t-editor__detail svg {
  color: inherit;
  fill: currentColor;
}

.dark-mode img[src^="data:image/svg+xml"] {
  filter: invert(1);
}

/* Scalar Button Extensions */

/* Non-interactive scalar-button */
scalar-button[non-interactive],
scalar-button.non-interactive {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.7;
}

/* Override the cursor-pointer class from the component */
scalar-button[non-interactive].cursor-pointer,
scalar-button.non-interactive.cursor-pointer {
  cursor: default !important;
  pointer-events: none !important;
}

/* Disable hover effects */
scalar-button[non-interactive]:hover,
scalar-button.non-interactive:hover,
scalar-button[non-interactive]:active,
scalar-button.non-interactive:active,
scalar-button[non-interactive]:focus,
scalar-button.non-interactive:focus {
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
  background-color: inherit !important;
  border-color: inherit !important;
}

/* Disable pointer events on pseudo-elements */
scalar-button[non-interactive]::before,
scalar-button.non-interactive::before,
scalar-button[non-interactive]::after,
scalar-button.non-interactive::after {
  pointer-events: none !important;
}

/* Disable link navigation for non-interactive buttons */
scalar-button[non-interactive] a,
scalar-button.non-interactive a,
scalar-button[non-interactive] button,
scalar-button.non-interactive button,
scalar-button[non-interactive] [role="button"],
scalar-button.non-interactive [role="button"] {
  pointer-events: none !important;
  cursor: default !important;
}

/* Override any interactive states on the inner component */
scalar-button[non-interactive] > *,
scalar-button.non-interactive > * {
  pointer-events: none !important;
  cursor: default !important;
}