/**
 * @dobase/ui/kit.css — the app-side component classes.
 *
 * One semantic vocabulary styled ENTIRELY by the app's tokens (var(--app-*),
 * from the theme in src/app.ts) — restyling the app restyles every class;
 * markup never changes for a theme change. The platform stylesheet
 * (dobase.css) carries this file; an app without a theme imports it first in
 * main.ts. Every dial token falls back to the starter's sizes, and radii
 * to `--app-radius`. Such an app keeps its colors and radii. It loses a
 * custom `--app-space`, which the kit no longer reads.
 *
 * Specificity: every selector here includes a class (`:is()` where a list
 * needs a pseudo-class). Your class rule wins when it is as specific and
 * comes later: to change `.table th`, write `th.num`, not `.num`. A plain
 * element rule never changes a component: `a { color: var(--app-accent) }`
 * in app.css must not give `<a class="btn btn-primary">` the same color as
 * its background. Zero-specificity selectors allowed exactly that bug (the
 * invisible yellow button, Sep 2026).
 *
 * The vocabulary (variants are enumerated modifiers — pick from these, don't
 * invent):
 *
 *   .btn        button; variants .btn-primary .btn-danger .btn-ghost,
 *               sizes .btn-sm .btn-lg, .btn-block (full width);
 *               aria-busy='true' shows a spinner and keeps the label
 *   .input .select .textarea   form controls (16px on touch — no iOS zoom)
 *   .field      label + control + .field-hint / .field-error
 *   .card       surface box; .card-title for its heading
 *   .band       a section in the brand color (--app-field) with its ink;
 *               inside, .btn-primary fills with the ink, and .muted,
 *               .field-hint and .btn-ghost take the ink
 *   .badge      inline label; tones .badge-accent -ok -warn -err -info
 *   .alert      callout; tones .alert-ok -warn -err -info (text stays ink)
 *   .table      data table (wrap in .table-wrap to scroll on phones)
 *   .empty      empty state — an invitation, not a blank div
 *   .skeleton   loading placeholder: a flat bar at the loaded value's size
 *   .modal      on <dialog> (showModal()); styled backdrop included
 *   .icon       an inline <svg> icon at 1em, stroked in currentColor — for
 *               <use href="icons.svg#i-<name>"> over the seeded sprite
 *   .muted      secondary text   .stack / .row / .grow   layout helpers
 *
 * Rules this file keeps for every class: tap targets ≥44px on touch (.btn-sm is
 * for dense secondary UI, not primary actions), visible :focus-visible ring,
 * touch-action: manipulation and a transparent tap-highlight on every control
 * (no 300ms double-tap delay, no grey tap flash — the class supplies its own
 * press feedback), prefers-reduced-motion respected, opt-in classes only
 * (bare elements are never styled — app CSS and kit CSS cannot fight).
 */

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--app-gap, 16px) / 2);
  min-height: var(--app-control-h, 36px);
  padding: 6px var(--app-pad, 14px);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control, var(--app-radius));
  background: var(--app-surface);
  color: var(--app-ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    filter var(--app-dur-press, 120ms) var(--app-ease, ease),
    background var(--app-dur-hover, 120ms) var(--app-ease, ease),
    transform var(--app-dur-press, 120ms) var(--app-ease, ease);
}
.btn:active { filter: brightness(0.96); transform: var(--app-press, none); }
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}
/* A request in flight: spinner after the label, the label stays readable. */
.btn[aria-busy='true'] { pointer-events: none; }
.btn[aria-busy='true']::after {
  content: '';
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  animation: dbk-spin 0.6s linear infinite;
}
@keyframes dbk-spin { 100% { transform: rotate(360deg); } }
.btn-primary {
  background: var(--app-accent);
  border-color: transparent;
  color: var(--app-accent-ink);
}
.btn-danger {
  background: var(--app-err);
  border-color: transparent;
  color: var(--app-bg);
}
.btn-ghost { background: transparent; border-color: transparent; }
/* Touch screens fire hover on tap and leave it stuck, so hover needs a fine pointer. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .btn-ghost:hover { background: var(--app-surface-2); }
  .btn-primary:hover { background: var(--app-accent); filter: brightness(1.06); }
  .btn-danger:hover { background: var(--app-err); filter: brightness(1.06); }
}
.btn-sm { min-height: calc(var(--app-control-h, 36px) - 8px); padding: 4px calc(var(--app-pad, 14px) - 4px); font-size: 0.925em; }
.btn-lg { min-height: calc(var(--app-control-h, 36px) + 8px); padding: 8px calc(var(--app-pad, 14px) + 6px); font-size: 1.05em; }
.btn-block { display: flex; width: 100%; }

/* ── Form controls ───────────────────────────────────────────────────────── */

