/* Theme colours are configured in config.json and emitted as CSS variables per page. */
.bg-emerald-50 { background-color: var(--theme-primary-subtle); }
.bg-emerald-100 { background-color: var(--theme-primary-soft); }
.bg-emerald-300, .bg-amber-300 { background-color: var(--theme-primary-muted); }
.bg-amber-50, .bg-amber-100 { background-color: var(--theme-accent-soft); }
.bg-\[var\(--theme-primary\)\] { background-color: var(--theme-primary); }
.text-emerald-200 { color: var(--theme-primary-soft); }
.text-emerald-300 { color: var(--theme-primary-muted); }
.text-emerald-400 { color: var(--theme-primary); }
.text-emerald-600, .text-emerald-700, .text-amber-700 { color: var(--theme-primary-strong); }
.border-emerald-200, .border-amber-200 { border-color: var(--theme-primary-soft); }
.border-emerald-300\/30 { border-color: color-mix(in srgb, var(--theme-primary-muted) 30%, transparent); }
.bg-emerald-300\/10 { background-color: color-mix(in srgb, var(--theme-primary-muted) 10%, transparent); }
.shadow-emerald-500\/20, .shadow-emerald-900\/10, .shadow-emerald-950\/20 { --tw-shadow-color: color-mix(in srgb, var(--theme-primary) 20%, transparent); }
.hover\:bg-emerald-200:hover { background-color: var(--theme-primary-soft); }
.hover\:bg-emerald-300:hover { background-color: var(--theme-primary-muted); }
.hover\:text-emerald-300:hover { color: var(--theme-primary-muted); }
.hover\:text-emerald-900:hover { color: var(--theme-primary-strong); }
.focus\:ring-emerald-400:focus { --tw-ring-color: var(--theme-primary); }
.focus\:border-emerald-300\/50:focus { border-color: color-mix(in srgb, var(--theme-primary-muted) 50%, transparent); }
.selection\:bg-emerald-200 ::selection, .selection\:bg-emerald-200::selection { background-color: var(--theme-primary-soft); }