/* Simple template — blue color scheme, light variant variables */
:root {
  --bg-900: rgba(247, 247, 249, 1);
  --bg-800: rgba(255, 255, 255, 1);
  --bg-700: rgba(255, 255, 255, 1);
  --fg-100: rgba(28, 30, 33, 1);
  --fg-200: rgba(58, 61, 64, 1);
  --line: rgba(59, 130, 246, 1);
  --muted: rgba(107, 114, 128, 1);
  --card: rgba(255, 255, 255, 1);
  --card-2: rgba(243, 244, 246, 1);
  --radius: 1em;
  --gap: 1em;
  --shadow: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, .15);
  --header-bg: linear-gradient(0deg, rgba(255, 255, 255, .95), rgba(247, 247, 249, .9));
  --header-border: rgba(0, 0, 0, .08);
  --brand-color: rgba(28, 30, 33, 1);
  --nav-select-border: rgba(0, 0, 0, .12);
  --card-border: rgba(0, 0, 0, .08);
  --card-border-hover: rgba(0, 0, 0, .18);
  --card-shadow-hover: 0 0 .75em rgba(0, 0, 0, .12);
  --status-border: rgba(0, 0, 0, .12);
  --status-on-color: rgba(22, 163, 74, 1);
  --status-on-border: rgba(22, 163, 74, .35);
  --status-off-color: rgba(220, 38, 38, 1);
  --status-off-border: rgba(220, 38, 38, .25);
  --footer-border: rgba(0, 0, 0, .08);
  --btn-border: rgba(0, 0, 0, .18);
  --tag-pill-border: rgba(0, 0, 0, .12);
  --tag-pill-reset-color: rgba(220, 38, 38, 1);
  --tag-pill-reset-border: rgba(220, 38, 38, .35);
  --tag-pill-reset-hover-bg: rgba(220, 38, 38, .08);
  --flag-filter: none;
  --control-radius: .375em;
  --control-padding-y: .375em;
  --control-padding-x: .625em;
  --control-border-width: 1px;
  --control-color: rgba(28, 30, 33, 1);
  --control-bg: rgba(231, 231, 232, 1);
  --input-bg: rgba(255, 255, 255, 1);
  --control-hover-bg: rgba(208, 208, 215, 1);
  --commission-green: #0a8a42;
  --toggle-bg: rgba(0, 0, 0, .15);
  --toggle-border: rgba(0, 0, 0, .2);
  --toggle-knob: #ffffff;
}