custom.css

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,400;1,400&display=swap");

@font-face {
  font-family: "PP Neue Montreal";
  src: url("/docs/fonts/PPNeueMontreal-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-mono:
    "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  --radius-interactive-element: 0.125rem;
  --radius-sm: 0.125rem;
  --radius-text-highlight: 0.125rem;
  --radius-md: 0.125rem;
  --radius-menus: 0.125rem;
  --radius-lg: 0.125rem;
  --radius-xl: 0.125rem;
  --radius-full: 9999px;

  --rounded-sm: 0.125rem;
  --rounded: 0.125rem;
  --rounded-md: 0.125rem;
  --rounded-lg: 0.125rem;
  --rounded-xl: 0.125rem;
  --rounded-2xl: 0.125rem;
  --rounded-3xl: 0.125rem;
  --border-radius: 0.125rem;
  font-size: 17px;
}

:where([class*="rounded"]:not(.rounded-none):not(.rounded-full):not([class*="rounded-full"])) {
  border-radius: 0.125rem !important;
}

.rounded-full,
[class*="rounded-full"] {
  border-radius: var(--radius-full) !important;
}

[data-radix-menu-content],
[data-radix-dropdown-menu-content],
[role="menu"][data-side],
[data-component-part="search-modal"],
[data-component-part="search-header"],
[data-component-part="search-list"] {
  border-radius: 0.125rem !important;
}

:is(.dark, [data-theme="dark"]) [data-component-part="search-modal"] {
  box-shadow:
    0 0 0 100vmax rgb(0 0 0 / 60%),
    0 25px 50px -12px rgb(0 0 0 / 70%) !important;
}

@media (prefers-color-scheme: dark) {
  [data-component-part="search-modal"] {
    box-shadow:
      0 0 0 100vmax rgb(0 0 0 / 60%),
      0 25px 50px -12px rgb(0 0 0 / 70%) !important;
  }
}

code,
pre,
kbd,
samp,
[class*="language-"],
[data-component-part="code-block"],
[data-component-part="code-block"] * {
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
}

/* Typography to match flightcontrol ui2 / packages/web ----------------------- */

/* Global + body: PP Neue Montreal
   - letter-spacing 0.02em (--tracking-normal)
   - line-height 1.25 (--leading-base)
   - weight 400, antialiased */
html {
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
p,
li {
  letter-spacing: 0.02em;
}

strong,
b,
.font-semibold {
  font-weight: 600 !important;
}

a {
  font-weight: inherit !important;
}

/* Headings: PP Fragment (Glare Regular), matching the marketing display style
   - weight 400 (Glare Regular)
   - letter-spacing 0
   - line-height 1.1 (--leading-display) */
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

h1,
h4,
h5,
h6 {
  line-height: 1.2 !important;
}
h2,
h3 {
  line-height: 1.5 !important;
}

h3 + h4 {
  margin-top: 1.25rem !important;
}

/* Headings stay at weight 400 even when they carry the font-semibold utility */
h1.font-semibold,
h2.font-semibold,
h3.font-semibold,
h4.font-semibold,
h5.font-semibold,
h6.font-semibold {
  font-weight: 400 !important;
}

/* Keep the descriptive changelog title for metadata while shortening its visible heading. */
html[data-current-path="/changelog"] #page-title {
  font-size: 0 !important;
}

html[data-current-path="/changelog"] #page-title::before {
  content: "Product updates";
  font-size: 1.875rem;
}

html[data-current-path="/changelog"] #content-area > * {
  max-width: 41.4rem;
}

@media (min-width: 640px) {
  html[data-current-path="/changelog"] #page-title::before {
    font-size: 2.25rem;
  }
}

@media (min-width: 1536px) {
  html[data-current-path="/changelog"] #content-area > * {
    max-width: 48.3rem;
  }
}

/* Sidebar group titles are <h3> elements but should stay semibold,
   exempt them from the heading weight reset above */
