/*
 * AIWatermark Palette Override
 * Tones down Tailwind's vivid utility colors to a restrained, professional slate palette.
 * Load AFTER Tailwind CDN so these take precedence.
 * Covers static HTML pages + React landing page (which uses the same Tailwind class names).
 */

/* ── Green → slate-green (muted sage tones) ─────────────────────────── */
.bg-green-50  { background-color: #f6f7f5 !important; }
.bg-green-100 { background-color: #eef0eb !important; }
.bg-green-600 { background-color: #4a6741 !important; }
.bg-emerald-600 { background-color: #4a6741 !important; }
.bg-emerald-500 { background-color: #4a6741 !important; }

.from-green-50   { --tw-gradient-from: #f6f7f5 !important; }
.from-green-400  { --tw-gradient-from: #5a7a52 !important; }
.from-green-500  { --tw-gradient-from: #4a6741 !important; }
.from-emerald-50 { --tw-gradient-from: #f6f7f5 !important; }
.to-emerald-50   { --tw-gradient-to: #eef0eb !important; }
.to-emerald-500  { --tw-gradient-to: #4a6741 !important; }
.to-emerald-600  { --tw-gradient-to: #4a6741 !important; }
.to-green-50     { --tw-gradient-to: #f6f7f5 !important; }
.to-green-400    { --tw-gradient-to: #5a7a52 !important; }

.border-green-300 { border-color: #c5d0bf !important; }
.border-green-400 { border-color: #a8b8a0 !important; }
.border-green-500 { border-color: #8fa886 !important; }
.border-green-600 { border-color: #4a6741 !important; }
.border-emerald-700 { border-color: #3d5936 !important; }

.text-green-700 { color: #3d5936 !important; }
.text-green-800 { color: #344e2e !important; }
.text-green-900 { color: #2a3f25 !important; }
.text-emerald-400 { color: #5a7a52 !important; }

/* ── Teal → muted slate-teal ─────────────────────────────────────────── */
.from-teal-50   { --tw-gradient-from: #f4f6f6 !important; }
.to-teal-50     { --tw-gradient-to: #f4f6f6 !important; }
.from-emerald-50.to-teal-50 { --tw-gradient-to: #f4f6f6 !important; }
.border-teal-200 { border-color: #c5d0cf !important; }
.text-teal-700  { color: #3a5452 !important; }
.text-teal-800  { color: #2d4240 !important; }

/* ── Amber / Yellow / Orange → warm slate ───────────────────────────── */
.bg-amber-50  { background-color: #faf9f6 !important; }
.bg-amber-100 { background-color: #f4f1ea !important; }
.bg-amber-600 { background-color: #7a6645 !important; }

.from-amber-50    { --tw-gradient-from: #faf9f6 !important; }
.to-yellow-50     { --tw-gradient-to: #faf8f3 !important; }
.to-orange-50     { --tw-gradient-to: #faf7f2 !important; }

.border-amber-300 { border-color: #d4c9b0 !important; }
.border-amber-400 { border-color: #c0b299 !important; }
.border-amber-500 { border-color: #a89680 !important; }
.border-amber-600 { border-color: #7a6645 !important; }

.text-amber-800 { color: #5c4e30 !important; }
.text-amber-900 { color: #4a3d25 !important; }

.bg-yellow-50 { background-color: #faf9f5 !important; }
.border-yellow-300 { border-color: #d8d0b3 !important; }
.border-yellow-400 { border-color: #c4b990 !important; }
.text-yellow-800 { color: #5c5230 !important; }
.text-yellow-900 { color: #4a4225 !important; }

.bg-orange-50 { background-color: #faf7f3 !important; }
.border-orange-400 { border-color: #c4a070 !important; }

/* ── Red → very muted warm grey-red ─────────────────────────────────── */
.bg-red-50    { background-color: #f9f6f6 !important; }
.bg-red-100   { background-color: #f2eaea !important; }
.border-red-200 { border-color: #e0d0d0 !important; }
.border-red-500 { border-color: #a07070 !important; }
.text-red-800 { color: #6b3f3f !important; }
.text-red-900 { color: #562f2f !important; }

.from-red-50  { --tw-gradient-from: #f9f6f6 !important; }
.to-orange-50 { --tw-gradient-to: #faf7f2 !important; }

/* ── Blue → slate-blue (desaturated) ───────────────────────────────── */
.bg-blue-50   { background-color: #f5f6f8 !important; }
.bg-blue-100  { background-color: #eaecf1 !important; }
.bg-blue-600  { background-color: #3b5272 !important; }

.from-blue-50    { --tw-gradient-from: #f5f6f8 !important; }
.to-blue-50      { --tw-gradient-to: #f5f6f8 !important; }
.to-blue-100     { --tw-gradient-to: #eaecf1 !important; }
.from-blue-900   { --tw-gradient-from: #1e2a3a !important; }
.from-blue-600   { --tw-gradient-from: #3b5272 !important; }
.to-blue-700     { --tw-gradient-to: #2d3f57 !important; }

.border-blue-200 { border-color: #d0d5df !important; }
.border-blue-300 { border-color: #b8c0d0 !important; }
.border-blue-500 { border-color: #6b7fa0 !important; }
.border-blue-600 { border-color: #4a6080 !important; }

.text-blue-600 { color: #3b5272 !important; }
.text-blue-700 { color: #2d4260 !important; }
.text-blue-800 { color: #3b4f6b !important; }
.text-blue-900 { color: #2a3a52 !important; }

/* ── Purple / Pink → keep very subtle ──────────────────────────────── */
.from-slate-50.to-pink-50 { --tw-gradient-to: #f7f5f6 !important; }
.to-pink-50  { --tw-gradient-to: #f7f5f6 !important; }
.to-pink-600 { --tw-gradient-to: #4a5568 !important; }

/* ── CTA gradient (blue-900 → slate-600) — keep but slightly soften ── */
.from-blue-900.to-slate-600 {
  background-image: linear-gradient(to right, #1e2a3a, #475569) !important;
}

/* ── React landing page: specific vivid gradient overrides ───────────── */
/* Problem section (red/orange) */
.from-red-50.to-orange-50 {
  background-image: linear-gradient(to right, #f9f6f6, #faf7f2) !important;
}
/* Certificate/amber section */
.from-amber-50.to-yellow-50 {
  background-image: linear-gradient(to right, #faf9f6, #faf8f3) !important;
}
/* Pricing highlight card (blue) */
.from-blue-50.to-blue-100 {
  background-image: linear-gradient(to right, #f5f6f8, #eaecf1) !important;
}
/* Final CTA emerald section */
.from-emerald-50.to-teal-50 {
  background-image: linear-gradient(to right, #f4f6f5, #f4f6f6) !important;
}
/* Trial badge pill (green gradient) */
.from-green-400.to-emerald-500 {
  background-image: linear-gradient(to right, #5a7a52, #4a6741) !important;
}

/* ── Numbered step circles (quick-start) ────────────────────────────── */
.bg-green-600.text-white.rounded-full { background-color: #4a6741 !important; }
.bg-amber-600.text-white.rounded-full { background-color: #7a6645 !important; }

/* ── Green checkmark spans in feature lists ─────────────────────────── */
.text-green-500 { color: #5a7a52 !important; }
.text-green-600 { color: #4a6741 !important; }

/* ── Hover states ───────────────────────────────────────────────────── */
.hover\:from-blue-800:hover { --tw-gradient-from: #253347 !important; }
.hover\:to-pink-700:hover   { --tw-gradient-to:   #3d4a5c !important; }
.hover\:bg-blue-950:hover   { background-color: #151f2e !important; }
.hover\:bg-emerald-600:hover { background-color: #3d5936 !important; }