/* ================================================================
   Accent colour themes — user-selectable, matching the "Colour
   Theme" picker in includes/header.php.

   Single source of truth: each theme only sets --brand-500/600/700
   (+ --brand-500-rgb). includes/header.php's :root block derives
   everything else that should follow the chosen accent from these —
   Bootstrap's own --bs-primary/--bs-primary-rgb/--bs-link-color too,
   so plain Bootstrap utility classes (text-primary, bg-primary,
   btn-outline-primary, border-primary) repaint along with this app's
   own .btn-primary/.theme-toggle/etc.

   No [data-accent] attribute set = the original app blue (the
   literal default already in includes/header.php's :root, not
   duplicated here). Works identically in light and dark mode — dark
   mode only changes page background/text/border tokens, never the
   accent hue itself.
   ================================================================ */

:root[data-accent="teal"] {
  --brand-500: #0d9488; --brand-600: #0f766e; --brand-700: #115e59;
  --brand-500-rgb: 13, 148, 136;
}
:root[data-accent="steel"] {
  --brand-500: #475569; --brand-600: #334155; --brand-700: #1e293b;
  --brand-500-rgb: 71, 85, 105;
}
:root[data-accent="ocean"] {
  --brand-500: #2563eb; --brand-600: #1d4ed8; --brand-700: #1e40af;
  --brand-500-rgb: 37, 99, 235;
}
:root[data-accent="graphite"] {
  --brand-500: #334155; --brand-600: #1e293b; --brand-700: #0f172a;
  --brand-500-rgb: 51, 65, 85;
}
:root[data-accent="forest"] {
  --brand-500: #15803d; --brand-600: #166534; --brand-700: #14532d;
  --brand-500-rgb: 21, 128, 61;
}
:root[data-accent="sandstone"] {
  --brand-500: #a16207; --brand-600: #854d0e; --brand-700: #713f12;
  --brand-500-rgb: 161, 98, 7;
}
:root[data-accent="copper"] {
  --brand-500: #c2410c; --brand-600: #9a3412; --brand-700: #7c2d12;
  --brand-500-rgb: 194, 65, 12;
}
:root[data-accent="gold"] {
  --brand-500: #ca8a04; --brand-600: #a16207; --brand-700: #854d0e;
  --brand-500-rgb: 202, 138, 4;
}
:root[data-accent="ruby"] {
  --brand-500: #be123c; --brand-600: #9f1239; --brand-700: #881337;
  --brand-500-rgb: 190, 18, 60;
}
:root[data-accent="amethyst"] {
  --brand-500: #7c3aed; --brand-600: #6d28d9; --brand-700: #5b21b6;
  --brand-500-rgb: 124, 58, 237;
}
:root[data-accent="indigo"] {
  --brand-500: #4338ca; --brand-600: #3730a3; --brand-700: #312e81;
  --brand-500-rgb: 67, 56, 202;
}

/* ── Colour Theme picker (topbar) ─────────────────────────────────
   Swatch-grid popover — see includes/header.php for the markup and
   includes/footer.php's applyAccent()/toggleAccentPicker() for the
   behaviour. Hand-rolled popover, not a Bootstrap dropdown-menu, so
   its layout (label under each swatch, 4-per-row grid) doesn't have
   to fight Bootstrap's dropdown-item list styles. */
.accent-picker {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  width: 268px;
  display: none;
}
.accent-picker.show { display: block; }
.accent-picker-title {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;
}
.accent-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 10px;
}
.accent-swatch-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.accent-swatch-dot {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition: transform .12s ease, border-color .12s ease;
}
.accent-swatch-btn:hover .accent-swatch-dot { transform: scale(1.08); }
.accent-swatch-btn[aria-pressed="true"] .accent-swatch-dot {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--text-primary);
}
.accent-swatch-btn[aria-pressed="true"] .accent-swatch-dot::after {
  content: "\f00c"; /* Font Awesome check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px;
}
.accent-swatch-label { font-size: 11px; color: var(--text-muted); }