.input, .select, .textarea {
  min-height: var(--app-control-h, 36px);
  min-width: 0; /* flex/grid children must be allowed to shrink */
  padding: 6px calc(var(--app-pad, 14px) - 2px);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-input, var(--app-radius));
  background: var(--app-surface);
  color: var(--app-ink);
  font: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--app-dur-hover, 120ms) var(--app-ease, ease), box-shadow var(--app-dur-hover, 120ms) var(--app-ease, ease);
}
.textarea { min-height: calc(var(--app-control-h, 36px) * 2); padding-block: 10px; resize: vertical; }
/* The native arrow ignores padding, so the chevron is two gradient strokes, inset like the text. */
.select:not([multiple]):not([size]) {
  appearance: none;
  padding-right: calc(var(--app-pad, 14px) + 18px);
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1.25px), var(--app-ink-muted, currentColor) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 1.25px)),
    linear-gradient(to top left, transparent calc(50% - 1.25px), var(--app-ink-muted, currentColor) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 1.25px));
  background-position: right calc(var(--app-pad, 14px) + 3px) center, right calc(var(--app-pad, 14px) - 2px) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
/* Forced colors strips gradients — give the select its native arrow back. */
@media (forced-colors: active) {
  .select:not([multiple]):not([size]) { appearance: auto; background-image: none; padding-right: calc(var(--app-pad, 14px) - 2px); }
}
:is(.input, .select, .textarea)::placeholder { color: var(--app-ink-faint); }
@media (pointer: coarse) {
  /* iOS zooms into sub-16px inputs on focus. */
  .input, .select, .textarea { font-size: max(16px, 1em); }
  .btn:not(.btn-sm), .input, .select { min-height: max(44px, var(--app-control-h, 36px)); }
  .btn-sm { min-height: max(36px, calc(var(--app-control-h, 36px) - 8px)); }
}

.field {
  display: grid;
  gap: calc(var(--app-gap, 16px) * 0.375);
  /* A field stretched to a taller neighbour keeps its label on its input. */
  align-content: start;
}
.field > label { font-size: 0.925em; font-weight: 500; }
.field-hint { font-size: 0.86em; color: var(--app-ink-muted); }
.field-error { font-size: 0.86em; color: var(--app-err); }

/* Native pickers (checkbox/radio/range/progress) take the accent for free. */
.card, .field, .row, .stack, .modal, .table { accent-color: var(--app-accent); }

/* ── Surfaces ────────────────────────────────────────────────────────────── */

.card {
  overflow-wrap: anywhere;
  padding: var(--app-card-pad, var(--app-gap, 16px));
  border: var(--app-card-border, 1px solid var(--app-border));
  border-radius: var(--app-radius-card, var(--app-radius));
  background: var(--app-card-bg, var(--app-surface));
  box-shadow: var(--app-card-shadow, none);
}
.card-title {
  margin: 0 0 calc(var(--app-gap, 16px) / 2);
  font-family: var(--app-font-display);
  font-size: 1.1em;
  font-weight: var(--app-font-display-weight, 600);
}

