/* Orpheus API docs — the wedops brand on Scalar. Two inks, one paper (see site/brand.css). */

:root {
  --paper: #f3efe4;
  --ink: #1a1a1a;
  --ink-1: #0078bf;
  --ink-2: #ff6c2f;
  --on-ink: #ffffff;
  --mute: #6e6a60;
  --overprint: multiply;
  --grain: #000;
  --font-display: 'Rubik Mono One', 'Courier New', monospace;
  --font-text: 'Work Sans', system-ui, sans-serif;

  --scalar-radius: 0px;
  --scalar-font: var(--font-text);
  --scalar-font-code: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
  --scalar-bold: 800;
  --scalar-semibold: 800;
  --scalar-regular: 500;
  --scalar-font-medium: 800;
  --scalar-font-bold: 800;
  --scalar-link-font-weight: 800;
  --scalar-text-decoration: none;
  --scalar-text-decoration-hover: underline;
}

.dark-mode {
  --paper: #0b2a45;
  --ink: #f3efe4;
  --ink-1: #ff6c2f;
  --ink-2: #f3efe4;
  --on-ink: #0b2a45;
  --mute: #8fa3b8;
  --overprint: screen;
  --grain: #fff;
}

/* paper: off-white stock, blue + orange ink */
.light-mode {
  --scalar-color-1: var(--ink);
  --scalar-color-2: #4a4740;
  --scalar-color-3: var(--mute);
  --scalar-color-accent: var(--ink-1);
  --scalar-background-1: var(--paper);
  --scalar-background-2: #ebe6d8;
  --scalar-background-3: #e1dbcb;
  --scalar-background-accent: rgba(0, 120, 191, 0.1);
  --scalar-border-color: rgba(26, 26, 26, 0.22);
  --scalar-button-1: var(--ink-1);
  --scalar-button-1-hover: #0068a8;
  --scalar-button-1-color: var(--on-ink);
  --scalar-color-blue: #0078bf;
  --scalar-color-orange: #ff6c2f;
  --scalar-color-green: #1f7a4d;
  --scalar-color-red: #c8321e;
  --scalar-color-yellow: #b8860b;
  --scalar-color-purple: #0078bf;
  --scalar-color-query: #0078bf;
  --scalar-scrollbar-color: rgba(0, 0, 0, 0.18);
  --scalar-scrollbar-color-active: rgba(0, 0, 0, 0.36);
}

/* blue paper: the blue becomes the stock. orange + cream ink. */
.dark-mode {
  --scalar-color-1: var(--ink);
  --scalar-color-2: #d5d0c2;
  --scalar-color-3: var(--mute);
  --scalar-color-accent: var(--ink-1);
  --scalar-background-1: var(--paper);
  --scalar-background-2: #0f3352;
  --scalar-background-3: #143c5f;
  --scalar-background-accent: rgba(255, 108, 47, 0.14);
  --scalar-border-color: rgba(243, 239, 228, 0.22);
  --scalar-button-1: var(--ink-1);
  --scalar-button-1-hover: #ff8352;
  --scalar-button-1-color: var(--on-ink);
  --scalar-color-blue: #f3efe4;
  --scalar-color-orange: #ff6c2f;
  --scalar-color-green: #6fd3a0;
  --scalar-color-red: #ff7a68;
  --scalar-color-yellow: #ffd166;
  --scalar-color-purple: #f3efe4;
  --scalar-color-query: #f3efe4;
  --scalar-scrollbar-color: rgba(255, 255, 255, 0.18);
  --scalar-scrollbar-color-active: rgba(255, 255, 255, 0.36);
}

/* sidebar: same paper, structure in ink-1 */
.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: var(--scalar-background-1);
  --scalar-sidebar-color-1: var(--scalar-color-1);
  --scalar-sidebar-color-2: var(--scalar-color-2);
  --scalar-sidebar-color-active: var(--ink-1);
  --scalar-sidebar-item-hover-color: var(--ink-1);
  --scalar-sidebar-item-hover-background: transparent;
  --scalar-sidebar-item-active-background: var(--scalar-background-accent);
  --scalar-sidebar-border-color: var(--scalar-border-color);
  --scalar-sidebar-search-background: transparent;
  --scalar-sidebar-search-border-color: 3px dotted var(--ink-1);
  --scalar-sidebar-search-color: var(--scalar-color-3);
}

/* the paper grain: a fine dot screen over everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: radial-gradient(var(--grain) 0.6px, transparent 0.7px);
  background-size: 3px 3px;
  mix-blend-mode: var(--overprint);
  z-index: 2147483647;
}

body {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* display type: the flyer headline, printed twice */
h1.section-header-label,
h1.t-editor__heading,
.t-editor__page-title h1,
.markdown h1 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--ink-1) !important;
  text-shadow: 0.06em 0.06em 0 var(--ink-2);
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
}
h2.section-header-label,
h2.t-editor__heading,
.markdown h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  font-size: 1.6rem !important;
  border: 0;
}
h3.section-header-label,
.markdown h3,
.markdown h4,
.section-content h3:not(.section-header-label) {
  font-family: var(--font-text) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}
h3.section-header-label {
  font-size: 1.15rem !important;
}

/* labels: sidebar groups, tags, buttons — slapped on, uppercase, heavy */
.t-doc__sidebar [class~='group/group-button'] > button,
.t-doc__sidebar [class~='group/group-button'] > a,
.t-doc__sidebar .sidebar-group-title,
.t-doc__sidebar .sidebar-heading {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 0.8rem;
}
.scalar-button,
button.scalar-button {
  border-radius: 0 !important;
}
.scalar-button-solid,
.scalar-button-outlined {
  font-weight: 800 !important;
  text-transform: uppercase;
}
.scalar-button-solid {
  box-shadow: 4px 4px 0 var(--ink-2);
  transition: transform 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.scalar-button-solid:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink-2);
}
.badge,
.rounded,
.rounded-2xl,
.rounded-lg,
.rounded-md,
.rounded-xl {
  border-radius: 0 !important;
}
.badge {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.7rem;
  border-color: var(--ink-1);
  color: var(--ink-1);
}

/* rules: fat ink lines instead of hairlines where structure matters */
header.t-header,
.t-doc__header,
.references-header {
  border-bottom: 4px solid var(--ink-1) !important;
}
.t-header__nav a,
.t-header__nav button {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}
.t-header__nav a:last-of-type {
  color: var(--ink-2);
}
.t-header .logo {
  height: 26px;
  width: auto;
}
.t-doc__toc .header,
.page-header {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.t-doc__sidebar {
  border-right: 3px dotted var(--ink-1) !important;
}

/* cards and code: ink boxes on paper, no radius */
.scalar-card,
.scalar-codeblock-pre,
.markdown pre,
.scalar-card-header,
.markdown table,
.markdown blockquote {
  border-radius: 0 !important;
}
.markdown table th {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.8rem;
  border-bottom: 3px dotted var(--ink-1) !important;
}
.markdown blockquote {
  border-left: 4px solid var(--ink-2);
  font-weight: 500;
}
.markdown a,
.t-editor__page-link {
  border-bottom: 3px solid var(--ink-2);
  text-decoration: none !important;
}
.markdown a:hover {
  border-color: var(--ink-1);
}

/* http method badges keep the two inks */
.sidebar-heading-type,
.scalar-api-reference .http-method,
[class*='http-method'] {
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 0;
}

/* logo sizing */
.t-doc__header img,
.t-doc__sidebar-logo img,
.sidebar-logo img,
img[alt='Orpheus'] {
  height: 26px;
  width: auto;
}

/* footer: the site's foot */
.orpheus-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 4px solid var(--ink-1);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
}
.orpheus-foot a {
  color: var(--ink-2);
}