.sidebar-group-header h3,
h3.sidebar-title {
  font-weight: 600 !important;
}

/* Tighten sidebar item spacing to match maple:
   mint uses leading-6 (1.5rem) and 1px gaps between items,
   maple used text-sm's default 1.25rem line-height with no gaps */
#navigation-items {
  line-height: 1.25rem;
}

#navigation-items .sidebar-group > * + * {
  margin-top: 0 !important;
}

/* Card titles */
[data-component-part="card-title"] {
  font-size: 1.2rem !important;
}

/* Space between card title and body */
[data-component-part="card-content"] {
  margin-top: 0.5rem !important;
}

/* Keep code free of the body letter-spacing for legibility */
code,
pre,
kbd,
samp,
[class*="language-"],
[data-component-part="code-block"],
[data-component-part="code-block"] * {
  letter-spacing: normal;
}

/* Full-width layout: remove the centered max-width container.
   The body wrapper uses peer-variant classes (e.g. peer-[.is-not-custom]:max-w-8xl),
   so match any class containing max-w-8xl */
.max-w-8xl,
[class*="max-w-8xl"] {
  max-width: 100% !important;
}

/* Constrain and center the article column like the old maple theme
   (maple used max-w-xl / 2xl:max-w-2xl on #content-area).
   Mint's #content-area carries the sidebar offset padding, so cap its
   children instead of the container itself */
#content-area > * {
  width: 100%;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1536px) {
  #content-area > * {
    max-width: 42rem;
  }
}

/* Code block highlighted lines: Mintlify paints .line-highlight (background,
   left border, and ::before/::after gutter fills) from the --primary-light
   variable with !important, so recolor the variable itself inside code blocks.
   Purple (violet-500 #8B5CF6) matches the module diagrams and avoids reading
   as a "removed line" diff tint. */
[data-component-part="code-block-root"],
.code-block {
  --primary-light: 139 92 246; /* #8B5CF6 */
}

:is(.dark, [data-theme="dark"]) [data-component-part="code-block-root"],
:is(.dark, [data-theme="dark"]) .code-block {
  --primary-light: 167 139 250; /* #A78BFA */
}

a[href="https://www.mintlify.com/?utm_campaign=poweredBy&utm_medium=referral&utm_source=ravion-b90c0359"],
a[href*="mintlify.com"][href*="poweredBy"],
a[href*="mintlify.com"][href*="powered-by"],
a[aria-label*="Mintlify"],
a[title*="Mintlify"] {
  display: none !important;
}

/* Prevent the logged-out navbar state from painting before auth detection runs. */
html:not([data-ravion-auth-state])
  :is(.navbar-link, navbar-link):has(
    a[href="https://app.ravion.com/signup"],
    a[href="https://cal.com/team/ravion/demo"]
  ) {
  visibility: hidden;
}

/* Dark mode palette from the Ravion design system (flightcontrol packages/ui2/tailwind.css).
   Mintlify derives its gray ramp from the primary colour and uses stock Tailwind hues for
   callouts, so re-point both at the design-system anchors composited over the app base. */
:root {
  --rvn-base: #0f0004;
  --rvn-anchor-neutral: #fdddc9;
  --rvn-anchor-orange: #fe6104;
  --rvn-anchor-purple: #b287ff;
  --rvn-anchor-green: #88d18a;
  --rvn-anchor-red: #ff4d61;
}

/* Mintlify reads these as space-separated RGB channels, so the neutral ramp
   (anchor mixed over the base at the ui2 step opacities) is precomputed. */
html.dark {
  --gray-50: 253 221 201; /* neutral-12 */
  --gray-100: 253 221 201; /* neutral-12 */
  --gray-200: 253 221 201; /* neutral-12 */
  --gray-300: 224 194 177; /* between neutral-11 and 12 */
  --gray-400: 196 168 154; /* neutral-11 */
  --gray-500: 136 113 104; /* neutral-10 */
  --gray-600: 113 91 85; /* neutral-9 */
  --gray-700: 86 66 63; /* neutral-8 */
  --gray-800: 51 33 34; /* neutral-7 */
  --gray-900: 39 22 24; /* neutral-6 */
  --gray-950: 27 11 14;
  --color-white: var(--rvn-anchor-neutral);
}

