/* =============================================================
   Cohesive dark skin for the light-bodied jurisdiction pages.
   Loaded ONLY on pages whose _rf_palette = 'light', AFTER the
   page's own CSS, so it re-colours them to the navy/gold brand
   (matching the homepage and the dark country pages) while keeping
   each page's original layout intact.

   Strategy: the light pages are token-driven, so we flip the design
   tokens to dark meanings, re-scope the few already-dark containers
   (hero/CTA), and override the handful of "text-on-gold" spots and
   hard-coded light boxes.
   ============================================================= */

/* 1) Flip the light tokens to dark-context meanings. */
:root {
	--white: #0d1e35;                       /* card / panel surface (was #fff) */
	--gray-light: #0a1628;                  /* alternating section background   */
	--gray-mid: rgba(201, 168, 76, 0.18);   /* borders                          */
	--gray-text: #8892b0;                   /* muted text                       */
	--text: #ccd6f6;                        /* body text                        */
	--navy: #e6f1ff;                        /* was dark heading text on light   */
	--gold-pale: rgba(201, 168, 76, 0.10);  /* soft gold accent fill            */
	--shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.5);
}

html { background: #060d1a; }
body { background: #060d1a !important; color: var(--text); }

/* 2) Re-scope the containers that are SUPPOSED to stay dark, where --navy is a
   background and --white is light text. */
.hero, .cta-section { --navy: #0a1628; --white: #e6f1ff; }

/* 3) Text-on-gold elements (gold background, must keep dark text). */
.btn-primary { color: #0a1628 !important; }
.step-num { color: #0a1628 !important; }
.regime-card .regime-label { color: #0a1628 !important; }
.tax-bar-fill { color: #0a1628 !important; }

/* 4) Outline button must stay light on the dark canvas. */
.btn-outline { color: #e6f1ff !important; border-color: rgba(201, 168, 76, 0.45) !important; }

/* 5) Table header keeps a dark bar + gold text. */
.tax-table th { background: #0a1628 !important; color: var(--gold) !important; }
.tax-table tr:hover td { background: rgba(201, 168, 76, 0.06) !important; }

/* 6) Card icon chips: gold-tinted instead of cream. */
.card-icon { background: linear-gradient(135deg, rgba(201, 168, 76, 0.20), rgba(201, 168, 76, 0.06)) !important; }

/* 7) Tag pills: gold text on a soft gold fill. */
.profile-tag { background: rgba(201, 168, 76, 0.12) !important; color: var(--gold-light) !important; }

/* 8) Badges (originally pastel light) → dark-tinted. */
.badge-green { background: rgba(46, 204, 113, 0.15) !important; color: #2ecc71 !important; }
.badge-amber { background: rgba(243, 156, 18, 0.15) !important; color: #f39c12 !important; }
.badge-red { background: rgba(231, 76, 60, 0.15) !important; color: #e74c3c !important; }

/* 9) The few hard-coded light callout boxes inside some bodies (inline styles).
   Keep their coloured left border; darken only the light gradient fill. */
[style*="#fff8e6"], [style*="#fffbf0"], [style*="#fef9e7"] { background: rgba(201, 168, 76, 0.08) !important; }
[style*="#f0fdf4"], [style*="#dcfce7"] { background: rgba(46, 204, 113, 0.10) !important; }
[style*="#fee2e2"], [style*="#fef2f2"] { background: rgba(231, 76, 60, 0.10) !important; }
[style*="background:white"], [style*="background: white"] { background: #0d1e35 !important; border: 1px solid var(--gray-mid) !important; }

/* 10) Soft shadows look heavier on dark — keep cards crisp with a subtle border glow. */
.card:hover, .regime-card:hover, .profile-card:hover { box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55) !important; }