/* The accent has the field's lightness, so inside a band the accent pair swaps to the field's ink. */
.band {
  --app-accent: var(--app-field-ink);
  --app-accent-ink: var(--app-field);
  --app-focus-ring: 2px solid var(--app-field-ink);
  background: var(--app-field);
  color: var(--app-field-ink);
}
/* Text on the band takes its ink. Controls with a fill keep their own surface and ink. */
.band :is(.muted, .field-hint) { color: color-mix(in oklab, var(--app-field-ink) 78%, var(--app-field)); }
.band .btn-ghost { color: var(--app-field-ink); }
@media (hover: hover) and (pointer: fine) {
  .band .btn-ghost:hover { background: color-mix(in oklab, var(--app-field-ink) 14%, var(--app-field)); }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--app-radius-chip, 999px);
  background: var(--app-surface-2);
  color: var(--app-ink-muted);
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.badge-accent { background: color-mix(in oklab, var(--app-accent) 18%, transparent); color: var(--app-accent); }
.badge-ok { background: color-mix(in oklab, var(--app-ok) 18%, transparent); color: var(--app-ok); }
.badge-warn { background: color-mix(in oklab, var(--app-warn) 22%, transparent); color: var(--app-warn); }
.badge-err { background: color-mix(in oklab, var(--app-err) 18%, transparent); color: var(--app-err); }
.badge-info { background: color-mix(in oklab, var(--app-info) 18%, transparent); color: var(--app-info); }

.alert {
  overflow-wrap: anywhere;
  display: grid;
  gap: calc(var(--app-gap, 16px) * 0.375);
  padding: calc(var(--app-gap, 16px) * 0.75) var(--app-gap, 16px);
  border: 1px solid var(--app-border);
  border-left: 3px solid var(--app-ink-muted);
  border-radius: var(--app-radius-card, var(--app-radius));
  background: var(--app-surface-2);
  color: var(--app-ink); /* body copy stays ink — the tone is the edge, so warn stays readable */
}
.alert-ok { border-left-color: var(--app-ok); }
.alert-warn { border-left-color: var(--app-warn); }
.alert-err { border-left-color: var(--app-err); }
.alert-info { border-left-color: var(--app-info); }

/* ── Data ────────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--app-ink-muted);
  border-bottom: 1px solid var(--app-border);
}
.table td {
  /* Sized to the theme's row height; about 10px of padding without a theme. */
  padding: calc((var(--app-row, 2.9em) - 1.5em) / 2) 10px;
  border-bottom: 1px solid var(--app-border);
}
.table tr:last-child td { border-bottom: none; }

/* ── States ──────────────────────────────────────────────────────────────── */

.empty {
  display: grid;
  place-items: center;
  gap: calc(var(--app-gap, 16px) / 2);
  padding: calc(var(--app-gap, 16px) * 2.5) var(--app-gap, 16px);
  border: 1px dashed var(--app-border);
  border-radius: var(--app-radius-card, var(--app-radius));
  color: var(--app-ink-muted);
  text-align: center;
}

.skeleton {
  border-radius: var(--app-radius-input, var(--app-radius));
  background: var(--app-surface-2);
  color: transparent;
  user-select: none;
  pointer-events: none;
}

/* ── Modal (native <dialog>, opened with showModal()) ────────────────────── */

.modal {
  overflow-wrap: anywhere;
  width: min(92vw, 460px);
  margin: auto;
  padding: calc(var(--app-gap, 16px) * 1.5);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-dialog, calc(var(--app-radius) * 1.5));
  background: var(--app-surface);
  color: var(--app-ink);
  box-shadow: var(--app-float-shadow, none);
  max-height: min(85dvh, calc(100dvh - 32px));
  overflow: auto;
  overscroll-behavior: contain;
}
.modal::backdrop { background: rgb(0 0 0 / 0.45); }

/* ── Text + layout helpers ───────────────────────────────────────────────── */

.muted { color: var(--app-ink-muted); font-size: 0.925em; }
/* The sprite's symbols carry geometry only; this class is their one presentation. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.stack { display: grid; gap: var(--app-gap, 16px); align-content: start; }
.row { display: flex; align-items: center; gap: calc(var(--app-gap, 16px) / 2); flex-wrap: wrap; }
/* Fields side by side line up their labels and inputs, whichever has a hint. */
.row:has(> .field) { align-items: start; }
/* They wrap onto their own lines before a label would wrap. */
.row:has(> .field) > .field { flex: 1 1 12rem; }
/* A button beside them sits on the input line: below one label line and the field gap. */
.row:has(> .field) > .btn { margin-top: calc(0.925lh + var(--app-gap, 16px) * 0.375); }
.grow { flex: 1; min-width: 0; }

