/*fern-site-stylesheet*/@font-face {
    font-family: 'Roobert';
    src: url('/_fern-files/vitable-poc.docs.buildwithfern.com/12321cae9944c53e99ef64aa9d8d2eeede3d33afbc8b4f6b998a4332c701252c/assets/fonts/RoobertVF.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roobert';
    src: url('/_fern-files/vitable-poc.docs.buildwithfern.com/7079e350e803c6ace39cbaf0aa703e08327ad48af6aa05748e1deb000dbda770/assets/fonts/RoobertItalicsVF.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roobert';
    src: url('/_fern-files/vitable-poc.docs.buildwithfern.com/12321cae9944c53e99ef64aa9d8d2eeede3d33afbc8b4f6b998a4332c701252c/assets/fonts/RoobertVF.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 24px;
  --font-body: 'Roobert', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Roobert', 'Roobert', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #f5faf9;
  --accent-2: #edf7f4;
  --accent-3: #d9f4ed;
  --accent-4: #c3efe4;
  --accent-5: #ade7d8;
  --accent-6: #93dbc9;
  --accent-7: #75cab6;
  --accent-8: #5bb19e;
  --accent-9: #003c32;
  --accent-10: #1a4f45;
  --accent-11: #177766;
  --accent-12: #023e34;

  --accent-a1: #def8ff40;
  --accent-a2: #0ebfca11;
  --accent-a3: #05cbb325;
  --accent-a4: #03c8a53b;
  --accent-a5: #01bd9551;
  --accent-a6: #01af8a6b;
  --accent-a7: #02a17f8a;
  --accent-a8: #02886da4;
  --accent-a9: #003c32;
  --accent-a10: #003b31e5;
  --accent-a11: #006a58e8;
  --accent-a12: #003c32fd;

  --accent-contrast: #fff;
  --accent-surface: #e9f6f4cc;
  --accent-indicator: #003c32;
  --accent-track: #003c32;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(98.2% 0.0055 177.3);
      --accent-2: oklch(96.8% 0.0107 177.3);
      --accent-3: oklch(94.6% 0.0306 177.3);
      --accent-4: oklch(91.9% 0.0478 177.3);
      --accent-5: oklch(88.4% 0.0627 177.3);
      --accent-6: oklch(83.9% 0.0763 177.3);
      --accent-7: oklch(78% 0.0884 177.3);
      --accent-8: oklch(70.1% 0.0884 177.3);
      --accent-9: oklch(31.9% 0.0589 177.3);
      --accent-10: oklch(39% 0.0589 177.3);
      --accent-11: oklch(51.1% 0.0884 177.3);
      --accent-12: oklch(32.5% 0.0589 177.3);

      --accent-a1: color(display-p3 0.8824 0.9686 1 / 0.25);
      --accent-a2: color(display-p3 0.0157 0.7059 0.7608 / 0.056);
      --accent-a3: color(display-p3 0.0039 0.7294 0.651 / 0.123);
      --accent-a4: color(display-p3 0.0039 0.7216 0.5882 / 0.194);
      --accent-a5: color(display-p3 0.0039 0.6667 0.5137 / 0.269);
      --accent-a6: color(display-p3 0.0039 0.6078 0.4745 / 0.356);
      --accent-a7: color(display-p3 0.0039 0.549 0.4196 / 0.459);
      --accent-a8: color(display-p3 0 0.4471 0.349 / 0.554);
      --accent-a9: color(display-p3 0 0.1608 0.1255 / 0.914);
      --accent-a10: color(display-p3 0 0.1725 0.1373 / 0.838);
      --accent-a11: color(display-p3 0 0.3098 0.2431 / 0.779);
      --accent-a12: color(display-p3 0 0.1608 0.1255 / 0.906);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9216 0.9647 0.9569 / 0.8);
      --accent-indicator: oklch(31.9% 0.0589 177.3);
      --accent-track: oklch(31.9% 0.0589 177.3);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d86;
  --grayscale-track: #8d8d86;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.553 0.553 0.528);
      --grayscale-track: color(display-p3 0.553 0.553 0.528);
    }
  }
}


