/* ═══ VESPER — the design system (11 Oct 2026) ════════════════════════════
   One set of values for Vesper Studio, the website, the console and the
   admin book, taken from the reference Daniel chose: charcoal surfaces,
   one-pixel lines instead of outlines, Inter for words and JetBrains Mono for
   code. Every page loads this first and builds on the same names. */
:root{
  --v-bg:#0E0E10;        /* the page */
  --v-side:#1C1C1C;      /* the sidebar */
  --v-card:#181818;      /* cards, the message box, menus */
  --v-sel:#222222;       /* a selected row */
  --v-hover:#202020;     /* a row under the pointer */
  --v-tile:#141416;      /* quiet buttons, tabs, the address box */
  --v-field:#161618;     /* inputs */
  --v-bubble:#151517;    /* his message */
  --v-code:#232325;      /* inline code */
  --v-line:#1E1E20;      /* hairlines */
  --v-line-2:#262626;    /* a stronger hairline */
  --v-white:#F4F4F4;     /* titles */
  --v-text:#C6C6C8;      /* reading text */
  --v-stext:#CACACA;     /* sidebar text */
  --v-ctl:#979797;       /* controls */
  --v-dim:#88888A;       /* secondary */
  --v-muted:#686868;     /* section labels */
  --v-faint:#4E4E4E;     /* times, counts */
  --v-plh:#545454;       /* placeholders */
  --v-icon:#7A7A7A;      /* sidebar icons */
  --v-link:#8187AA;      /* links */
  --v-ok:#6DAA78; --v-err:#C8706F; --v-warn:#D7AD72;
  --v-sans:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif;
  --v-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --v-r-card:12px; --v-r-row:6px; --v-r-box:18px;
}
html{color-scheme:dark}
html,body{background:var(--v-bg)}
body{margin:0;color:var(--v-text);font:400 13.5px/1.55 var(--v-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:#3A3A40;color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#252526;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:#333}
:focus-visible{outline:2px solid #5A5A66;outline-offset:2px}

/* buttons */
.v-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;border:0;background:#F4F4F4;color:#0E0E10;font:500 13px var(--v-sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.v-pill:hover{background:#FFFFFF}
.v-pill.ghost{background:transparent;color:var(--v-white);box-shadow:inset 0 0 0 1px #2E2E30}
.v-pill.ghost:hover{background:var(--v-hover)}
.v-pill.sm{height:28px;padding:0 12px;font-size:12px}
.v-quiet{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:#CFCFCF;font:500 12px var(--v-sans);text-decoration:none;cursor:pointer}
.v-quiet:hover{background:var(--v-hover);color:var(--v-white)}
.v-icon{width:15px;height:15px;flex:none;display:block}