:root {
  --color-dominant:    #edf0f5;
  --color-secondary:   #364259;
  --color-accent:      #6b82a8;
  --color-blue-accent: #4a7fc1;
  --text-on-dominant:  #364259;
  --text-on-secondary: #ffffff;
  --text-on-accent:    #ffffff;
}

/* ── Base ── */
html, body,
.bg-zinc-950 { background-color: var(--color-dominant) !important; }

/* ── Surfaces ── */
.bg-zinc-900 { background-color: #e2e6ed !important; }
.bg-zinc-800 { background-color: #d4d9e4 !important; }
.bg-zinc-700 { background-color: #c6cdd8 !important; }

/* ── Text ── */
.text-white,
.text-gray-300,
.text-zinc-300 { color: var(--text-on-dominant) !important; }
.text-zinc-400  { color: #546475 !important; }
.text-zinc-500  { color: #6e8099 !important; }
.text-zinc-600  { color: #8d9eb0 !important; }

/* ── Borders ── */
.border-zinc-800 { border-color: #bcc4d0 !important; }
.border-zinc-700 { border-color: #b0bad0 !important; }

/* ── Hover backgrounds ── */
.hover\:bg-zinc-800:hover { background-color: #ccd2de !important; }
.hover\:bg-zinc-700:hover { background-color: #bfc7d4 !important; }
.hover\:text-white:hover,
.hover\:text-zinc-300:hover,
.hover\:text-zinc-400:hover,
.hover\:text-zinc-500:hover { color: #c47a3a !important; }

/* ── Accent colour (replaces blue-400/500) ── */
.hover\:text-blue-400:hover       { color: #c47a3a !important; }
.hover\:border-blue-500:hover     { border-color: var(--color-blue-accent) !important; }
.group:hover .group-hover\:text-blue-400 { color: #c47a3a !important; }
.group:hover .group-hover\:bg-blue-900   { background-color: rgba(107,130,168,.15) !important; }

/* ── text-gradient (index.html hero headings) ── */
.text-gradient {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--color-secondary) !important;
  background-clip: unset !important;
  color: var(--color-secondary) !important;
}

/* ── Photography lightbox – keep dark overlay ── */
#lightbox { background: rgba(0,0,0,.92) !important; }
.thumb-wrap { background: #d4d9e4 !important; }

/* ── Small blue elements ── */

/* Always-visible: blue left border on content cards */
.bg-zinc-900.rounded-lg {
  border-left: 3px solid var(--color-blue-accent) !important;
}

/* Always-visible: blue top border on footer */
footer.border-t {
  border-top-color: var(--color-blue-accent) !important;
  border-top-width: 2px !important;
}

/* Always-visible: short blue rule beneath section headings */
h2.text-gradient {
  padding-bottom: 6px !important;
  border-bottom: 2px solid var(--color-blue-accent) !important;
}

/* Always-visible: blue dot before uppercase section labels (subpages) */
.text-xs.uppercase.tracking-widest::before,
.text-sm.uppercase.tracking-widest::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-blue-accent);
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Hover: blue ring on profile avatar */
header img.rounded-full:hover {
  box-shadow: 0 0 0 3px var(--color-dominant), 0 0 0 5px var(--color-blue-accent);
  transition: box-shadow 0.2s ease;
}