:root {
  --color-primary: #c20f18;
  --color-primary-dark: color-mix(in srgb, #c20f18 75%, black);
  --color-primary-light: color-mix(in srgb, #c20f18 85%, white);
  --color-secondary: #64748b;
  --color-secondary-dark: color-mix(in srgb, #64748b 75%, black);
  --color-secondary-light: color-mix(in srgb, #64748b 85%, white);
  --color-accent: #a60c0c;
  --color-accent-dark: color-mix(in srgb, #a60c0c 75%, black);
  --color-accent-light: color-mix(in srgb, #a60c0c 85%, white);
  --color-bg: #e16060;
  --color-text: #303030;
  --nav-bg: #b10606;
  --footer-bg: #949494;
  --nav-text-color: #ffffff;
  --footer-text-color: #ffffff;
  --button-primary-bg: #b51212;
  --button-primary-text: #ffffff;
  --button-secondary-bg: #64748b;
  --button-secondary-text: #ffffff;
  --footer-link-color: #ffffff;
  --footer-link-hover-color: #a60c0c;
  --category-chip-bg: color-mix(in srgb, #64748b 22%, white);
  --category-chip-text: color-mix(in srgb, #64748b 78%, black);
  --category-chip-active-bg: #c20f18;
  --category-chip-active-text: #FFFFFF;
  --pagination-active-bg: #b51212;
  --pagination-active-text: #ffffff;
  --pagination-idle-bg: #64748b;
  --pagination-idle-text: #ffffff;
  --buy-minutes-bg: #a60c0c;
  --buy-minutes-text: #FFFFFF;
  --font-heading: Inter;
  --font-body: Inter;
  --site-title-font: var(--font-heading), sans-serif;
  --site-title-font-size: 1.5rem;
  --agent-available-color: #22c55e;
  --agent-busy-color: #f59e0b;
  --agent-offline-color: #94a3b8;
  --agent-card-bg: #ffffff;
  --agent-card-text: #4b5563;
  --agent-card-title: #111827;
  --agent-card-border-color: #e5e7eb;
  --agent-card-border-width: 2px;
  --agent-card-btn-primary-bg: #a60c0c;
  --agent-card-btn-primary-text: #ffffff;
  --agent-card-btn-secondary-bg: #4b5563;
  --agent-card-btn-secondary-text: #ffffff;
  --border-radius: 0.5rem;
}

/* Body background and default text colour */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}
.prose { color: var(--color-text); }

/* Primary & Secondary buttons (excludes .agent-card) */
.btn-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: opacity 0.15s;
}
.btn-secondary:hover { opacity: 0.9; }

/* Focus rings use theme primary (inputs, textareas, selects, theme buttons) */
input:focus, textarea:focus, select:focus,
.btn-primary:focus-visible, .btn-secondary:focus-visible {
  --tw-ring-color: var(--color-primary);
}

/* Ring color utilities for theme (e.g. selected pills, gallery) */
.ring-primary { --tw-ring-color: var(--color-primary); }
.ring-primary-dark, .hover\:ring-primary-dark:hover { --tw-ring-color: var(--color-primary-dark); }

/* Hard overrides for nav/footer text colours */
.site-nav, .site-nav * { color: var(--nav-text-color) !important; }
.site-footer, .site-footer * { color: var(--footer-text-color) !important; }

/* Buy Minutes button keeps its own configured colours */
.buy-minutes-cta { background-color: var(--buy-minutes-bg) !important; color: var(--buy-minutes-text) !important; }
.buy-minutes-cta * { color: var(--buy-minutes-text) !important; }

/* Footer links */
.footer-link { color: var(--footer-link-color); text-decoration: none; transition: color 0.15s, opacity 0.15s; opacity: 0.95; }
.footer-link:hover { color: var(--footer-link-hover-color); opacity: 1; }

/* Category chips */
.category-chip {
  background-color: var(--category-chip-bg);
  color: var(--category-chip-text);
  border-radius: var(--border-radius);
}
.category-chip-active {
  background-color: var(--category-chip-active-bg);
  color: var(--category-chip-active-text);
  border-radius: var(--border-radius);
}

/* Pagination */
.pagination-link {
  border-radius: var(--border-radius);
  transition: opacity 0.15s;
}
.pagination-link.is-active {
  background-color: var(--pagination-active-bg);
  color: var(--pagination-active-text);
}
.pagination-link:not(.is-active) {
  background-color: var(--pagination-idle-bg);
  color: var(--pagination-idle-text);
}
.pagination-link:hover { opacity: 0.9; }

/* Agent status colours */
.agent-status-available { background-color: var(--agent-available-color) !important; color: #fff !important; }
.agent-status-busy      { background-color: var(--agent-busy-color)      !important; color: #fff !important; }
.agent-status-offline   { background-color: var(--agent-offline-color)   !important; color: #fff !important; }

/* Agent card */
.agent-card {
  background-color: var(--agent-card-bg);
  color: var(--agent-card-text);
  border-color: var(--agent-card-border-color);
  border-width: var(--agent-card-border-width);
  border-style: solid;
}
.agent-card-title { color: var(--agent-card-title); }
.agent-card-btn-primary {
  background-color: var(--agent-card-btn-primary-bg) !important;
  color: var(--agent-card-btn-primary-text) !important;
}
.agent-card-btn-secondary {
  background-color: var(--agent-card-btn-secondary-bg) !important;
  color: var(--agent-card-btn-secondary-text) !important;
}