/* 78 UI Kit theme — generated from #3a7841 (accent neutral, 4px radius, cozy) */
/* Paste after kit.css. Nothing else changes. */

:root[data-theme="dark"] {
  /* Surfaces */
  --bg: #0f110f;
  --bg2: #1d221e;
  --bg3: #2a2e2a;
  --border: #353935;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Text */
  --text: #dfe5df;
  --dim: #858b86;

  /* Accent */
  --accent: #6da171;
  --accent-text: #0b0e0b;
  --accent-hover: #7fb483;
  --accent-lo: rgba(109, 161, 113, 0.16);
  --accent-lo-hover: rgba(109, 161, 113, 0.24);
  --accent-glow: 0 2px 10px rgba(109, 161, 113, 0.3);

  /* Semantic */
  --success: #6de18b;
  --success-lo: rgba(109, 225, 139, 0.16);
  --warn: #ffb334;
  --warn-lo: rgba(255, 179, 52, 0.16);
  --danger: #ffaba1;
  --danger-lo: rgba(255, 171, 161, 0.16);
  --info: #85cdff;
  --info-lo: rgba(133, 205, 255, 0.16);

  /* Rows, overlay, focus */
  --row-hover: rgba(255, 255, 255, 0.04);
  --row-border: #282b28;
  --row-selected: var(--accent-lo);
  --overlay: rgba(0, 0, 0, 0.6);
  --ring: rgba(109, 161, 113, 0.35);
}

:root[data-theme="light"] {
  /* Surfaces */
  --bg: #f1f3f1;
  --bg2: #ffffff;
  --bg3: #f6f8f6;
  --border: #dee0de;
  --shadow: 0 1px 3px rgba(29, 34, 30, 0.08);
  --shadow-lg: 0 8px 24px rgba(29, 34, 30, 0.12);

  /* Text */
  --text: #1d221e;
  --dim: #727872;

  /* Accent */
  --accent: #3a7841;
  --accent-text: #ffffff;
  --accent-hover: #25632e;
  --accent-lo: rgba(58, 120, 65, 0.1);
  --accent-lo-hover: rgba(58, 120, 65, 0.18);
  --accent-glow: 0 2px 8px rgba(58, 120, 65, 0.25);

  /* Semantic */
  --success: #0a7e3a;
  --success-lo: rgba(10, 126, 58, 0.1);
  --warn: #8d5e00;
  --warn-lo: rgba(141, 94, 0, 0.1);
  --danger: #ab413a;
  --danger-lo: rgba(171, 65, 58, 0.1);
  --info: #0070a6;
  --info-lo: rgba(0, 112, 166, 0.1);

  /* Rows, overlay, focus */
  --row-hover: rgba(29, 34, 30, 0.035);
  --row-border: #ebedeb;
  --row-selected: var(--accent-lo);
  --overlay: rgba(29, 34, 30, 0.45);
  --ring: rgba(58, 120, 65, 0.25);
}

/* Shape + density (not color — these live in the shared :root) */
:root {
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 5px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --control-h: 36px;
  --control-h-sm: 28px;
  --icon-btn-size: 32px;
}