/* ── Relay's own reading of the design system ─────────────────────────────
   The browser app and the desktop app are one product and must look like it.
   Where they disagreed, the desktop app is right (CLAUDE.md: "the desktop app
   is the reference"), and this file is how that is said in CSS.

   **It never edits `_ds/`.** That directory is a handoff, refreshed whole, so
   anything changed inside it is lost the next time the design team ships. The
   bundle reads `var(--…)` everywhere it draws, so re-pointing the variables
   from outside restyles it — that is the whole mechanism. Loaded after the
   nine token files in `index.html`, and mirroring their selectors exactly:
   `:root` for light, `[data-theme="dark"]` for dark. Both blocks set the same
   names, because `:root` and `[data-theme="dark"]` have equal specificity and
   a value set only in `:root` here would beat the dark block above it.

   Most of this is not a disagreement at all. The design system already carries
   the app-chrome grounds the desktop implements — `--app-ground`,
   `--app-chrome-panel`, `--app-panel`, `--app-panel-alt`, `--app-panel-sunken`,
   decided 2026-09-09 in the design system's readme § App chrome, the same
   decision `relay/src/core/theme.cpp` made in C++. This app was drawing its
   shell with the *site* semantics (`--bg-page`, `--surface-*`) instead, which
   is why the two look different. So the work here is to point the site
   semantics at the app ones, fix the radius ladder, and state the geometry.

   Values come from `Programs/relay/src/core/theme.cpp` and `tokens.h`. Anything
   that already agreed is not repeated. */

:root {
  /* ── Grounds ───────────────────────────────────────────────────────────
     The nesting order, not a palette: the window ground, then regions on it,
     then a strip inside a region, then cards on that. `relay/CLAUDE.md` has
     the rule and `--app-*` already has the values. */
  --bg-page: var(--app-ground);
  --bg-page-alt: var(--app-panel-alt);
  --surface-sunken: var(--app-panel-sunken);

  /* ── Corners ───────────────────────────────────────────────────────────
     The design system's ladder is one step softer than the app's at every
     level, which is most of why a screenshot of one does not look like the
     other. `tokens.h` § radius is the source: a dialog is 14, a region 16, a
     card 10, a control 8, chrome 6. */
  --radius-panel: 14px;
  --radius-card: var(--radius-md);
  --radius-control: var(--radius-sm);

  /* The two the design system has no word for, because a site has no rail.
     `radius::kRegion` and `radius::kChrome`. */
  --rl-radius-region: var(--radius-xl);
  --rl-radius-chrome: var(--radius-xs);

  /* ── Chrome geometry ───────────────────────────────────────────────────
     `tokens.h` § chrome. The rail is wider than a site sidebar and the list
     column is wider than a marketing one; both are load-bearing for the
     rhythm of a row. */
  --app-rail: 72px;
  --app-sidebar: 286px;
  --app-topbar: 44px;

  --rl-rail-item: 56px;
  --rl-rail-footer-item: 44px;
  --rl-status-strip: 26px;
  --rl-chat-header: 52px;
  --rl-list-tabs: 38px;
  --rl-row: 60px;
  --rl-row-compact: 44px;
  --rl-thread-pane: 320px;
  --rl-chat-max: 1000px;
  --rl-gutter: var(--gap-grid);

  /* ── Controls ──────────────────────────────────────────────────────────
     A button is 16px of padding either side of a 13px DemiBold label
     (`widgets.cpp`, kBtnPadX), not the site's roomier 18. */
  --pad-control-x: 16px;

  /* The app's spacing scale keeps two steps the site's omits. */
  --space-14: 14px;
  --space-26: 26px;
}

[data-theme="dark"] {
  --bg-page: var(--app-ground);
  --bg-page-alt: var(--app-panel-alt);
  --surface-sunken: var(--app-panel-sunken);

  /* ── Relay's violet is one step below its siblings ─────────────────────
     `theme.cpp`: Relay's dark `primary()` is violet **500**, where Snap and
     the hub take 400. Deliberate, and pinned by `core_smoke` — Relay's accent
     controls are outlines over a tint rather than filled buttons, so they sit
     on the window ground where 500 reads as the brand. Do not "align" it. */
  --brand: var(--violet-500);
  --primary: var(--violet-500);
  --primary-hover: var(--violet-400);
  --primary-soft: rgba(150, 138, 224, 0.14);
  --primary-soft-hover: rgba(150, 138, 224, 0.22);
  --primary-text: var(--violet-300);

  /* `theme.cpp`: success is teal 400 on dark, and danger is the brand red
     lightened so it survives a dark ground. */
  --success-500: var(--teal-400);
  --danger-500: #df6b86;

  /* Elevation carries more ink on a dark ground — the same geometry, deeper
     alphas (`theme.cpp` § shadow). */
  --shadow-hairline: 0 1px 0 rgba(var(--ink-rgb), 0.07);
  --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), 0.1);
  --shadow-md: 0 4px 14px rgba(var(--ink-rgb), 0.14);
  --shadow-lg: 0 18px 40px rgba(var(--ink-rgb), 0.26);

  --radius-panel: 14px;
  --radius-card: var(--radius-md);
  --radius-control: var(--radius-sm);
}