/* ── Highlighted code: the build writes these classes in markdown pages' code blocks ── */

:is(.hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-doctag) { color: var(--app-accent); }
:is(.hljs-string, .hljs-regexp, .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-addition) { color: var(--app-ok); }
:is(.hljs-number, .hljs-literal, .hljs-built_in, .hljs-type, .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable,
  .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo) { color: var(--app-info); }
:is(.hljs-title, .hljs-section) { color: var(--app-ink); font-weight: 600; }
.hljs-deletion { color: var(--app-err); }
:is(.hljs-comment, .hljs-quote, .hljs-meta) { color: var(--app-ink-muted); }
:is(.hljs-comment, .hljs-quote, .hljs-emphasis) { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* ── The floor: focus + motion (kit classes only — never bare elements) ──── */

:is(.btn, .input, .select, .textarea, .modal):focus-visible {
  outline: var(--app-focus-ring);
  outline-offset: 2px;
}
/* Focus raises contrast, not only a ring (Vercel: increase contrast on focus). */
:is(.input, .select, .textarea):focus-visible { border-color: var(--app-accent); }
/* Reduced motion keeps color and opacity fades. The theme's `still` dial removes the press scale. */
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy='true']::after { animation: none; }
}

/* Generated from defineTheme in src/app.ts. Do not edit: change the theme
   there, or restate a token in styles/tokens.css with its reason in docs/DESIGN.md. */
