/* GENERATED by bvc-controls sync.sh, edit in ~/Desktop/Code/bvc-controls */
/* bvc-controls · tokens
   Structural layer is shared by every app and never overridden.
   Palette layer ships defaults; each app overrides it in its own theme.css
   loaded AFTER this file and BEFORE controls.css. */
:root {
  /* Every tool's page is dark, so the browser's own parts (a caret, a native
     scrollbar, the focus ring it would draw) are drawn for a dark page in
     every tool, never only in the one that said so. */
  color-scheme: dark;
  /* ── structure: row ─────────────────────────────────────── */
  /* The label column carries the longest names both apps ship ("Size Random",
     "Loop seconds"), so it takes the wider share and the value column gives
     back the 4px it does not need for a six-character readout. */
  --cs-row-cols: minmax(0, 1.3fr) minmax(80px, 1.4fr) 52px minmax(20px, auto);
  --cs-row-gap: 8px;
  --cs-row-h: 22px;
  --cs-row-my: 5px;

  /* ── structure: card ────────────────────────────────────── */
  /* Every setting in an open group is a card. The compact row grammar above
     survives for the rows inside a track card and a list. */
  --cs-card-pad: 10px 12px;
  --cs-card-gap: 8px;
  --cs-card-r: 8px;
  --cs-card-bg: rgba(255, 255, 255, 0.035);
  --cs-card-line: rgba(255, 255, 255, 0.06);

  /* ── structure: shell ───────────────────────────────────── */
  --cs-shell-inset: 12px;
  /* An app whose own chrome sits across the top (EMITR's header pill) lowers
     the column's top edge with this; the rail block still centres in what is
     left and the panel still follows it. */
  --cs-shell-top: var(--cs-shell-inset);
  --cs-shell-gap: 8px;
  --cs-panel-w: 320px;
  --cs-panel-pad: 14px 16px;
  --cs-panel-r: 16px;
  --cs-blur: blur(16px) saturate(180%);
  --cs-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)), var(--cs-bg-panel);
  --cs-glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ── structure: rail ────────────────────────────────────── */
  --cs-rail-btn: 44px;
  --cs-rail-gap: 8px;
  --cs-rail-r: 10px;
  --cs-rail-glyph: 24px;

  /* ── structure: type ───────────────────────────────────── */
  --cs-font-ui: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cs-font-head: "Figtree", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cs-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --cs-fs-row: 12px;
  --cs-fs-value: 10px;
  --cs-fs-head: 10px;
  --cs-fs-section: 10px;

  /* ── structure: radii, motion ───────────────────────────── */
  --cs-r-sm: 4px;
  --cs-r-pill: 999px;
  --cs-dur: 120ms;
  --cs-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── structure: stage ───────────────────────────────────── */
  /* The page around the letterboxed frame, the same in every tool: EMITR's
     charcoal, so a black document reads as the frame it is and a 9:16 canvas
     on a black document is told apart from the stage. The frame carries a
     hairline edge on top of that, for a document painted the stage's own
     colour (or a transparent one). `.cs-stage` and `.cs-frame` apply both. */
  --cs-stage: #1a1d23;
  --cs-frame-edge: rgba(255, 255, 255, 0.16);

  /* ── palette defaults (override per app) ────────────────── */
  --cs-bg-panel: rgba(10, 15, 20, 0.74);
  --cs-bg-field: #141a1c;
  --cs-bg-menu: #141a1c; /* pull-down menus float over other settings, so this one is opaque */
  --cs-bg-hover: rgba(255, 255, 255, 0.08);
  --cs-text: rgba(255, 255, 255, 0.92);
  --cs-text-strong: rgba(255, 255, 255, 0.96);
  --cs-muted: rgba(255, 255, 255, 0.64);
  --cs-muted-2: rgba(255, 255, 255, 0.44);
  --cs-line: rgba(255, 255, 255, 0.10);
  --cs-line-hi: rgba(255, 255, 255, 0.18);
  --cs-accent: #0ea5e9;
  --cs-accent-rgb: 14, 165, 233;
  --cs-danger: #f87171;
  --cs-danger-rgb: 248, 113, 113;
  --cs-shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.5);
}

@media (max-width: 900px) {
  :root { --cs-rail-btn: 36px; }
}