global.css

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

@font-face {
  font-family: 'JetBrains Mono Full';
  src: url('/fonts/JetBrainsMono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Switzer is the home page's sans; self-hosted here so the docs share its body
   voice. The variable face covers the full 100-900 weight range. */
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: oklch(97% 0 0);
  /* Home page design tokens — the single blue accent and its tints/ink. */
  --od-blue: #4971ab;
  --od-blue-dark: #375481;
  --od-blue-tint: #eef2fb;
  --od-blue-line: #e3e8f3;
  --od-ink: #1a1a1a;
}

/* Type roles match the home page: Switzer for prose, JetBrains Mono for
   structure (headings, code, diagrams). */
body {
  font-family: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: -0.025em;
}

pre, code {
  font-family: 'JetBrains Mono', monospace !important;
}

.navbar-link .truncate {
  display: none;
}

.navbar-link + .navbar-link,
.navbar-link + li {
  --tw-space-x-reverse: 0;
  margin-left: 4px !important;
}

.navbar-link a {
  border: 1px solid #d4d4d4;
  border-radius: 9999px;
  padding: 4px 10px;
}

.dark .navbar-link a {
  border-color: #525252;
}

pre.ascii-art {
  font-family: 'JetBrains Mono Full', monospace !important;
  font-variant-ligatures: none !important;
  line-height: 1.32 !important;
  font-size: 0.8125rem;
  overflow-x: auto;
  letter-spacing: 0;
}

/* ============================================================
   D2 — signature components from the home page kit.
   The heavier flourishes (hard offset shadow, warm paper) are
   scoped to light mode; dark-mode styling is still an open call,
   so dark stays maple-default for now. The blue accent + fonts
   (from D1) already carry across both themes.
   ============================================================ */

/* Sidebar group labels adopt the home page's mono uppercase
   "section label" voice. Already blue (text-primary) from D1. */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

/* Cards: square the corners and add the blue accent edge + the
   home page's signature hard offset shadow. */
.card {
  border-radius: 0 !important;
  border-left: 3px solid var(--od-blue) !important;
}
html:not(.dark) .card {
  box-shadow: 6px 6px 0 0 #d6d7d9;
}

/* Callouts: squared, with a type-colored left accent and a light
   offset shadow. maple's per-type background + icon hue is kept so
   note/warning/info stay semantically distinct. */
.callout {
  border-radius: 0 !important;
  border-left-width: 3px !important;
}
html:not(.dark) .callout {
  box-shadow: 4px 4px 0 0 rgba(20, 24, 40, 0.06);
}
.callout[data-callout-type="note"],
.callout[data-callout-type="info"],
.callout[data-callout-type="check"],
.callout[data-callout-type="tip"] {
  border-left-color: var(--od-blue) !important;
}
.callout[data-callout-type="warning"] {
  border-left-color: #c79a00 !important;
}

/* ASCII diagrams: black on white inside a standard gray hairline border (sharp
   corners), so the box-drawing reads with full contrast. */
html:not(.dark) pre.ascii-art {
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1px solid #e4e4e4 !important;
  border-radius: 0;
}

/* Content links: regular weight and body-colored, distinguished by the
   theme's blue bottom-border underline alone — matching opendata.dev. */
a.link {
  font-weight: 400 !important;
}

/* Wide tables scroll horizontally inside [data-table-wrapper], but nothing
   signals the overflow. On the right edge, paint a shadow on the scroll
   container; the background-matched cover gradient scrolls with the content
   (background-attachment: local) and slides over the shadow at the end, so
   it is visible only while more table sits off-screen. The left edge needs
   no shadow: the label column below is frozen, so nothing exits that side. */
:root {
  --od-table-bg: rgb(var(--background-light, 255 255 255));
  --od-table-hairline: rgb(240, 241, 243);
  --od-table-edge: rgba(26, 26, 26, 0.28);
}
.dark {
  --od-table-bg: rgb(var(--background-dark, 15 17 23));
  --od-table-hairline: rgba(39, 40, 42, 0.5);
  --od-table-edge: rgba(255, 255, 255, 0.2);
}
[data-table-wrapper] {
  background:
    linear-gradient(to right, transparent, var(--od-table-bg) 70%)
      right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, var(--od-table-edge), transparent)
      right center / 16px 100% no-repeat scroll;
}

/* Frozen label column: each row's first cell pins to the left edge while
   the rest of the table scrolls beneath it. The pinned cell needs an opaque
   background, and it repaints its row hairline itself (collapsed table
   borders don't travel with sticky cells). The second inset shadow is a
   static hairline on the cell's right edge — it reads as a column divider
   when unscrolled and as the frozen-column boundary while scrolling. */
[data-table-wrapper] :is(th, td):first-child {
  position: sticky;
  left: 0;
  background: var(--od-table-bg);
  box-shadow:
    inset 0 -1px var(--od-table-hairline),
    inset -1px 0 var(--od-table-hairline);
}

/* Angular corners: the theme is square, so code blocks and image frames lose
   their rounding (just the corners — no added border). Mode-agnostic. */
.code-block,
.code-block-background,
[data-name="frame"] {
  border-radius: 0 !important;
}

/* Chrome UI also goes angular: the search bar and the bottom navigation pill
   (and their inner chips/buttons). The dark-mode toggle stays round — a square
   switch reads as broken. */
#search-bar-entry,
#search-bar-entry *,
#search-bar-entry-mobile,
#search-bar-entry-mobile *,
#pagination,
#pagination * {
  border-radius: 0 !important;
}