/* Small shared refinements for the CRM's existing light theme. */
:root {
  --brand-primary: #5363b8;
  --brand-primary-hover: #45549f;
  --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  --brand-primary-mid: color-mix(in srgb, var(--brand-primary) 48%, #fff);
  --bg-page: #f4f5f7;
  --bg-subtle: #f7f8fa;
  --bg-hover: #eef0f3;
  --border-color: #e1e4e8;
  --border-strong: #cfd4da;
  --radius-lg: 9px;
  --radius-pill: 6px;
  --shadow-md: 0 4px 12px -4px rgba(16, 24, 40, .12), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lg: 0 8px 20px -8px rgba(16, 24, 40, .16);
}

html[data-mode="dark"] {
  --brand-primary: #8993de;
  --brand-primary-hover: #a0a8e8;
  --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 22%, #161718);
  --bg-page: #141516;
}

button, input, select, textarea { font: inherit; }
button { transition: background-color .14s ease, border-color .14s ease, color .14s ease; }
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }