:root {
  /* colors */
  --bg: #0a0d12;
  --card: rgba(22, 26, 34, 0.78);
  --card-hover: rgba(30, 34, 44, 0.82);
  --card-border: rgba(255, 255, 255, 0.06);
  --fg: #e6ecf2;
  --fg-dim: #b7bfcb;
  --muted: #7d8796;
  --brand: #2d4f54;   /* company logo color — dark petrol teal */
  --teal: #1a464d;
  --teal-light: #57b3ab;   /* petrol teal off the logo hue (#2d4f54), brightened */
  --teal-dim: #1a3a40;
  --amber: #e07820;
  --amber-dim: #a85a10;
  --accent: #57b3ab;
  --accent-dim: #1a3a40;
  --danger: #ff8080;
  --success: #8fd9a0;
  --archivist: rgb(220, 155, 30);

  /* markdown note "paper" theme — a note reads as a page, not the UI void */
  --paper:   #1b1f26;   /* dark-grey page lifted off the black void */
  --md-h1:   #5cb0bd;   /* on-brand petrol-teal title (logo hue, lightened) */
  --md-h2:   #9cbfc4;   /* lighter petrol-grey of the same hue */
  --md-body: #f2f5f6;   /* near-white body text */

  /* danger scale — used by .btn-danger + the deletion pill */
  --danger-bg:           rgba(255, 110, 110, 0.10);
  --danger-bg-strong:    rgba(255, 110, 110, 0.20);
  --danger-border:       rgba(255, 110, 110, 0.30);
  --danger-text:         #ffb4b4;
  --danger-text-strong:  #ffd5d5;

  /* white-on-dark surfaces — the most-repeated rgba pattern across the UI. card-active + selected-border live here too, just with their original names since they're already wired across many call sites. */
  --surface-1:     rgba(255, 255, 255, 0.04);  /* subtle row bg (dash-tab, audit cards) */
  --surface-2:     rgba(255, 255, 255, 0.05);  /* hover bg (file-folder rows) */
  --surface-3:     rgba(255, 255, 255, 0.06);  /* pill bg, dash-tab hover, edge-toggle hover */
  --surface-4:     rgba(255, 255, 255, 0.08);  /* input border, scroll thumb */
  --card-active:   rgba(255, 255, 255, 0.10);  /* active row, btn-primary bg */
  --selected-border: rgba(255, 255, 255, 0.18); /* selected card border, btn-primary border */
  --surface-emph:  rgba(255, 255, 255, 0.20);  /* btn-primary hover */

  /* radii — token everything that recurs more than once */
  --radius:      16px;   /* card */
  --radius-sm:   10px;   /* select / input / btn-primary */
  --radius-md:   8px;    /* edge-toggle, gear */
  --radius-row:  6px;    /* row / ctx-item / dialog-action button */
  --radius-xs:   3px;    /* badge, pdf page */
  --radius-pill: 999px;  /* pill button */

  /* shadows — keep the existing --shadow name; introduce a scale for everything else */
  --shadow:           0 4px 24px rgba(0, 0, 0, 0.35);  /* card */
  --shadow-sm:        0 1px 4px  rgba(0, 0, 0, 0.4);   /* annot-pin */
  --shadow-pin-hover: 0 2px 8px  rgba(0, 0, 0, 0.5);   /* annot-pin :hover */
  --shadow-pdf:       0 2px 16px rgba(0, 0, 0, 0.55);  /* pdf page */
  --shadow-md:        0 8px 32px rgba(0, 0, 0, 0.5);   /* ctx-menu */
  --shadow-lg:        0 10px 40px rgba(0, 0, 0, 0.45); /* orb-thoughts */
  --shadow-xl:        0 24px 64px rgba(0, 0, 0, 0.6);  /* dialog */

  /* glassy backdrop blurs */
  --glass-card:     blur(14px) saturate(140%);   /* .block, user-msg bubble, chat-form, doc-view-card */
  --glass-dialog:   blur(18px) saturate(140%);   /* .dialog */
  --glass-thoughts: blur(22px) saturate(160%);   /* orb-thoughts */

  /* transitions — one curve (--ease) + a small duration scale for ALL movement */
  --ease:   cubic-bezier(0.33, 0, 0.2, 1);
  --t-fast: 0.10s;   /* row hover, ctx-item, tree opacity */
  --t-med:  0.16s;   /* dropdowns, sidebar slide, dash-tab body */
  --t-slow: 0.20s;   /* card reveal, dialog in/out */

  /* type scale */
  --text-xs:   10px;   /* badges, time stamps, label kickers */
  --text-sm:   12px;
  --text-base: 13.5px;
  --text-md:   15px;
  --text-lg:   18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* sidebar widths — defined on :root so floating overlay elements
     (edge toggles, resize handles, chat-shell paddings) can read them.
     overridden at runtime by main.js's resize handler. min = 400 (matches
     MIN_W in main.js — keep them in sync). */
  --left-w:  400px;
  --right-w: 400px;

  /* recurring effects */
  --shimmer: linear-gradient(90deg, var(--fg-dim) 0%, #ffffff 30%, #8fe6da 52%, #ffffff 72%, var(--fg-dim) 100%);
}

/* shared keyframe for every in-flight shimmer indicator (chat .turn-status,
   connectors .connector-status.status-syncing, dashboard .arc-entry.active).
   pairs with background: var(--shimmer); background-size: 200% auto;. */
@keyframes statusSweep {
  0%   { background-position: 200% center; }
  100% { background-position:   0% center; }
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000000;
  color: var(--fg);
  font-family: "Lora", Georgia, serif;
  font-size: var(--text-base);
  line-height: 1.55;
}
body { overflow: hidden; }