:root {
  --brand-primary: #236c76;
  --brand-primary-dark: #184f58;
  --brand-primary-darker: #0c2b31;
  --brand-secondary: #8aa7ae;
  --brand-primary-rgb: 35, 108, 118;
  --bs-primary: #236c76;
  --bs-primary-rgb: 35, 108, 118;
}

:root,
:root[data-theme="dark"] {
  --color-accent-primary: 112 204 215;
  --color-accent-primary-hover: 159 226 233;
  --color-accent-secondary: 138 167 174;
  --color-accent-primary-soft: 25 56 62;
  --color-accent-secondary-soft: 39 54 58;
  --color-focus-ring: 126 217 228;
  --color-state-selected: 25 56 62;
  --color-state-active: 34 76 84;
  --color-nav-active: 112 204 215;
  --accent-gradient:
    linear-gradient(
      135deg,
      rgb(var(--color-accent-primary)) 0%,
      rgb(var(--color-accent-primary-hover)) 100%
    );
}

:root[data-theme="light"] {
  --color-accent-primary: 35 108 118;
  --color-accent-primary-hover: 24 79 88;
  --color-accent-secondary: 138 167 174;
  --color-accent-primary-soft: 225 241 244;
  --color-accent-secondary-soft: 236 242 244;
  --color-focus-ring: 63 147 158;
  --color-state-selected: 225 241 244;
  --color-state-active: 198 225 230;
  --color-nav-active: 35 108 118;
}