.dark {
  --accent-1: #0a100f;
  --accent-2: #121b19;
  --accent-3: #162c28;
  --accent-4: #163934;
  --accent-5: #1e4640;
  --accent-6: #29544e;
  --accent-7: #33665e;
  --accent-8: #3d7b72;
  --accent-9: #56b7a9;
  --accent-10: #49ab9e;
  --accent-11: #6ecec0;
  --accent-12: #b8ece3;

  --accent-a1: #00108e02;
  --accent-a2: #a0faf80c;
  --accent-a3: #69feeb1e;
  --accent-a4: #4bfeea2c;
  --accent-a5: #5ffeea3a;
  --accent-a6: #74feee49;
  --accent-a7: #7affec5c;
  --accent-a8: #7afdec73;
  --accent-a9: #76feebb3;
  --accent-a10: #6afeeba6;
  --accent-a11: #88ffeecb;
  --accent-a12: #c7fff5eb;

  --accent-contrast: #fff;
  --accent-surface: #19262480;
  --accent-indicator: #56b7a9;
  --accent-track: #56b7a9;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(16.7% 0.0094 182.9);
      --accent-2: oklch(21.3% 0.0129 182.9);
      --accent-3: oklch(27.2% 0.029 182.9);
      --accent-4: oklch(31.6% 0.0418 182.9);
      --accent-5: oklch(36.2% 0.046 182.9);
      --accent-6: oklch(41.3% 0.0501 182.9);
      --accent-7: oklch(47.3% 0.0566 182.9);
      --accent-8: oklch(53.9% 0.0664 182.9);
      --accent-9: oklch(71.7% 0.0941 182.9);
      --accent-10: oklch(68% 0.0941 182.9);
      --accent-11: oklch(78.9% 0.0941 182.9);
      --accent-12: oklch(90.5% 0.0553 182.9);

      --accent-a1: color(display-p3 0 0.0667 0.8431 / 0.005);
      --accent-a2: color(display-p3 0.7176 0.9843 0.9765 / 0.047);
      --accent-a3: color(display-p3 0.5686 1 0.9608 / 0.113);
      --accent-a4: color(display-p3 0.4941 1 0.9451 / 0.168);
      --accent-a5: color(display-p3 0.5451 1 0.9412 / 0.222);
      --accent-a6: color(display-p3 0.6039 0.9961 0.949 / 0.281);
      --accent-a7: color(display-p3 0.6196 1 0.9373 / 0.356);
      --accent-a8: color(display-p3 0.6196 1 0.9373 / 0.444);
      --accent-a9: color(display-p3 0.6157 1 0.9373 / 0.691);
      --accent-a10: color(display-p3 0.5882 1 0.9373 / 0.641);
      --accent-a11: color(display-p3 0.6549 1 0.9412 / 0.787);
      --accent-a12: color(display-p3 0.8314 1 0.9686 / 0.917);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1098 0.149 0.1412 / 0.5);
      --accent-indicator: oklch(71.7% 0.0941 182.9);
      --accent-track: oklch(71.7% 0.0941 182.9);
    }
  }
}


.dark {
  --grayscale-1: #101211;
  --grayscale-2: #171918;
  --grayscale-3: #202221;
  --grayscale-4: #272a29;
  --grayscale-5: #2e3130;
  --grayscale-6: #373b39;
  --grayscale-7: #444947;
  --grayscale-8: #5b625f;
  --grayscale-9: #63706b;
  --grayscale-10: #717d79;
  --grayscale-11: #adb5b2;
  --grayscale-12: #eceeed;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f0f2f108;
  --grayscale-a3: #f3f5f412;
  --grayscale-a4: #f2fefd1a;
  --grayscale-a5: #f1fbfa22;
  --grayscale-a6: #edfbf42d;
  --grayscale-a7: #edfcf73c;
  --grayscale-a8: #ebfdf657;
  --grayscale-a9: #dffdf266;
  --grayscale-a10: #e5fdf674;
  --grayscale-a11: #f4fefbb0;
  --grayscale-a12: #fdfffeed;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #63706b;
  --grayscale-track: #63706b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.064 0.07 0.067);
      --grayscale-2: color(display-p3 0.092 0.098 0.094);
      --grayscale-3: color(display-p3 0.128 0.135 0.131);
      --grayscale-4: color(display-p3 0.155 0.164 0.159);
      --grayscale-5: color(display-p3 0.183 0.193 0.188);
      --grayscale-6: color(display-p3 0.218 0.23 0.224);
      --grayscale-7: color(display-p3 0.269 0.285 0.277);
      --grayscale-8: color(display-p3 0.362 0.382 0.373);
      --grayscale-9: color(display-p3 0.398 0.438 0.421);
      --grayscale-10: color(display-p3 0.453 0.49 0.474);
      --grayscale-11: color(display-p3 0.685 0.709 0.697);
      --grayscale-12: color(display-p3 0.927 0.933 0.93);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f0f2f108;
      --grayscale-a3: #f3f5f412;
      --grayscale-a4: #f2fefd1a;
      --grayscale-a5: #f1fbfa22;
      --grayscale-a6: #edfbf42d;
      --grayscale-a7: #edfcf73c;
      --grayscale-a8: #ebfdf657;
      --grayscale-a9: #dffdf266;
      --grayscale-a10: #e5fdf674;
      --grayscale-a11: #f4fefbb0;
      --grayscale-a12: #fdfffeed;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.398 0.438 0.421);
      --grayscale-track: color(display-p3 0.398 0.438 0.421);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 60, 50, 1);
  --background: rgba(253, 251, 247, 1);
  --border: rgba(234, 226, 213, 1);
  --sidebar-background: rgba(249, 244, 237, 1);
  --header-background: rgba(249, 244, 237, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fdfbf7;
}

.dark {
  color-scheme: dark;
  --accent: rgba(86, 183, 169, 1);
  --background: rgba(11, 16, 14, 1);
  --border: rgba(35, 48, 41, 1);
  --sidebar-background: rgba(14, 21, 18, 1);
  --header-background: rgba(14, 21, 18, 1);
  --card-background: rgba(19, 27, 22, 1);
  --theme-color: #0b100e;
}

/* ============================================================================
 * Vitable brand system — mapped from the hermes design tokens
 * (hermes/lib/application/design). Deep green + warm cream, Roobert type,
 * generous radii, soft diffuse shadows.
 * ========================================================================== */

:root {
  --vitable-green-900: #003c32;
  --vitable-green-800: #006640;
  --vitable-teal: #56b7a9;
  --vitable-green-300: #cbede5;
  --vitable-green-50: #eef7f6;
  --vitable-cream: #f9f4ed;
  --vitable-cream-deep: #f4eadb;
  --vitable-sand: #eae2d5;
  --vitable-plum: #732e4a;
  --vitable-coral: #f7634c;
  --vitable-gold: #ffd940;
  --vitable-ink: #262626;

  /* Legacy names still referenced by MDX content (Astro-era). */
  --vitable-burgundy: #732e4a;
  --vitable-burgundy-light: #f8f5f7;
  --vitable-green: #003c32;
  --vitable-green-light: #eef7f6;

  /* Radii from ComponentTokens (xs 8 / input 8 / card 16 / pill 100). */
  --vitable-radius-sm: 10px;
  --vitable-radius-md: 14px;
  --vitable-radius-card: 16px;
  --vitable-radius-pill: 100px;

  /* boxShadowCard: blur 60, spread 4, 4% black. */
  --vitable-shadow-card: 0 0 60px 4px rgb(0 0 0 / 0.04);
  --vitable-shadow-card-hover: 0 8px 40px 2px rgb(0 60 50 / 0.1);
}

.dark {
  --vitable-burgundy: #b8638e;
  --vitable-burgundy-light: #241820;
  --vitable-green: #56b7a9;
  --vitable-green-light: #10241f;
  --vitable-shadow-card: 0 0 60px 4px rgb(0 0 0 / 0.35);
  --vitable-shadow-card-hover: 0 8px 40px 2px rgb(86 183 169 / 0.12);
}

/* ── Typography ──────────────────────────────────────────────────────────── */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Roobert headings sit at weight 500 with tight tracking in the brand
 * system (vitable_text_theme.dart) — not the default 600/700 bold. */
h1,
h2,
h3,
h4 {
  font-weight: 500;
  letter-spacing: -0.02em;
}

h1 {
  letter-spacing: -0.025em;
}

::selection {
  background: var(--vitable-green-300);
  color: var(--vitable-green-900);
}

.dark ::selection {
  background: var(--vitable-green-800);
  color: #ffffff;
}

/* ── Header: soft glass over the cream surface ───────────────────────────── */

#fern-header,
.fern-header {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--vitable-cream) 80%, transparent);
}

.dark #fern-header,
.dark .fern-header {
  background: color-mix(in srgb, #0e1512 78%, transparent);
}

.fern-header-search-bar {
  border-radius: var(--vitable-radius-pill);
}

/* Bubble tabs get the full pill treatment. */
.fern-header-tabs a,
.fern-header-tabs button {
  border-radius: var(--vitable-radius-pill);
  transition: background-color 160ms ease, color 160ms ease;
}

/* ── Sidebar: rounded, calm, clearly-stated hierarchy ────────────────────── */

.fern-sidebar-link {
  border-radius: var(--vitable-radius-sm);
  transition: background-color 140ms ease, color 140ms ease;
}

.fern-sidebar-link[data-state="active"],
.fern-sidebar-link[aria-current="page"] {
  font-weight: 500;
}

.fern-sidebar-heading-content {
  letter-spacing: 0.02em;
}

/* ── Cards: hermes boxShadowCard + 16px radius + gentle lift on hover ────── */

.fern-card {
  border-radius: var(--vitable-radius-card);
  box-shadow: var(--vitable-shadow-card);
  transition: box-shadow 200ms ease, transform 200ms ease,
    border-color 200ms ease;
}

.fern-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vitable-shadow-card-hover);
  border-color: var(--vitable-teal);
}
.fern-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--vitable-shadow-card-hover);
  border-color: var(--vitable-teal); outline: none;
}

/* ── Buttons, code, media ────────────────────────────────────────────────── */

.fern-button {
  border-radius: var(--vitable-radius-sm);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

pre {
  border-radius: var(--vitable-radius-md);
}

.fern-mdx-content img,
article img {
  border-radius: var(--vitable-radius-card);
}

/* ── Scrollbars: thin and warm ───────────────────────────────────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--vitable-sand) transparent;
}

.dark * {
  scrollbar-color: #233029 transparent;
}