@layer dbui, theme;
@layer theme {
:root {
  color-scheme: light;
  --app-seed: oklch(0.92 0.2 107);
  --app-seed-accent: var(--app-seed);
  --app-seed-neutral: oklch(0.7 0 0);
  --app-bg: light-dark(oklch(from var(--app-seed-neutral) 0.985 min(calc(c * 0.15), 0.01) h), oklch(from var(--app-seed-neutral) 0.155 min(calc(c * 0.25), 0.015) h));
  --app-surface: light-dark(oklch(from var(--app-seed-neutral) 0.995 min(calc(c * 0.1), 0.006) h), oklch(from var(--app-seed-neutral) 0.205 min(calc(c * 0.25), 0.02) h));
  --app-surface-2: light-dark(oklch(from var(--app-seed-neutral) 0.955 min(calc(c * 0.2), 0.014) h), oklch(from var(--app-seed-neutral) 0.25 min(calc(c * 0.3), 0.025) h));
  --app-border: light-dark(oklch(from var(--app-seed-neutral) 0.885 min(calc(c * 0.3), 0.02) h), oklch(from var(--app-seed-neutral) 0.31 min(calc(c * 0.3), 0.03) h));
  --app-ink: light-dark(oklch(from var(--app-seed-neutral) 0.225 min(calc(c * 0.35), 0.03) h), oklch(from var(--app-seed-neutral) 0.93 min(calc(c * 0.2), 0.02) h));
  --app-ink-muted: light-dark(oklch(from var(--app-seed-neutral) 0.49 min(calc(c * 0.4), 0.04) h), oklch(from var(--app-seed-neutral) 0.78 min(calc(c * 0.3), 0.03) h));
  --app-ink-faint: light-dark(oklch(from var(--app-seed-neutral) 0.635 min(calc(c * 0.4), 0.04) h), oklch(from var(--app-seed-neutral) 0.585 min(calc(c * 0.3), 0.03) h));
  --app-accent: light-dark(oklch(from var(--app-seed-accent) 0.55 min(c, 0.19) h), oklch(from var(--app-seed-accent) 0.78 min(c, 0.17) h));
  --app-accent-ink: light-dark(oklch(from var(--app-seed-accent) 0.985 min(calc(c * 0.15), 0.02) h), oklch(from var(--app-seed-accent) 0.15 min(calc(c * 0.3), 0.05) h));
  --app-field: light-dark(oklch(from var(--app-seed) 0.55 min(c, 0.19) h), oklch(from var(--app-seed) 0.78 min(c, 0.17) h));
  --app-field-ink: light-dark(oklch(from var(--app-seed) 0.985 min(calc(c * 0.15), 0.02) h), oklch(from var(--app-seed) 0.15 min(calc(c * 0.3), 0.05) h));
  --app-ok: light-dark(oklch(0.545 0.13 150), oklch(0.72 0.14 150));
  --app-warn: light-dark(oklch(0.6 0.13 85), oklch(0.78 0.14 85));
  --app-err: light-dark(oklch(0.55 0.19 25), oklch(0.8 0.16 25));
  --app-info: light-dark(oklch(0.545 0.11 230), oklch(0.74 0.11 230));
  --app-field: oklch(0.92 0.2 107);
  --app-field-ink: oklch(0.22 0.01 265);
  --app-accent: oklch(0.22 0.01 265);
  --app-accent-ink: oklch(0.985 0 0);
  --app-focus-ring: 2px solid var(--app-accent);
  --app-radius-control: 6px;
  --app-radius-input: 6px;
  --app-radius-card: 8px;
  --app-radius-chip: 4px;
  --app-radius-dialog: 10px;
  --app-text: 15px;
  --app-control-h: 36px;
  --app-row: 2.9em;
  --app-pad: 14px;
  --app-gap: 16px;
  --app-card-pad: 16px;
  --app-type-ratio: 1.2;
  --app-card-border: 1px solid var(--app-border);
  --app-card-shadow: none;
  --app-card-bg: var(--app-surface);
  --app-float-shadow: 0 2px 6px oklch(from var(--app-seed-neutral) 0.2 0.02 h / 0.08), 0 12px 32px oklch(from var(--app-seed-neutral) 0.2 0.02 h / 0.14);
  --app-rule: 1px;
  --app-press: scale(0.97);
  --app-dur-press: 140ms;
  --app-dur-hover: 180ms;
  --app-dur-menu: 200ms;
  --app-dur-dialog: 280ms;
  --app-dur-reveal: 0ms;
  --app-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --app-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --app-font: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --app-font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --app-font-display-weight: 600;
  --app-font-figures: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --dbui-bg: var(--app-bg);
  --dbui-surface: var(--app-surface);
  --dbui-surface-2: var(--app-surface-2);
  --dbui-border: var(--app-border);
  --dbui-fg: var(--app-ink);
  --dbui-fg-muted: var(--app-ink-muted);
  --dbui-fg-faint: var(--app-ink-faint);
  --dbui-accent: var(--app-accent);
  --dbui-accent-contrast: var(--app-accent-ink);
  --dbui-ok: var(--app-ok);
  --dbui-warn: var(--app-warn);
  --dbui-err: var(--app-err);
  --dbui-info: var(--app-info);
  --dbui-radius: var(--app-radius-card);
  --dbui-font-body: var(--app-font);
  --dbui-font-display: var(--app-font-display);
  --dbui-text: max(12px, calc(var(--app-text) - 2px));
  --dbui-prose-step: calc(var(--app-text) - max(12px, calc(var(--app-text) - 2px)));
  --dbui-ring: var(--app-accent);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --app-press: none;
    --app-dur-press: 120ms;
    --app-dur-hover: 120ms;
    --app-dur-menu: 120ms;
    --app-dur-dialog: 160ms;
    --app-dur-reveal: 0ms;
    --app-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --app-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  }
}
}
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("__dobase/fonts/archivo/latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("__dobase/fonts/archivo/latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("__dobase/fonts/archivo/latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("__dobase/fonts/archivo/latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("__dobase/fonts/archivo/latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("__dobase/fonts/archivo/latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("__dobase/fonts/archivo/latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("__dobase/fonts/archivo/latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("__dobase/fonts/jetbrains-mono/latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("__dobase/fonts/jetbrains-mono/latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("__dobase/fonts/jetbrains-mono/latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("__dobase/fonts/jetbrains-mono/latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }