:root{
  /* Primary drives fundamental UI components (maps to existing --base variables) */
  --base-h: 212;
  --base-s: 93%;
  --base-l: 44%;

  /* Explicit primary/secondary variables for advanced overrides */
  --primary-h: 212;
  --primary-s: 93%;
  --primary-l: 44%;
  --primary: var(--primary-h) var(--primary-s) var(--primary-l);
  --primary-dark: var(--primary-h) var(--primary-s) calc(var(--primary-l) - 8%);

  --secondary-h: 210;
  --secondary-s: 50%;
  --secondary-l: 40%;
  --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);
  --secondary-dark: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - 8%);
}

/* Interactive state overrides use secondary color */
.btn--base:hover,
.btn--base:active,
.btn--base:focus {
  background: hsl(var(--secondary) / 0.9) !important;
}

.btn-outline--base.active,
.btn-outline--base:hover {
  background: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--secondary)) !important;
}

.t-link--base:hover {
  color: hsl(var(--secondary)) !important;
}

/* Generic interactive accents */
a:hover { color: hsl(var(--secondary)) !important; }
button:hover { filter: brightness(0.95); }

/* Focus rings and outlines */
input:focus,
select:focus,
textarea:focus,
button:focus,
.form-control:focus {
  outline-color: hsl(var(--secondary)) !important;
  box-shadow: 0 0 0 0.25rem hsl(var(--secondary) / 0.25) !important;
}