html.dark [data-component-part="code-block-root"],
html.dark .dark\:bg-codeblock {
  background-color: color-mix(in srgb, var(--rvn-anchor-neutral) 5%, var(--rvn-base)) !important;
}

/* Callouts follow the ui2 Alert: hue-8 border and hue-12 content, over a faint hue tint. */
html.dark [data-callout-type] {
  --rvn-callout: var(--rvn-anchor-purple);
  background-color: color-mix(in srgb, var(--rvn-callout) 5%, var(--rvn-base)) !important;
  border-color: color-mix(in srgb, var(--rvn-callout) 30%, var(--rvn-base)) !important;
}

html.dark [data-callout-type="warning"] {
  --rvn-callout: var(--rvn-anchor-orange);
}

html.dark :is([data-callout-type="tip"], [data-callout-type="check"]) {
  --rvn-callout: var(--rvn-anchor-green);
}

html.dark :is([data-callout-type="danger"], [data-callout-type="error"]) {
  --rvn-callout: var(--rvn-anchor-red);
}

html.dark [data-callout-type] > *,
html.dark [data-callout-type] svg {
  color: var(--rvn-callout) !important;
}

/* Mermaid's built-in dark theme paints clusters, default nodes, edges, and edge
   labels in cool grays. Its rules are ID-scoped, hence !important; classDef
   rules are ID-scoped !important too, so authored node colours still win. */
html.dark svg[id^="mermaid"] :is(.node rect, .node polygon, .node circle, .node path) {
  fill: color-mix(in srgb, var(--rvn-anchor-neutral) 10%, var(--rvn-base)) !important;
  stroke: color-mix(in srgb, var(--rvn-anchor-neutral) 30%, var(--rvn-base)) !important;
}

html.dark svg[id^="mermaid"] .cluster rect {
  fill: color-mix(in srgb, var(--rvn-anchor-neutral) 5%, var(--rvn-base)) !important;
  stroke: color-mix(in srgb, var(--rvn-anchor-neutral) 15%, var(--rvn-base)) !important;
}

html.dark svg[id^="mermaid"] :is(.cluster text, .cluster-label, .cluster-label *) {
  fill: var(--rvn-anchor-neutral) !important;
  color: var(--rvn-anchor-neutral) !important;
}

html.dark svg[id^="mermaid"] :is(.flowchart-link, .edgePath path, .transition):not([style*="stroke"]) {
  stroke: color-mix(in srgb, var(--rvn-anchor-neutral) 51%, var(--rvn-base)) !important;
}

/* Faded edges from the generated module catalog (linkStyle stroke:#CBD5E1). */
html.dark svg[id^="mermaid"] :is(.flowchart-link, .edgePath path)[style*="CBD5E1" i] {
  stroke: color-mix(in srgb, var(--rvn-anchor-neutral) 20%, var(--rvn-base)) !important;
}

html.dark svg[id^="mermaid"] :is(.arrowMarkerPath, marker path) {
  fill: color-mix(in srgb, var(--rvn-anchor-neutral) 51%, var(--rvn-base)) !important;
  stroke: color-mix(in srgb, var(--rvn-anchor-neutral) 51%, var(--rvn-base)) !important;
}

html.dark svg[id^="mermaid"] :is(.edgeLabel, .edgeLabel p, .edgeLabel span, .labelBkg) {
  background-color: var(--rvn-base) !important;
  color: color-mix(in srgb, var(--rvn-anchor-neutral) 76%, var(--rvn-base)) !important;
}

html.dark svg[id^="mermaid"] .edgeLabel rect {
  fill: var(--rvn-base) !important;
  opacity: 1 !important;
}