:root {
  --bg-app: #1a1a1a;
  --bg-gutter: #141414;
  --bg-panel: #303030;
  --bg-panel-header: #383838;
  --bg-panel-inner: #2a2a2a;
  --bg-toolbar: #333333;
  --bg-input: #222222;
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-hover-strong: rgba(255, 255, 255, 0.14);
  --bg-selected: #5680c2;
  --bg-selected-row: rgba(86, 128, 194, 0.32);
  --bg-selected-row-hover: rgba(86, 128, 194, 0.48);
  --bg-menu: #3a3a3a;
  --bg-ribbon-off: #3a3a3a;
  --bg-ribbon-on: #9a9a9a;
  --bg-row-alt: rgba(255, 255, 255, 0.025);

  --outline: #5a5a5a;
  --outline-hover: #ffffff;
  --outline-subtle: #454545;

  --text-primary: #ececec;
  --text-muted: #999999;
  --text-disabled: #666666;
  --text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);

  --folder-repo-filter: brightness(0) saturate(100%) invert(56%) sepia(52%) saturate(500%)
    hue-rotate(176deg) brightness(95%) contrast(92%);
  --folder-workspace-filter: brightness(0) saturate(100%) invert(72%) sepia(28%) saturate(600%)
    hue-rotate(358deg) brightness(95%) contrast(90%);
  --icon-repo-filter: var(--folder-repo-filter);
  --icon-workspace-filter: var(--folder-workspace-filter);
  --icon-history-filter: brightness(0) saturate(100%) invert(68%) sepia(42%) saturate(650%)
    hue-rotate(152deg) brightness(95%) contrast(92%);
  /* Workspace-tab icon colours. Shared by both tab themes (see components.css):
     the bold theme tints every tab, the browser theme only the selected one. */
  --icon-revision-filter: brightness(0) saturate(100%) invert(56%) sepia(52%) saturate(500%)
    hue-rotate(176deg) brightness(95%) contrast(92%);
  --icon-time-filter: brightness(0) saturate(100%) invert(72%) sepia(48%) saturate(650%)
    hue-rotate(358deg) brightness(98%) contrast(92%);
  /* Grey (~text-muted) tint for unselected tab icons in the browser theme. */
  --icon-muted-filter: brightness(0) saturate(100%) invert(63%);
  --availability-green-base: rgb(46, 160, 67);
  --availability-green-swatch-2: color-mix(in srgb, var(--availability-green-base) 55%, #333333);
  --availability-green-swatch-3: color-mix(in srgb, var(--availability-green-base) 75%, #333333);
  --icon-organization-filter: brightness(0) saturate(100%) invert(48%) sepia(34%) saturate(520%)
    hue-rotate(92deg) brightness(95%) contrast(90%);
  --bg-organization-tab: color-mix(in srgb, var(--availability-green-swatch-2) 65%, #383838);
  --border-organization-tab: color-mix(in srgb, var(--availability-green-swatch-2) 78%, #404040);

  /* File sync status colors (file tree Status column + info popups) */
  --status-orange: #e2a54e;
  --status-pale-green: #b7e0ae;
  --status-red: #e05252;
  --status-green: #4fc35a;
  --status-grey: #b9b9b9;

  --maroon-base: rgb(150, 40, 60);
  --maroon-swatch-2: color-mix(in srgb, var(--maroon-base) 55%, #333333);
  --icon-maroon-filter: brightness(0) saturate(100%) invert(24%) sepia(54%) saturate(1800%)
    hue-rotate(328deg) brightness(92%) contrast(94%);
  --bg-administration-tab: color-mix(in srgb, var(--maroon-swatch-2) 65%, #383838);
  --border-administration-tab: color-mix(in srgb, var(--maroon-swatch-2) 78%, #404040);

  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Top nav bar height. Tabs and icon buttons are 24px tall; extra space is
     split evenly above and below (see .menu-bar-tabs centering in components.css).
     If you change this, also update the traffic_light_position in
     src-tauri/src/lib.rs (the WebviewWindowBuilder setup) to roughly
     (height - 12) / 2 so macOS traffic lights stay centered. */
  --menu-bar-height: 32px;
  --menu-bar-bottom-gap: 0px;
  /* Vertical nudge for centered workspace tabs. Positive = down, negative = up. */
  --menu-bar-tabs-offset-y: 2px;
  --panel-header-height: 28px;
  --gutter-size: 3px;
  --tab-height: 32px;
  --toolbar-height: 58px;

  --transition: 0.12s ease;
  --shadow-panel: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
