@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap");

/* ============================================================
   T:0 — brand theme for Scalar docs
   Brand: Die Grotesk A (t0.ai), Geist Mono, T:0 green #09E799
   ============================================================ */

@font-face {
  font-family: "Die Grotesk A";
  src: url("https://cdn.prod.website-files.com/6a21dc17c35b919d495b0ebf/6a317a0a3979b83162387e2c_die-grotesk-a-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Die Grotesk A";
  src: url("https://cdn.prod.website-files.com/6a21dc17c35b919d495b0ebf/6a317a0921d07bdf306a11bb_die-grotesk-a-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Die Grotesk A";
  src: url("https://cdn.prod.website-files.com/6a21dc17c35b919d495b0ebf/6a317a09755c33cac6112aba_die-grotesk-a-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Die Grotesk A";
  src: url("https://cdn.prod.website-files.com/6a21dc17c35b919d495b0ebf/6a317a091bd76270c9a030b5_die-grotesk-a-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --t0-green: #09e799;
  --t0-green-ink: #046b47;   /* accessible green for text on light */
  --t0-green-soft: #d5ffcd;
  --t0-ink: #000000;
  --t0-ink-2: #111111;
  --t0-muted: #6c6c6c;
  --t0-surface: #f5f4f0;     /* t0.ai warm off-white */
  --t0-border: #e9e8e4;
  --t0-subtle: #9a9a9a;
  --t0-sans: "Die Grotesk A", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --t0-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- Scalar design tokens ---------- */
.scalar-app,
body {
  --scalar-font: var(--t0-sans);
  --scalar-font-code: var(--t0-mono);
}

.light-mode {
  --scalar-color-accent: var(--t0-green-ink);
  --scalar-background-accent: rgba(9, 231, 153, 0.16);
  --scalar-color-1: var(--t0-ink);
  --scalar-color-2: #4a4a4a;
  --scalar-color-3: var(--t0-muted);
  --scalar-border-color: var(--t0-border);
  --scalar-background-2: var(--t0-surface);
  --scalar-button-1: var(--t0-ink);
  --scalar-button-1-color: #ffffff;
  --scalar-button-1-hover: #2b2b2b;
}

.dark-mode {
  --scalar-color-accent: var(--t0-green);
  --scalar-background-accent: rgba(9, 231, 153, 0.14);
  --scalar-button-1: var(--t0-green);
  --scalar-button-1-color: #04120c;
  --scalar-button-1-hover: #2ff0ac;
}

/* ---------- Header: white chrome, matching t0.ai ---------- */
.header.t-header,
.tabs.tabs-header {
  background: #ffffff !important;
  border-color: var(--t0-border) !important;
  color: var(--t0-ink) !important;
}

.header.t-header .link,
.tabs.tabs-header .link {
  color: var(--t0-ink) !important;
  font-weight: 500;
}

.header.t-header .link:hover,
.tabs.tabs-header .link:hover {
  color: var(--t0-green-ink) !important;
}

.header.t-header .link-active,
.tabs.tabs-header .link-active {
  color: var(--t0-ink) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--t0-green);
}

/* A header link with `style: "button"` renders as a filled pill. Scalar
   fills it from its own button token, which our link rule was painting
   black-on-black — give it the t0.ai CTA treatment instead. */
.header.t-header .navigation a[class*="font-bol"],
.header.t-header .navigation a.px-3 {
  background-color: var(--t0-green) !important;
  color: #000000 !important;
  border: 1px solid transparent;
  border-radius: 5.4px !important;
  font-weight: 500 !important;
  transition: background-color 0.2s, border-color 0.2s;
}

.header.t-header .navigation a[class*="font-bol"]:hover,
.header.t-header .navigation a.px-3:hover {
  background-color: rgba(9, 231, 153, 0.5) !important;
  border-color: #000000;
  color: #000000 !important;
}

/* The T:0 mark is black artwork — it sits on white as-is. */
.header.t-header img[src*="t0-logo"] {
  height: 18px;
}

.header.t-header .search {
  background: var(--t0-surface) !important;
  border-color: var(--t0-border) !important;
  color: var(--t0-muted) !important;
}

.header.t-header .search:hover {
  color: var(--t0-ink) !important;
  border-color: var(--t0-green) !important;
}

.header.t-header .search svg,
.header.t-header .search span,
.header.t-header .search kbd {
  color: currentColor !important;
}

.header.t-header .search [class*="uppercase"] {
  background: #ffffff !important;
  border-color: var(--t0-border) !important;
  color: var(--t0-subtle) !important;
}

/* Dark mode keeps Scalar's own dark chrome, with the brand border. */
.dark-mode .header.t-header,
.dark-mode .tabs.tabs-header {
  background: #0a0a0a !important;
  border-color: #1f1f1f !important;
  color: #ffffff !important;
}

.dark-mode .header.t-header .link,
.dark-mode .tabs.tabs-header .link {
  color: #e0e0e0 !important;
}

.dark-mode .header.t-header .link:hover {
  color: var(--t0-green) !important;
}

.dark-mode .header.t-header img[src*="t0-logo"] {
  filter: invert(1);
}

.dark-mode .header.t-header .search {
  background: #141414 !important;
  border-color: #262626 !important;
  color: #b8b8b8 !important;
}

/* ---------- Typography ---------- */
.t-editor__page-title h1,
.t-editor h1,
.t-editor h2,
.t-editor h3 {
  letter-spacing: -0.02em;
  font-weight: 500;
}

.t-editor h2 {
  padding-top: 0.4em;
}

/* ---------- Callouts ---------- */
.t-editor blockquote,
[class*="callout"] {
  border-radius: 8px;
}

/* ---------- Tables ---------- */
.t-editor table th {
  background: var(--t0-surface);
  font-weight: 500;
}

/* ---------- Landing page host: let index.html run full-bleed ---------- */
.t-editor:has(.t0-home) {
  padding: 0 !important;
  --scalar-container-width: 100% !important;
}

/* ============================================================
   Prose overrides — applied after inspecting the rendered DOM
   ============================================================ */

/* Scalar renders body copy under `.t-prose` / `.markdown`, whose link
   color resolves from `--font-color`, not the accent token. Set the link
   colors explicitly so links read as T:0 green rather than plain black. */
.scalar-app .markdown a,
.t-prose a {
  color: var(--t0-green-ink);
  text-decoration-color: rgba(9, 231, 153, 0.5);
  text-underline-offset: 2px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.scalar-app .markdown a:hover,
.t-prose a:hover {
  color: var(--t0-ink);
  text-decoration-color: var(--t0-green);
}

.dark-mode .scalar-app .markdown a,
.dark-mode .t-prose a {
  color: var(--t0-green);
}

.dark-mode .scalar-app .markdown a:hover,
.dark-mode .t-prose a:hover {
  color: #ffffff;
}

/* Card links sit inside their own surface — keep them neutral until hover. */
.t-editor__card .markdown a,
.t-editor__card a {
  color: var(--t0-ink);
  text-decoration: none;
}

.t-editor__card a:hover {
  color: var(--t0-green-ink);
}

.dark-mode .t-editor__card a { color: #f2f2f2; }

/* Card titles pick up the brand green icon tint. */
.t-editor__card .card-content__title svg {
  color: var(--t0-green-ink);
}

.dark-mode .t-editor__card .card-content__title svg {
  color: var(--t0-green);
}