/* Paper (2026-10-27): the white look of the landing page and the ads, the app's default background (app.js
   graphPaper). html/body.va-paper is on while the background is a light plain colour; every rule here is scoped to it,
   so a dark background is today's dark look, unchanged. The graph itself (ink names, links, node colours) is drawn
   in app.js / board-draw.js / engine/renderer.js; this file is the page around it.
   Geist + Geist Mono: SIL Open Font License (fonts/geist-LICENSE.txt). */
@font-face { font-family: 'Geist'; src: url('../fonts/geist-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/geist-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/geist-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

html.va-paper {
  --paper: #f3f2ee;
  --paper-ink: #121212;
  --paper-mid: #55534e;
  --paper-soft: #8a8883;
  --paper-line: #e3e1db;
  --paper-shadow: 0 24px 60px rgba(20, 18, 14, .08), 0 2px 6px rgba(20, 18, 14, .05);
  /* app.css */
  --bg: #f3f2ee;
  --panel: #ffffff;
  --border: #e3e1db;
  --text: #121212;
  --muted: #6f6d68;
  --danger-bg: #fbeceb;
  --danger-border: #ebc4c1;
  /* sidebar.js and everything built on it (menus, Customize, Settings, Ask AI, the reader) */
  --cs-font: Geist, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --cs-surface: #faf9f6;
  --cs-surface-raised: #ffffff;
  --cs-border: #e3e1db;
  --cs-border-strong: #d2cfc7;
  --cs-text: #121212;
  --cs-text-2: #55534e;
  --cs-text-muted: #8a8883;
  --cs-hover: rgba(18, 18, 18, .055);
  --cs-accent-bg: rgba(18, 18, 18, .09);
  --cs-accent-text: #121212;
  --cs-danger: #c0453d;
  --cs-panel: rgba(255, 255, 255, max(.94, var(--cs-panel-alpha)));
  --cs-panel-raised: #ffffff;
  color-scheme: light;
}
html.va-paper, html.va-paper body { background: #f3f2ee; color: #121212; }
html.va-paper body { font-family: var(--cs-font); }

/* Home (home.js): the graphs as cards, as the landing page's cards */
html.va-paper #vaHome { background: #f3f2ee; color: #121212; }
html.va-paper #vaHome .vh-top { background: rgba(243, 242, 238, .92); border-bottom-color: #e3e1db; backdrop-filter: blur(10px); }
html.va-paper #vaHome h2 { color: #121212; letter-spacing: -.02em; }
html.va-paper #vaHome .vh-search { background: #fff; color: #8a8883; border: 1px solid #e3e1db; }
html.va-paper #vaHome .vh-search input { color: #121212; }
html.va-paper #vaHome .vh-close { background: #fff; border-color: #e3e1db; color: #55534e; }
html.va-paper #vaHome .vh-close:hover { background: #fff; color: #121212; border-color: #d2cfc7; }
html.va-paper #vaHome .vh-newbtn { background: #121212; border-color: #121212; color: #fff; }
html.va-paper #vaHome .vh-newbtn:hover, html.va-paper #vaHome .vh-newbtn:focus-visible, html.va-paper #vaHome .vh-newbtn[aria-expanded="true"] { background: #2a2a2a; border-color: #2a2a2a; }
html.va-paper #vaHome .vh-newbtn svg { color: #cfcfcf; }
html.va-paper #vaHome .vh-newmenu, html.va-paper #vaHome .vh-menu { background: #fff; border-color: #e3e1db; box-shadow: var(--paper-shadow); }
html.va-paper #vaHome .vh-newmenu button:hover, html.va-paper #vaHome .vh-newmenu button:focus-visible,
html.va-paper #vaHome .vh-menu button:hover, html.va-paper #vaHome .vh-menu button:focus-visible { background: rgba(18, 18, 18, .05); }
html.va-paper #vaHome .vh-newmenu hr { border-top-color: #e3e1db; }
html.va-paper #vaHome .vh-ico { background: #f3f2ee; color: #121212; }
html.va-paper #vaHome .vh-newmenu b { color: #121212; }
html.va-paper #vaHome .vh-newmenu small, html.va-paper #vaHome .vh-head h2 small, html.va-paper #vaHome .vh-meta, html.va-paper #vaHome .vh-empty { color: #8a8883; }
html.va-paper #vaHome .vh-sort { background: rgba(18, 18, 18, .05); }
html.va-paper #vaHome .vh-sort button { color: #55534e; }
html.va-paper #vaHome .vh-sort button[aria-pressed="true"] { background: #fff; color: #121212; box-shadow: 0 1px 2px rgba(20, 18, 14, .08); }
html.va-paper #vaHome .vh-src { color: #55534e; }
html.va-paper #vaHome .vh-card { background: #fff; border-color: #e3e1db; border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 18, 14, .05); }
html.va-paper #vaHome .vh-card:hover, html.va-paper #vaHome .vh-card:focus-visible { border-color: #b9b6ae; }
html.va-paper #vaHome .vh-card.is-open { border-color: #d2cfc7; }
html.va-paper #vaHome .vh-pic { background: #f3f2ee; }
html.va-paper #vaHome .vh-pic i { color: #a3a09a; }
html.va-paper #vaHome .vh-info { background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .96) 45%); }
html.va-paper #vaHome .vh-name { color: #121212; }
html.va-paper #vaHome .vh-name input { background: #fff; border-color: #b9b6ae; }
html.va-paper #vaHome .vh-more { color: #8a8883; }
html.va-paper #vaHome .vh-more:hover, html.va-paper #vaHome .vh-more:focus-visible { background: rgba(18, 18, 18, .06); color: #121212; }
html.va-paper #vaHome .vh-menu button { color: #2b2a27; }
html.va-paper #vaHome .vh-menu .vh-danger { color: #c0453d; }

/* The reader (reader.js): a white page beside the graph */
html.va-paper #vaReader { background: #fff; border-left-color: #e3e1db; color: #2b2a27; box-shadow: -18px 0 50px rgba(20, 18, 14, .06); }
html.va-paper #vaReader .vr-head { border-bottom-color: #e3e1db; }
html.va-paper #vaReader .vr-name { color: #121212; }
html.va-paper #vaReader .vr-sub, html.va-paper #vaReader .vr-quiet { color: #8a8883; }
html.va-paper #vaReader .vr-acts button, html.va-paper #vaReader .vr-retry { background: #fff; border-color: #e3e1db; color: #2b2a27; }
html.va-paper #vaReader .vr-acts button:hover, html.va-paper #vaReader .vr-acts button:focus-visible,
html.va-paper #vaReader .vr-retry:hover, html.va-paper #vaReader .vr-retry:focus-visible { background: #f3f2ee; color: #121212; }
html.va-paper #vaReader .vr-close { color: #8a8883; }
html.va-paper #vaReader .vr-close:hover, html.va-paper #vaReader .vr-close:focus-visible { color: #121212; background: rgba(18, 18, 18, .06); }
html.va-paper #vaReader .vr-modes { background: rgba(18, 18, 18, .05); }
html.va-paper #vaReader .vr-modes button { color: #6f6d68; }
html.va-paper #vaReader .vr-modes button:hover { color: #121212; }
html.va-paper #vaReader .vr-modes button.is-on { background: #fff; color: #121212; box-shadow: 0 1px 2px rgba(20, 18, 14, .08); }
html.va-paper #vaReader .vr-text { color: #2b2a27; }
html.va-paper #vaReader .vr-text h1, html.va-paper #vaReader .vr-text h2, html.va-paper #vaReader .vr-text h3, html.va-paper #vaReader .vr-text h4 { color: #121212; }
html.va-paper #vaReader .vr-text blockquote { border-left-color: #d2cfc7; color: #6f6d68; }
html.va-paper #vaReader .vr-text a, html.va-paper #vaReader .vr-link { color: #121212; }
html.va-paper #vaReader .vr-link { border-bottom-color: #b9b6ae; }
html.va-paper #vaReader .vr-link:hover, html.va-paper #vaReader .vr-link:focus-visible { border-bottom-color: #121212; }
html.va-paper #vaReader .vr-link.is-missing { color: #8a8883; }
html.va-paper #vaReader .vr-text code { background: #f3f2ee; }
html.va-paper #vaReader .vr-text pre { background: #faf9f6; border-color: #e3e1db; }
html.va-paper #vaReader .vr-text th, html.va-paper #vaReader .vr-text td { border-color: #e3e1db; }
html.va-paper #vaReader .vr-code { color: #2b2a27; font-family: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; }
html.va-paper #vaReader .vr-ln b { color: #b9b6ae; }
html.va-paper #vaReader .vr-ln.is-part { background: rgba(55, 110, 190, .07); }
html.va-paper #vaReader .vr-ln.is-part b { color: #3f6aa6; }
html.va-paper #vaReader .vr-k { color: #2f5f9e; } html.va-paper #vaReader .vr-s { color: #4f7a2c; } html.va-paper #vaReader .vr-c { color: #8a8883; }
html.va-paper #vaReader .vr-n { color: #a35f1f; } html.va-paper #vaReader .vr-f { color: #121212; }
html.va-paper #vaReader .vr-find { background: #fff; border-color: #e3e1db; color: #121212; }
html.va-paper #vaReader .vr-find:focus { border-color: #8a8883; }
html.va-paper #vaReader .vr-group, html.va-paper #vaReader .vr-row i { color: #8a8883; }
html.va-paper #vaReader .vr-row { color: #2b2a27; }
html.va-paper #vaReader .vr-row:hover, html.va-paper #vaReader .vr-row:focus-visible { background: rgba(18, 18, 18, .05); }
/* Edit the files (2026-10-27): the note's text and name as plain white fields, Save in ink */
/* (2026-10-28, owner: "can it be cleaner") the name reads as the title it is - no box; a faint wash only on hover / while typing */
html.va-paper #vaReader .vr-name-input { background: transparent; border-color: transparent; color: #121212; }
html.va-paper #vaReader .vr-name-input:hover { background: rgba(18, 18, 18, .04); }
html.va-paper #vaReader .vr-edit { background: #faf9f6; border-color: #e3e1db; color: #2b2a27; }
html.va-paper #vaReader .vr-name-input:focus { border-color: transparent; background: rgba(18, 18, 18, .05); }
html.va-paper #vaReader .vr-edit:focus { border-color: #8a8883; }
html.va-paper #vaReader .vr-acts button.vr-save { background: #121212; border-color: #121212; color: #fff; }
html.va-paper #vaReader .vr-acts button.vr-save:hover, html.va-paper #vaReader .vr-acts button.vr-save:focus-visible { background: #2b2a27; color: #fff; }

/* The first-run tour (tour.js) */
html.va-paper #vaTourRing { box-shadow: 0 0 0 2px rgba(18, 18, 18, .9), 0 0 0 6px rgba(18, 18, 18, .1), 0 0 0 100vmax rgba(243, 242, 238, .55); }
html.va-paper #vaTourRing.is-none { box-shadow: 0 0 0 100vmax rgba(243, 242, 238, .55); }
html.va-paper #vaTour { background: #fff; border-color: #e3e1db; box-shadow: var(--paper-shadow); color: #2b2a27; }
html.va-paper #vaTour .va-tour-step, html.va-paper #vaTour p.va-tour-note { color: #8a8883; }
html.va-paper #vaTour h3 { color: #121212; }
html.va-paper #vaTour p { color: #55534e; }
html.va-paper #vaTour .va-tour-dots i { background: #d2cfc7; }
html.va-paper #vaTour .va-tour-dots i.is-on { background: #121212; }
html.va-paper #vaTour .va-tour-skip { color: #8a8883; }
html.va-paper #vaTour .va-tour-skip:hover { color: #121212; }
html.va-paper #vaTour .va-tour-back { color: #2b2a27; border-color: #e3e1db; }
html.va-paper #vaTour .va-tour-back:hover { background: rgba(18, 18, 18, .05); }
html.va-paper #vaTour .va-tour-next { background: #121212; color: #fff; }
html.va-paper #vaTour .va-tour-next:hover { background: #2a2a2a; }

/* Connect (connect-panel.js) and the AI box's answer (ai-bar.js) */
html.va-paper .cc-github { background: rgba(18, 18, 18, .045); }
html.va-paper .cc-sep { background: #e3e1db; }
html.va-paper .cc-status.is-error, html.va-paper .cc-toast.is-error { color: #c0453d; }
html.va-paper .cc-drop { background: rgba(243, 242, 238, .7); color: #121212; }
html.va-paper .cc-toast { background: #121212; color: #fff; }
/* (2026-10-28, owner: "two separate rectangles") only the card has a shadow - the text inside it drew a second box */
html.va-paper body #clearCompanion .ai-status { box-shadow: 0 10px 30px rgba(20, 18, 14, .08); }
html.va-paper body #clearCompanion .ai-status-text { box-shadow: none; }
html.va-paper #clearCompanion .ai-status-actions { border-top-color: #e3e1db; }

/* Settings' backdrop: a light veil on paper (dark: rgba(0,0,0,.45)) */
html.va-paper #vaSetDim { background: rgba(20, 18, 14, .2); }

/* The note editor beside the graph (its colours come from sidebar.js) */
html.va-paper body.cs-on,
html.va-paper body.cs-on[data-wallpaper] {
  --doc-border-themed: #e3e1db !important;
  --doc-title-themed: #121212 !important;
  --doc-text-themed: #2b2a27 !important;
  --doc-muted-themed: #8a8883 !important;
}