/* =====================================================================
   Page Themes – Complete Visual Identity System
   Applied via body[data-page-theme="..."]
   Each theme transforms colors, typography, shapes, shadows,
   and decorative elements across the entire site.

   Themes work independently of layouts — any theme can be
   combined with any layout preset for maximum flexibility.
   ===================================================================== */


/* ── Smooth transition layer ──────────────────────────────────────── */

body[data-page-theme] {
  transition: background-color 0.5s ease, color 0.5s ease;
}

body[data-page-theme] header,
body[data-page-theme] .hero,
body[data-page-theme] .card,
body[data-page-theme] .section-header,
body[data-page-theme] .btn,
body[data-page-theme] .stacked-list li,
body[data-page-theme] footer,
body[data-page-theme] input,
body[data-page-theme] textarea,
body[data-page-theme] select,
body[data-page-theme] .hero-badge,
body[data-page-theme] .hero-title,
body[data-page-theme] .hero-tagline {
  transition: background-color 0.4s ease, color 0.4s ease,
              border-color 0.4s ease, box-shadow 0.4s ease;
}


/* =====================================================================
   SHARED APPLICATION RULES
   These reference CSS custom properties defined per-theme below.
   They only apply when a non-default theme is active.
   ===================================================================== */

body[data-page-theme] {
  background: var(--t-bg);
  color: var(--t-text);
}

body[data-page-theme] .container {
  background-color: transparent;
}

/* ── Header / Navigation ──────────────────────────────────────────── */

body[data-page-theme] header {
  --nav-bg: var(--t-nav-bg);
  --nav-dropdown-bg: var(--t-nav-bg);
  box-shadow: var(--t-nav-shadow, 0 2px 6px rgba(15,23,42,0.25));
}

body[data-page-theme] .brand-title h3 {
  color: var(--t-nav-text, #ffffff);
}

body[data-page-theme] nav .main-nav > li > a {
  color: var(--t-nav-text, #f9f9f9);
}

body[data-page-theme] .dropdown-menu a {
  color: var(--t-nav-text, #f0f4f8);
}

body[data-page-theme] .hamburger span {
  background: var(--t-nav-text, #f9f9f9);
}

/* ── Hero ──────────────────────────────────────────────────────────── */

body[data-page-theme] .hero-title {
  color: var(--t-heading);
}

body[data-page-theme] .hero-tagline {
  color: var(--t-text);
}

body[data-page-theme] .hero-badge {
  background: var(--t-badge-bg);
  color: var(--t-primary);
}

body[data-page-theme] .hero-badge span {
  color: var(--t-primary);
}

/* ── Sections ─────────────────────────────────────────────────────── */

body[data-page-theme] .section-label {
  color: var(--t-label);
}

body[data-page-theme] .section-title {
  color: var(--t-heading);
}

body[data-page-theme] .section-subtitle {
  color: var(--t-text-muted);
}

/* ── Cards ─────────────────────────────────────────────────────────── */

body[data-page-theme] .card {
  background: var(--t-surface);
  border-color: var(--t-border);
  box-shadow: var(--t-card-shadow);
  border-radius: var(--t-radius, 0.9rem);
}

body[data-page-theme] .card-title {
  color: var(--t-heading);
}

body[data-page-theme] .card-body {
  color: var(--t-text-muted);
}

body[data-page-theme] .card-price {
  color: var(--t-primary);
}

body[data-page-theme] .card-meta {
  color: var(--t-text-muted);
}

/* ── Buttons ──────────────────────────────────────────────────────── */

body[data-page-theme] .btn-primary {
  background: var(--t-primary);
  border-color: var(--t-primary);
  color: var(--t-btn-primary-text, #ffffff);
}

body[data-page-theme] .btn-outline {
  background: transparent;
  color: var(--t-primary);
  border-color: var(--t-border-strong, var(--t-border));
}

/* ── Lists ─────────────────────────────────────────────────────────── */

body[data-page-theme] .stacked-list li {
  background: var(--t-surface);
  border-color: var(--t-border);
}

body[data-page-theme] .stacked-list strong {
  color: var(--t-heading);
}

body[data-page-theme] .notice-list li,
body[data-page-theme] .service-list li {
  color: var(--t-text);
}

/* ── Text helpers ──────────────────────────────────────────────────── */

body[data-page-theme] .muted {
  color: var(--t-text-muted);
}

body[data-page-theme] .lead {
  color: var(--t-text);
}

body[data-page-theme] a:not(.btn):not(.brand):not([class*="nav"]) {
  color: var(--t-primary);
}

/* ── Footer ───────────────────────────────────────────────────────── */

body[data-page-theme] footer {
  background: var(--t-footer-bg);
  color: var(--t-footer-text, #e5e7eb);
}

body[data-page-theme] .footer-nav a {
  color: var(--t-text-muted);
}

body[data-page-theme] .footer-tagline {
  color: var(--t-text-muted);
}

body[data-page-theme] .footer-link {
  color: var(--t-primary);
}

body[data-page-theme] .footer-text {
  color: var(--t-footer-text, #e5e7eb);
}

/* ── Forms ─────────────────────────────────────────────────────────── */

body[data-page-theme] input,
body[data-page-theme] textarea,
body[data-page-theme] select {
  background: var(--t-input-bg, var(--t-surface));
  border-color: var(--t-border);
  color: var(--t-text);
}

body[data-page-theme] input:focus,
body[data-page-theme] textarea:focus,
body[data-page-theme] select:focus {
  outline-color: var(--t-primary);
  border-color: var(--t-primary);
  box-shadow: 0 0 0 3px var(--t-focus-ring, rgba(12,68,102,0.1));
}

body[data-page-theme] label {
  color: var(--t-text);
}

/* ── Gallery ──────────────────────────────────────────────────────── */

body[data-page-theme] .gallery img {
  border-color: var(--t-border);
}

/* ── Product-specific ─────────────────────────────────────────────── */

body[data-page-theme] .product-card {
  background: var(--t-surface);
  border-color: var(--t-border);
}

body[data-page-theme] .sidebar {
  color: var(--t-text);
}


/* =====================================================================
   THEME DEFINITIONS
   Each theme sets CSS custom properties that the shared rules above
   consume. Theme-specific extras follow each definition.
   ===================================================================== */


/* ─── Midnight ────────────────────────────────────────────────────── */
/* Inspired by: GitHub dark, VS Code — deep dark with blue highlights  */

body[data-page-theme="midnight"] {
  --t-bg: #0d1117;
  --t-text: #c9d1d9;
  --t-text-muted: #8b949e;
  --t-heading: #f0f6fc;
  --t-primary: #58a6ff;
  --t-label: #58a6ff;
  --t-surface: #161b22;
  --t-border: rgba(240,246,252,0.1);
  --t-border-strong: rgba(240,246,252,0.2);
  --t-card-shadow: 0 3px 12px rgba(0,0,0,0.4);
  --t-radius: 8px;
  --t-nav-bg: #161b22;
  --t-nav-text: #c9d1d9;
  --t-nav-shadow: 0 1px 0 rgba(240,246,252,0.1);
  --t-footer-bg: #0d1117;
  --t-footer-text: #8b949e;
  --t-badge-bg: rgba(88,166,255,0.12);
  --t-btn-primary-text: #0d1117;
  --t-input-bg: #0d1117;
  --t-focus-ring: rgba(88,166,255,0.2);
}

body[data-page-theme="midnight"] .hero-media img,
body[data-page-theme="midnight"] .hero-media video {
  border-radius: 8px;
  border: 1px solid rgba(240,246,252,0.1);
}

body[data-page-theme="midnight"] .hero-cta .btn-outline {
  color: #c9d1d9;
  border-color: rgba(240,246,252,0.2);
}

body[data-page-theme="midnight"] .card:hover {
  border-color: rgba(88,166,255,0.3);
  box-shadow: 0 4px 20px rgba(88,166,255,0.08);
}

body[data-page-theme="midnight"] nav .main-nav > li.active > a {
  border-bottom-color: #58a6ff;
}

body[data-page-theme="midnight"] .dropdown-menu a:hover {
  border-left-color: #58a6ff;
  background-color: rgba(88,166,255,0.08);
}

body[data-page-theme="midnight"] .stacked-list li:hover {
  border-color: rgba(88,166,255,0.2);
}

body[data-page-theme="midnight"] .card img.card-thumb {
  border-radius: 6px;
}

body[data-page-theme="midnight"] .section {
  position: relative;
}

body[data-page-theme="midnight"] .section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(240,246,252,0.06);
  margin-bottom: 2rem;
}


/* ─── Sunset ──────────────────────────────────────────────────────── */
/* Inspired by: Warm SaaS brands — inviting orange tones, soft shapes */

body[data-page-theme="sunset"] {
  --t-bg: #fffbf5;
  --t-text: #431407;
  --t-text-muted: #9a3412;
  --t-heading: #7c2d12;
  --t-primary: #ea580c;
  --t-label: #c2410c;
  --t-surface: #ffffff;
  --t-border: rgba(234,88,12,0.12);
  --t-border-strong: rgba(234,88,12,0.25);
  --t-card-shadow: 0 4px 20px rgba(234,88,12,0.08);
  --t-radius: 16px;
  --t-nav-bg: #7c2d12;
  --t-nav-text: #fef3c7;
  --t-nav-shadow: 0 2px 8px rgba(124,45,18,0.3);
  --t-footer-bg: #431407;
  --t-footer-text: #fed7aa;
  --t-badge-bg: rgba(234,88,12,0.1);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(234,88,12,0.15);
}

body[data-page-theme="sunset"] .card {
  border-radius: 16px;
}

body[data-page-theme="sunset"] .btn {
  border-radius: 999px;
}

body[data-page-theme="sunset"] .hero-media img {
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(234,88,12,0.12);
}

body[data-page-theme="sunset"] .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(234,88,12,0.15);
}

body[data-page-theme="sunset"] .btn-primary:hover {
  background: #c2410c;
  border-color: #c2410c;
}

body[data-page-theme="sunset"] nav .main-nav > li.active > a {
  border-bottom-color: #fbbf24;
}

body[data-page-theme="sunset"] .dropdown-menu a:hover {
  border-left-color: #fbbf24;
}

body[data-page-theme="sunset"] .footer-link {
  color: #fb923c;
}

body[data-page-theme="sunset"] .section-header {
  position: relative;
  padding-left: 18px;
}

body[data-page-theme="sunset"] .section-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #ea580c, #f97316);
  border-radius: 2px;
}

body[data-page-theme="sunset"] .hero-cta .btn-outline {
  color: #7c2d12;
  border-color: rgba(124,45,18,0.3);
}

body[data-page-theme="sunset"] .stacked-list li {
  border-radius: 12px;
}

body[data-page-theme="sunset"] .hero-badge {
  border-radius: 999px;
}

body[data-page-theme="sunset"] .gallery img {
  border-radius: 12px;
}


/* ─── Forest ──────────────────────────────────────────────────────── */
/* Inspired by: Sustainable/organic brands — earthy greens, nature     */

body[data-page-theme="forest"] {
  --t-bg: #f7f7f2;
  --t-text: #1a1a1a;
  --t-text-muted: #4a5043;
  --t-heading: #1b4332;
  --t-primary: #2d6a4f;
  --t-label: #40916c;
  --t-surface: #ffffff;
  --t-border: rgba(45,106,79,0.12);
  --t-border-strong: rgba(45,106,79,0.25);
  --t-card-shadow: 0 2px 12px rgba(27,67,50,0.06);
  --t-radius: 8px;
  --t-nav-bg: #1b4332;
  --t-nav-text: #d8f3dc;
  --t-nav-shadow: 0 2px 8px rgba(27,67,50,0.3);
  --t-footer-bg: #1b4332;
  --t-footer-text: #b7e4c7;
  --t-badge-bg: rgba(45,106,79,0.08);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(45,106,79,0.15);
}

body[data-page-theme="forest"] .hero-media img {
  border-radius: 12px;
  border: 2px solid rgba(45,106,79,0.1);
}

body[data-page-theme="forest"] .card {
  border-left: 3px solid rgba(45,106,79,0.15);
}

body[data-page-theme="forest"] .card:hover {
  border-left-color: #2d6a4f;
}

body[data-page-theme="forest"] .section-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

body[data-page-theme="forest"] nav .main-nav > li.active > a {
  border-bottom-color: #52b788;
}

body[data-page-theme="forest"] .dropdown-menu a:hover {
  border-left-color: #52b788;
}

body[data-page-theme="forest"] .footer-link {
  color: #52b788;
}

body[data-page-theme="forest"] .stacked-list li {
  border-left: 3px solid transparent;
  transition: border-color 0.2s;
}

body[data-page-theme="forest"] .stacked-list li:hover {
  border-left-color: #2d6a4f;
}

body[data-page-theme="forest"] .hero-cta .btn-outline {
  color: #2d6a4f;
  border-color: rgba(45,106,79,0.3);
}

body[data-page-theme="forest"] .section-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-page-theme="forest"] .section-label::before {
  content: '\25CF';
  font-size: 6px;
  color: #40916c;
}

body[data-page-theme="forest"] .hero-title {
  font-weight: 800;
}


/* ─── Aurora ──────────────────────────────────────────────────────── */
/* Inspired by: Modern SaaS/Vercel — purple hues, glass effects       */

body[data-page-theme="aurora"] {
  --t-bg: #faf5ff;
  --t-text: #1e1b4b;
  --t-text-muted: #6d28d9;
  --t-heading: #4c1d95;
  --t-primary: #7c3aed;
  --t-label: #8b5cf6;
  --t-surface: rgba(255,255,255,0.7);
  --t-border: rgba(124,58,237,0.1);
  --t-border-strong: rgba(124,58,237,0.25);
  --t-card-shadow: 0 4px 24px rgba(124,58,237,0.08);
  --t-radius: 16px;
  --t-nav-bg: #4c1d95;
  --t-nav-text: #ede9fe;
  --t-nav-shadow: 0 2px 12px rgba(76,29,149,0.35);
  --t-footer-bg: #1e1b4b;
  --t-footer-text: #c4b5fd;
  --t-badge-bg: rgba(124,58,237,0.1);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(124,58,237,0.2);
}

body[data-page-theme="aurora"] .card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(124,58,237,0.12);
}

body[data-page-theme="aurora"] .card:hover {
  background: rgba(255,255,255,0.85);
  box-shadow: 0 8px 32px rgba(124,58,237,0.12);
  transform: translateY(-2px);
}

body[data-page-theme="aurora"] .hero-media img {
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(124,58,237,0.15);
}

body[data-page-theme="aurora"] .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  border-color: transparent;
}

body[data-page-theme="aurora"] .hero-badge {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body[data-page-theme="aurora"] nav .main-nav > li.active > a {
  border-bottom-color: #a78bfa;
}

body[data-page-theme="aurora"] .dropdown-menu a:hover {
  border-left-color: #a78bfa;
}

body[data-page-theme="aurora"] .footer-link {
  color: #a78bfa;
}

body[data-page-theme="aurora"] .stacked-list li {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(255,255,255,0.5);
}

body[data-page-theme="aurora"] .hero-cta .btn-outline {
  color: #7c3aed;
  border-color: rgba(124,58,237,0.3);
}

body[data-page-theme="aurora"] .section-header {
  position: relative;
}

body[data-page-theme="aurora"] .section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  border-radius: 2px;
  margin-top: 0.5rem;
}

body[data-page-theme="aurora"] .gallery img {
  border-radius: 12px;
}


/* ─── Monochrome ──────────────────────────────────────────────────── */
/* Inspired by: Swiss/Bauhaus design — pure contrast, bold type       */

body[data-page-theme="monochrome"] {
  --t-bg: #ffffff;
  --t-text: #1a1a1a;
  --t-text-muted: #666666;
  --t-heading: #000000;
  --t-primary: #000000;
  --t-label: #888888;
  --t-surface: #f8f8f8;
  --t-border: #e0e0e0;
  --t-border-strong: #000000;
  --t-card-shadow: none;
  --t-radius: 0px;
  --t-nav-bg: #000000;
  --t-nav-text: #ffffff;
  --t-nav-shadow: none;
  --t-footer-bg: #000000;
  --t-footer-text: #999999;
  --t-badge-bg: #f0f0f0;
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(0,0,0,0.1);
}

body[data-page-theme="monochrome"] .card {
  border-radius: 0;
  border: 2px solid #000000;
  box-shadow: none;
}

body[data-page-theme="monochrome"] .btn {
  border-radius: 0;
}

body[data-page-theme="monochrome"] .hero-badge {
  border-radius: 0;
  border: 1px solid #000000;
  background: transparent;
}

body[data-page-theme="monochrome"] .hero-badge span {
  color: #000000;
}

body[data-page-theme="monochrome"] .hero-title {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

body[data-page-theme="monochrome"] .section-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

body[data-page-theme="monochrome"] .section-label {
  letter-spacing: 0.2em;
  font-weight: 700;
}

body[data-page-theme="monochrome"] .hero-media img {
  border-radius: 0;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

body[data-page-theme="monochrome"] .hero-media img:hover {
  filter: grayscale(0%);
}

body[data-page-theme="monochrome"] .card img.card-thumb {
  border-radius: 0;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

body[data-page-theme="monochrome"] .card:hover img.card-thumb {
  filter: grayscale(0%);
}

body[data-page-theme="monochrome"] .stacked-list li {
  border-radius: 0;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #000000;
}

body[data-page-theme="monochrome"] .gallery img {
  border-radius: 0;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

body[data-page-theme="monochrome"] .gallery img:hover {
  filter: grayscale(0%);
}

body[data-page-theme="monochrome"] .btn-primary:hover {
  background: #333333;
}

body[data-page-theme="monochrome"] nav .main-nav > li.active > a {
  border-bottom-color: #ffffff;
}

body[data-page-theme="monochrome"] .dropdown-menu a:hover {
  border-left-color: #ffffff;
}

body[data-page-theme="monochrome"] .hero-cta .btn-outline {
  color: #000000;
  border-color: #000000;
}

body[data-page-theme="monochrome"] .hero-cta .btn-outline:hover {
  background: #000000;
  color: #ffffff;
}

body[data-page-theme="monochrome"] .section + .section {
  border-top: 2px solid #000000;
  padding-top: 2.5rem;
}

body[data-page-theme="monochrome"] .card:hover {
  background: #000000;
  color: #ffffff;
}

body[data-page-theme="monochrome"] .card:hover .card-title {
  color: #ffffff;
}

body[data-page-theme="monochrome"] .card:hover .card-body {
  color: #cccccc;
}

body[data-page-theme="monochrome"] .card:hover .card-price {
  color: #ffffff;
}


/* ─── Ocean ───────────────────────────────────────────────────────── */
/* Inspired by: Stripe/Tailwind — fresh teal, clean and airy          */

body[data-page-theme="ocean"] {
  --t-bg: #f0f9ff;
  --t-text: #0c4a6e;
  --t-text-muted: #0369a1;
  --t-heading: #164e63;
  --t-primary: #0891b2;
  --t-label: #0e7490;
  --t-surface: #ffffff;
  --t-border: rgba(8,145,178,0.1);
  --t-border-strong: rgba(8,145,178,0.25);
  --t-card-shadow: 0 4px 16px rgba(8,145,178,0.06);
  --t-radius: 12px;
  --t-nav-bg: #164e63;
  --t-nav-text: #cffafe;
  --t-nav-shadow: 0 2px 8px rgba(22,78,99,0.3);
  --t-footer-bg: #164e63;
  --t-footer-text: #a5f3fc;
  --t-badge-bg: rgba(8,145,178,0.08);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(8,145,178,0.15);
}

body[data-page-theme="ocean"] .hero-media img {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8,145,178,0.12);
}

body[data-page-theme="ocean"] .card:hover {
  box-shadow: 0 8px 24px rgba(8,145,178,0.12);
  transform: translateY(-2px);
}

body[data-page-theme="ocean"] nav .main-nav > li.active > a {
  border-bottom-color: #22d3ee;
}

body[data-page-theme="ocean"] .dropdown-menu a:hover {
  border-left-color: #22d3ee;
}

body[data-page-theme="ocean"] .footer-link {
  color: #22d3ee;
}

body[data-page-theme="ocean"] .section-title {
  position: relative;
  display: inline-block;
}

body[data-page-theme="ocean"] .section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #0891b2, #06b6d4);
  border-radius: 2px;
  margin-top: 0.5rem;
}

body[data-page-theme="ocean"] .hero-cta .btn-outline {
  color: #0891b2;
  border-color: rgba(8,145,178,0.3);
}

body[data-page-theme="ocean"] .card {
  border-top: 3px solid transparent;
}

body[data-page-theme="ocean"] .card:hover {
  border-top-color: #0891b2;
}

body[data-page-theme="ocean"] .gallery img {
  border-radius: 10px;
}

body[data-page-theme="ocean"] .stacked-list li {
  border-radius: 10px;
}


/* ─── Ember ───────────────────────────────────────────────────────── */
/* Inspired by: Gaming/tech brands — dark with fiery red-orange       */

body[data-page-theme="ember"] {
  --t-bg: #0c0a09;
  --t-text: #e7e5e4;
  --t-text-muted: #a8a29e;
  --t-heading: #fafaf9;
  --t-primary: #dc2626;
  --t-label: #f59e0b;
  --t-surface: #1c1917;
  --t-border: rgba(220,38,38,0.15);
  --t-border-strong: rgba(220,38,38,0.3);
  --t-card-shadow: 0 4px 20px rgba(0,0,0,0.5);
  --t-radius: 8px;
  --t-nav-bg: #1c1917;
  --t-nav-text: #e7e5e4;
  --t-nav-shadow: 0 1px 0 rgba(220,38,38,0.2);
  --t-footer-bg: #0c0a09;
  --t-footer-text: #78716c;
  --t-badge-bg: rgba(220,38,38,0.12);
  --t-btn-primary-text: #ffffff;
  --t-input-bg: #1c1917;
  --t-focus-ring: rgba(220,38,38,0.2);
}

body[data-page-theme="ember"] .card {
  border-top: 2px solid #dc2626;
  border-image: linear-gradient(90deg, #dc2626, #f59e0b) 1;
  border-image-slice: 1 0 0 0;
}

body[data-page-theme="ember"] .card:hover {
  box-shadow: 0 0 24px rgba(220,38,38,0.15);
}

body[data-page-theme="ember"] .hero-media img {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

body[data-page-theme="ember"] .btn-primary {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-color: transparent;
}

body[data-page-theme="ember"] .hero-badge span {
  color: #f59e0b;
}

body[data-page-theme="ember"] .hero-cta .btn-outline {
  color: #e7e5e4;
  border-color: rgba(231,229,228,0.2);
}

body[data-page-theme="ember"] .stacked-list li:hover {
  border-color: rgba(220,38,38,0.3);
}

body[data-page-theme="ember"] nav .main-nav > li.active > a {
  border-bottom-color: #dc2626;
}

body[data-page-theme="ember"] .dropdown-menu a:hover {
  border-left-color: #dc2626;
  background-color: rgba(220,38,38,0.08);
}

body[data-page-theme="ember"] .footer-link {
  color: #dc2626;
}

body[data-page-theme="ember"] .section-label {
  position: relative;
  padding-left: 16px;
}

body[data-page-theme="ember"] .section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 8px rgba(220,38,38,0.5);
}

body[data-page-theme="ember"] .hero-title {
  letter-spacing: -0.03em;
}

body[data-page-theme="ember"] .section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(220,38,38,0.3), transparent);
  margin-bottom: 2rem;
}


/* ─── Lavender ─────────────────────────────────────────────────────── */
/* Inspired by: Wellness/lifestyle brands — soft pastels, airy feel    */

body[data-page-theme="lavender"] {
  --t-bg: #f3e8ff;
  --t-text: #3b0764;
  --t-text-muted: #7e22ce;
  --t-heading: #581c87;
  --t-primary: #a855f7;
  --t-label: #c084fc;
  --t-surface: #ffffff;
  --t-border: rgba(168,85,247,0.12);
  --t-border-strong: rgba(168,85,247,0.25);
  --t-card-shadow: 0 4px 20px rgba(168,85,247,0.08);
  --t-radius: 20px;
  --t-nav-bg: #7e22ce;
  --t-nav-text: #f5f3ff;
  --t-nav-shadow: 0 2px 12px rgba(126,34,206,0.25);
  --t-footer-bg: #581c87;
  --t-footer-text: #e9d5ff;
  --t-badge-bg: rgba(168,85,247,0.1);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(168,85,247,0.2);
}

body[data-page-theme="lavender"] .hero-media img {
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(192,132,252,0.18);
}

body[data-page-theme="lavender"] .card {
  border-radius: 20px;
  border: 1px solid rgba(168,85,247,0.1);
}

body[data-page-theme="lavender"] .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(168,85,247,0.14);
  border-color: rgba(168,85,247,0.25);
}

body[data-page-theme="lavender"] .btn {
  border-radius: 999px;
}

body[data-page-theme="lavender"] .btn-primary {
  background: linear-gradient(135deg, #a855f7, #d8b4fe);
  border-color: transparent;
}

body[data-page-theme="lavender"] .hero-badge {
  border-radius: 999px;
}

body[data-page-theme="lavender"] nav .main-nav > li.active > a {
  border-bottom-color: #d8b4fe;
}

body[data-page-theme="lavender"] .dropdown-menu a:hover {
  border-left-color: #d8b4fe;
  background-color: rgba(168,85,247,0.08);
}

body[data-page-theme="lavender"] .footer-link {
  color: #d8b4fe;
}

body[data-page-theme="lavender"] .hero-cta .btn-outline {
  color: #7e22ce;
  border-color: rgba(126,34,206,0.3);
}

body[data-page-theme="lavender"] .stacked-list li {
  border-radius: 16px;
}

body[data-page-theme="lavender"] .stacked-list li:hover {
  background: rgba(243,232,255,0.5);
}

body[data-page-theme="lavender"] .section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #a855f7, #f0abfc);
  border-radius: 999px;
  margin-top: 0.5rem;
}

body[data-page-theme="lavender"] .gallery img {
  border-radius: 16px;
}


/* ─── Slate ────────────────────────────────────────────────────────── */
/* Inspired by: Corporate platforms — authoritative neutral grays      */

body[data-page-theme="slate"] {
  --t-bg: #1e293b;
  --t-text: #cbd5e1;
  --t-text-muted: #94a3b8;
  --t-heading: #f1f5f9;
  --t-primary: #64748b;
  --t-label: #94a3b8;
  --t-surface: #334155;
  --t-border: rgba(148,163,184,0.15);
  --t-border-strong: rgba(148,163,184,0.3);
  --t-card-shadow: 0 2px 12px rgba(0,0,0,0.3);
  --t-radius: 6px;
  --t-nav-bg: #0f172a;
  --t-nav-text: #e2e8f0;
  --t-nav-shadow: 0 1px 0 rgba(148,163,184,0.1);
  --t-footer-bg: #0f172a;
  --t-footer-text: #64748b;
  --t-badge-bg: rgba(100,116,139,0.15);
  --t-btn-primary-text: #ffffff;
  --t-input-bg: #1e293b;
  --t-focus-ring: rgba(100,116,139,0.25);
}

body[data-page-theme="slate"] .hero-media img {
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,0.15);
}

body[data-page-theme="slate"] .card {
  border-left: 3px solid rgba(100,116,139,0.2);
}

body[data-page-theme="slate"] .card:hover {
  border-left-color: #94a3b8;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

body[data-page-theme="slate"] .section-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  font-size: 0.75rem;
}

body[data-page-theme="slate"] nav .main-nav > li.active > a {
  border-bottom-color: #94a3b8;
}

body[data-page-theme="slate"] .dropdown-menu a:hover {
  border-left-color: #94a3b8;
  background-color: rgba(148,163,184,0.08);
}

body[data-page-theme="slate"] .footer-link {
  color: #94a3b8;
}

body[data-page-theme="slate"] .hero-cta .btn-outline {
  color: #cbd5e1;
  border-color: rgba(203,213,225,0.25);
}

body[data-page-theme="slate"] .stacked-list li:hover {
  border-color: rgba(148,163,184,0.3);
}

body[data-page-theme="slate"] .section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(148,163,184,0.1);
  margin-bottom: 2rem;
}

body[data-page-theme="slate"] .hero-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

body[data-page-theme="slate"] .btn-primary:hover {
  background: #475569;
  border-color: #475569;
}


/* ─── Candy ────────────────────────────────────────────────────────── */
/* Inspired by: Creative agencies — playful pink, bubbly shapes        */

body[data-page-theme="candy"] {
  --t-bg: #fdf2f8;
  --t-text: #831843;
  --t-text-muted: #be185d;
  --t-heading: #9d174d;
  --t-primary: #ec4899;
  --t-label: #f472b6;
  --t-surface: #ffffff;
  --t-border: rgba(236,72,153,0.12);
  --t-border-strong: rgba(236,72,153,0.3);
  --t-card-shadow: 0 6px 24px rgba(236,72,153,0.1);
  --t-radius: 24px;
  --t-nav-bg: #be185d;
  --t-nav-text: #fce7f3;
  --t-nav-shadow: 0 4px 12px rgba(190,24,93,0.3);
  --t-footer-bg: #831843;
  --t-footer-text: #fbcfe8;
  --t-badge-bg: rgba(236,72,153,0.1);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(236,72,153,0.2);
}

body[data-page-theme="candy"] .card {
  border-radius: 24px;
  border: 2px solid rgba(236,72,153,0.1);
}

body[data-page-theme="candy"] .card:hover {
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: 0 12px 32px rgba(236,72,153,0.18);
  border-color: rgba(236,72,153,0.3);
}

body[data-page-theme="candy"] .btn {
  border-radius: 999px;
  font-weight: 700;
}

body[data-page-theme="candy"] .btn-primary {
  background: linear-gradient(135deg, #ec4899, #f9a8d4);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(236,72,153,0.25);
}

body[data-page-theme="candy"] .hero-badge {
  border-radius: 999px;
  border: 2px dashed rgba(236,72,153,0.3);
  background: rgba(236,72,153,0.06);
}

body[data-page-theme="candy"] .hero-media img {
  border-radius: 28px;
  box-shadow: 0 12px 40px rgba(236,72,153,0.15);
}

body[data-page-theme="candy"] nav .main-nav > li.active > a {
  border-bottom-color: #f9a8d4;
}

body[data-page-theme="candy"] .dropdown-menu a:hover {
  border-left-color: #f9a8d4;
  background-color: rgba(236,72,153,0.06);
}

body[data-page-theme="candy"] .footer-link {
  color: #f9a8d4;
}

body[data-page-theme="candy"] .hero-cta .btn-outline {
  color: #ec4899;
  border-color: rgba(236,72,153,0.35);
}

body[data-page-theme="candy"] .stacked-list li {
  border-radius: 20px;
}

body[data-page-theme="candy"] .stacked-list li:hover {
  background: rgba(252,231,243,0.5);
  border-color: rgba(236,72,153,0.2);
}

body[data-page-theme="candy"] .section-title {
  position: relative;
  display: inline-block;
}

body[data-page-theme="candy"] .section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #ec4899, #f9a8d4, #ec4899);
  border-radius: 999px;
  margin-top: 0.6rem;
}

body[data-page-theme="candy"] .gallery img {
  border-radius: 20px;
}

body[data-page-theme="candy"] .hero-title {
  font-weight: 800;
}


/* ─── Copper ───────────────────────────────────────────────────────── */
/* Inspired by: Luxury/artisan brands — warm metallic, cream tones     */

body[data-page-theme="copper"] {
  --t-bg: #faf6f1;
  --t-text: #3d2b1f;
  --t-text-muted: #78593e;
  --t-heading: #78451e;
  --t-primary: #b87333;
  --t-label: #cd853f;
  --t-surface: #ffffff;
  --t-border: rgba(184,115,51,0.12);
  --t-border-strong: rgba(184,115,51,0.3);
  --t-card-shadow: 0 3px 16px rgba(120,69,30,0.08);
  --t-radius: 8px;
  --t-nav-bg: #78451e;
  --t-nav-text: #fdf4e8;
  --t-nav-shadow: 0 2px 8px rgba(120,69,30,0.3);
  --t-footer-bg: #3d2b1f;
  --t-footer-text: #d4a76a;
  --t-badge-bg: rgba(184,115,51,0.1);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(184,115,51,0.2);
}

body[data-page-theme="copper"] .hero-media img {
  border-radius: 8px;
  border: 2px solid rgba(184,115,51,0.15);
  box-shadow: 0 8px 28px rgba(120,69,30,0.12);
}

body[data-page-theme="copper"] .card {
  border-bottom: 3px solid rgba(184,115,51,0.15);
}

body[data-page-theme="copper"] .card:hover {
  border-bottom-color: #b87333;
  box-shadow: 0 6px 24px rgba(184,115,51,0.12);
}

body[data-page-theme="copper"] .btn-primary {
  background: linear-gradient(135deg, #b87333, #cd853f);
  border-color: transparent;
}

body[data-page-theme="copper"] .hero-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}

body[data-page-theme="copper"] .section-title {
  font-weight: 700;
}

body[data-page-theme="copper"] nav .main-nav > li.active > a {
  border-bottom-color: #cd853f;
}

body[data-page-theme="copper"] .dropdown-menu a:hover {
  border-left-color: #cd853f;
  background-color: rgba(184,115,51,0.06);
}

body[data-page-theme="copper"] .footer-link {
  color: #cd853f;
}

body[data-page-theme="copper"] .hero-cta .btn-outline {
  color: #b87333;
  border-color: rgba(184,115,51,0.35);
}

body[data-page-theme="copper"] .stacked-list li {
  border-left: 3px solid transparent;
}

body[data-page-theme="copper"] .stacked-list li:hover {
  border-left-color: #b87333;
}

body[data-page-theme="copper"] .section-label {
  letter-spacing: 0.08em;
  font-weight: 600;
}

body[data-page-theme="copper"] .section-header::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, #b87333, #cd853f);
  margin-top: 0.75rem;
}

body[data-page-theme="copper"] .gallery img {
  border-radius: 6px;
  border: 1px solid rgba(184,115,51,0.1);
}

body[data-page-theme="copper"] .hero-badge {
  border: 1px solid rgba(184,115,51,0.2);
}


/* ─── Nordic ───────────────────────────────────────────────────────── */
/* Inspired by: Scandinavian design — icy blue, minimalist, clean      */

body[data-page-theme="nordic"] {
  --t-bg: #f0f4f8;
  --t-text: #2c3e50;
  --t-text-muted: #5b7a94;
  --t-heading: #1a2a3a;
  --t-primary: #5b7a94;
  --t-label: #7b9db8;
  --t-surface: #ffffff;
  --t-border: rgba(91,122,148,0.1);
  --t-border-strong: rgba(91,122,148,0.22);
  --t-card-shadow: 0 2px 8px rgba(44,62,80,0.04);
  --t-radius: 6px;
  --t-nav-bg: #2c3e50;
  --t-nav-text: #e8eef4;
  --t-nav-shadow: 0 1px 4px rgba(44,62,80,0.15);
  --t-footer-bg: #2c3e50;
  --t-footer-text: #7b9db8;
  --t-badge-bg: rgba(91,122,148,0.08);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(91,122,148,0.15);
}

body[data-page-theme="nordic"] .hero-media img {
  border-radius: 4px;
  border: 1px solid rgba(91,122,148,0.1);
}

body[data-page-theme="nordic"] .card {
  border: 1px solid rgba(91,122,148,0.1);
  box-shadow: none;
}

body[data-page-theme="nordic"] .card:hover {
  border-color: rgba(91,122,148,0.25);
  box-shadow: 0 4px 12px rgba(44,62,80,0.06);
}

body[data-page-theme="nordic"] .section-title {
  font-weight: 300;
  letter-spacing: 0.02em;
}

body[data-page-theme="nordic"] .hero-title {
  font-weight: 300;
  letter-spacing: 0.01em;
}

body[data-page-theme="nordic"] nav .main-nav > li.active > a {
  border-bottom-color: #7b9db8;
}

body[data-page-theme="nordic"] .dropdown-menu a:hover {
  border-left-color: #7b9db8;
  background-color: rgba(91,122,148,0.06);
}

body[data-page-theme="nordic"] .footer-link {
  color: #7b9db8;
}

body[data-page-theme="nordic"] .hero-cta .btn-outline {
  color: #5b7a94;
  border-color: rgba(91,122,148,0.25);
}

body[data-page-theme="nordic"] .stacked-list li {
  border: 1px solid rgba(91,122,148,0.08);
}

body[data-page-theme="nordic"] .stacked-list li:hover {
  border-color: rgba(91,122,148,0.2);
}

body[data-page-theme="nordic"] .btn {
  border-radius: 4px;
  font-weight: 400;
  letter-spacing: 0.03em;
}

body[data-page-theme="nordic"] .section + .section {
  border-top: 1px solid rgba(91,122,148,0.08);
  padding-top: 3rem;
}

body[data-page-theme="nordic"] .gallery img {
  border-radius: 4px;
}

body[data-page-theme="nordic"] .hero-badge {
  border-radius: 4px;
}


/* ─── Terracotta ──────────────────────────────────────────────────── */
/* Warm clay and rust tones, Mediterranean artisan feel                 */

body[data-page-theme="terracotta"] {
  --t-bg: #fdf0e7;
  --t-text: #3e1f0d;
  --t-text-muted: #8b5e3c;
  --t-heading: #5c2811;
  --t-primary: #c1440e;
  --t-label: #e07a5f;
  --t-surface: #ffffff;
  --t-border: rgba(193,68,14,0.12);
  --t-border-strong: rgba(193,68,14,0.28);
  --t-card-shadow: 0 3px 14px rgba(92,40,17,0.07);
  --t-radius: 6px;
  --t-nav-bg: #5c2811;
  --t-nav-text: #fde8d8;
  --t-nav-shadow: 0 2px 8px rgba(92,40,17,0.3);
  --t-footer-bg: #3e1f0d;
  --t-footer-text: #d4a076;
  --t-badge-bg: rgba(193,68,14,0.09);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(193,68,14,0.18);
}

body[data-page-theme="terracotta"] .card {
  border-top: 4px solid #c1440e;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

body[data-page-theme="terracotta"] .card:hover {
  border-top-color: #e07a5f;
  box-shadow: 0 6px 24px rgba(193,68,14,0.12);
  transform: translateY(-2px);
}

body[data-page-theme="terracotta"] .hero-media img {
  border-radius: 6px;
  border: 3px solid rgba(193,68,14,0.15);
  box-shadow: 0 6px 24px rgba(92,40,17,0.1);
}

body[data-page-theme="terracotta"] .btn-primary {
  background: linear-gradient(135deg, #c1440e, #e07a5f);
  border-color: transparent;
}

body[data-page-theme="terracotta"] .btn-primary:hover {
  background: linear-gradient(135deg, #a33a0c, #c1440e);
}

body[data-page-theme="terracotta"] nav .main-nav > li.active > a {
  border-bottom-color: #e07a5f;
}

body[data-page-theme="terracotta"] .dropdown-menu a:hover {
  border-left-color: #e07a5f;
  background-color: rgba(224,122,95,0.08);
}

body[data-page-theme="terracotta"] .footer-link {
  color: #e07a5f;
}

body[data-page-theme="terracotta"] .hero-cta .btn-outline {
  color: #c1440e;
  border-color: rgba(193,68,14,0.3);
}

body[data-page-theme="terracotta"] .stacked-list li {
  border-left: 3px solid transparent;
}

body[data-page-theme="terracotta"] .stacked-list li:hover {
  border-left-color: #c1440e;
}

body[data-page-theme="terracotta"] .section-label {
  letter-spacing: 0.06em;
  font-weight: 600;
}

body[data-page-theme="terracotta"] .section-header::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #c1440e, #e07a5f);
  border-radius: 1px;
  margin-top: 0.75rem;
}

body[data-page-theme="terracotta"] .hero-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-page-theme="terracotta"] .gallery img {
  border-radius: 4px;
  border: 2px solid rgba(193,68,14,0.08);
}

body[data-page-theme="terracotta"] .hero-badge {
  border: 1px solid rgba(193,68,14,0.2);
  border-radius: 4px;
}


/* ─── Neon ────────────────────────────────────────────────────────── */
/* Electric neon green on pure black, cyberpunk hacker aesthetic        */

body[data-page-theme="neon"] {
  --t-bg: #000000;
  --t-text: #b0ffb0;
  --t-text-muted: #5aff5a;
  --t-heading: #39ff14;
  --t-primary: #39ff14;
  --t-label: #00ff41;
  --t-surface: #0a0a0a;
  --t-border: rgba(57,255,20,0.15);
  --t-border-strong: rgba(57,255,20,0.35);
  --t-card-shadow: 0 0 12px rgba(57,255,20,0.06);
  --t-radius: 2px;
  --t-nav-bg: #050505;
  --t-nav-text: #39ff14;
  --t-nav-shadow: 0 1px 0 rgba(57,255,20,0.2);
  --t-footer-bg: #000000;
  --t-footer-text: #2aaa0f;
  --t-badge-bg: rgba(57,255,20,0.08);
  --t-btn-primary-text: #000000;
  --t-input-bg: #050505;
  --t-focus-ring: rgba(57,255,20,0.25);
}

body[data-page-theme="neon"] .card {
  border: 1px solid rgba(57,255,20,0.15);
}

body[data-page-theme="neon"] .card:hover {
  border-color: #39ff14;
  box-shadow: 0 0 20px rgba(57,255,20,0.15), 0 0 40px rgba(57,255,20,0.05);
}

body[data-page-theme="neon"] .hero-media img {
  border-radius: 2px;
  border: 1px solid rgba(57,255,20,0.2);
  box-shadow: 0 0 24px rgba(57,255,20,0.08);
}

body[data-page-theme="neon"] .hero-title {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 900;
  text-shadow: 0 0 20px rgba(57,255,20,0.3);
}

body[data-page-theme="neon"] .section-title {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page-theme="neon"] .section-label {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}

body[data-page-theme="neon"] .btn {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body[data-page-theme="neon"] .btn-primary {
  box-shadow: 0 0 12px rgba(57,255,20,0.3);
}

body[data-page-theme="neon"] .btn-primary:hover {
  box-shadow: 0 0 24px rgba(57,255,20,0.5), 0 0 48px rgba(57,255,20,0.15);
  background: #2ecc0e;
}

body[data-page-theme="neon"] nav .main-nav > li.active > a {
  border-bottom-color: #39ff14;
  text-shadow: 0 0 8px rgba(57,255,20,0.5);
}

body[data-page-theme="neon"] .dropdown-menu a:hover {
  border-left-color: #39ff14;
  background-color: rgba(57,255,20,0.06);
}

body[data-page-theme="neon"] .footer-link {
  color: #39ff14;
}

body[data-page-theme="neon"] .hero-cta .btn-outline {
  color: #39ff14;
  border-color: rgba(57,255,20,0.4);
}

body[data-page-theme="neon"] .hero-cta .btn-outline:hover {
  box-shadow: 0 0 16px rgba(57,255,20,0.3);
}

body[data-page-theme="neon"] .stacked-list li {
  border: 1px solid rgba(57,255,20,0.1);
}

body[data-page-theme="neon"] .stacked-list li:hover {
  border-color: rgba(57,255,20,0.4);
  box-shadow: 0 0 12px rgba(57,255,20,0.08);
}

body[data-page-theme="neon"] .section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57,255,20,0.3), transparent);
  margin-bottom: 2rem;
}

body[data-page-theme="neon"] .hero-badge {
  border: 1px solid rgba(57,255,20,0.3);
  border-radius: 2px;
}

body[data-page-theme="neon"] .gallery img {
  border-radius: 0;
  border: 1px solid rgba(57,255,20,0.12);
}


/* ─── Royal ───────────────────────────────────────────────────────── */
/* Deep navy with gold accents, luxurious and regal                    */

body[data-page-theme="royal"] {
  --t-bg: #0e0e3d;
  --t-text: #c8c4db;
  --t-text-muted: #9590b5;
  --t-heading: #f0e68c;
  --t-primary: #d4af37;
  --t-label: #d4af37;
  --t-surface: #1a1a5e;
  --t-border: rgba(212,175,55,0.15);
  --t-border-strong: rgba(212,175,55,0.35);
  --t-card-shadow: 0 4px 20px rgba(0,0,0,0.4);
  --t-radius: 4px;
  --t-nav-bg: #12124a;
  --t-nav-text: #f0e68c;
  --t-nav-shadow: 0 2px 8px rgba(0,0,0,0.5);
  --t-footer-bg: #08082a;
  --t-footer-text: #8a84a8;
  --t-badge-bg: rgba(212,175,55,0.1);
  --t-btn-primary-text: #0e0e3d;
  --t-input-bg: #12124a;
  --t-focus-ring: rgba(212,175,55,0.25);
}

body[data-page-theme="royal"] .card {
  border: 1px solid rgba(212,175,55,0.12);
  border-bottom: 3px solid rgba(212,175,55,0.2);
}

body[data-page-theme="royal"] .card:hover {
  border-color: rgba(212,175,55,0.35);
  border-bottom-color: #d4af37;
  box-shadow: 0 6px 28px rgba(212,175,55,0.1);
}

body[data-page-theme="royal"] .hero-media img {
  border-radius: 4px;
  border: 2px solid rgba(212,175,55,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

body[data-page-theme="royal"] .hero-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-page-theme="royal"] .section-title {
  font-weight: 700;
}

body[data-page-theme="royal"] .btn-primary {
  background: linear-gradient(135deg, #d4af37, #f0e68c);
  border-color: transparent;
}

body[data-page-theme="royal"] .btn-primary:hover {
  background: linear-gradient(135deg, #b8960e, #d4af37);
}

body[data-page-theme="royal"] nav .main-nav > li.active > a {
  border-bottom-color: #d4af37;
}

body[data-page-theme="royal"] .dropdown-menu a:hover {
  border-left-color: #d4af37;
  background-color: rgba(212,175,55,0.08);
}

body[data-page-theme="royal"] .footer-link {
  color: #d4af37;
}

body[data-page-theme="royal"] .hero-cta .btn-outline {
  color: #f0e68c;
  border-color: rgba(212,175,55,0.35);
}

body[data-page-theme="royal"] .stacked-list li:hover {
  border-color: rgba(212,175,55,0.3);
}

body[data-page-theme="royal"] .section-label {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.75rem;
}

body[data-page-theme="royal"] .section + .section::before {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  margin: 0 auto 2rem;
}

body[data-page-theme="royal"] .hero-badge {
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 2px;
}

body[data-page-theme="royal"] .gallery img {
  border-radius: 2px;
  border: 1px solid rgba(212,175,55,0.1);
}

body[data-page-theme="royal"] .section-header::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #d4af37, rgba(212,175,55,0.2));
  margin-top: 0.6rem;
}


/* ─── Sakura ──────────────────────────────────────────────────────── */
/* Japanese cherry blossom inspired, soft pink, delicate and refined    */

body[data-page-theme="sakura"] {
  --t-bg: #fce4ec;
  --t-text: #4a0e23;
  --t-text-muted: #ad1457;
  --t-heading: #880e4f;
  --t-primary: #e91e63;
  --t-label: #f06292;
  --t-surface: #ffffff;
  --t-border: rgba(233,30,99,0.1);
  --t-border-strong: rgba(233,30,99,0.25);
  --t-card-shadow: 0 6px 24px rgba(233,30,99,0.07);
  --t-radius: 20px;
  --t-nav-bg: #880e4f;
  --t-nav-text: #fce4ec;
  --t-nav-shadow: 0 2px 12px rgba(136,14,79,0.25);
  --t-footer-bg: #4a0e23;
  --t-footer-text: #f8bbd0;
  --t-badge-bg: rgba(233,30,99,0.08);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(233,30,99,0.18);
}

body[data-page-theme="sakura"] .card {
  border-radius: 20px;
  border: 1px solid rgba(233,30,99,0.08);
  box-shadow: 0 6px 24px rgba(233,30,99,0.07);
}

body[data-page-theme="sakura"] .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(233,30,99,0.12);
  border-color: rgba(233,30,99,0.2);
}

body[data-page-theme="sakura"] .hero-media img {
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(233,30,99,0.1);
}

body[data-page-theme="sakura"] .btn {
  border-radius: 999px;
}

body[data-page-theme="sakura"] .btn-primary {
  background: linear-gradient(135deg, #e91e63, #f48fb1);
  border-color: transparent;
}

body[data-page-theme="sakura"] .btn-primary:hover {
  background: linear-gradient(135deg, #c2185b, #e91e63);
}

body[data-page-theme="sakura"] nav .main-nav > li.active > a {
  border-bottom-color: #f48fb1;
}

body[data-page-theme="sakura"] .dropdown-menu a:hover {
  border-left-color: #f48fb1;
  background-color: rgba(233,30,99,0.06);
}

body[data-page-theme="sakura"] .footer-link {
  color: #f48fb1;
}

body[data-page-theme="sakura"] .hero-cta .btn-outline {
  color: #e91e63;
  border-color: rgba(233,30,99,0.3);
}

body[data-page-theme="sakura"] .stacked-list li {
  border-radius: 16px;
}

body[data-page-theme="sakura"] .stacked-list li:hover {
  background: rgba(252,228,236,0.5);
  border-color: rgba(233,30,99,0.15);
}

body[data-page-theme="sakura"] .section-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: linear-gradient(90deg, #e91e63, #f8bbd0);
  border-radius: 999px;
  margin-top: 0.5rem;
}

body[data-page-theme="sakura"] .hero-badge {
  border-radius: 999px;
  border: 1px solid rgba(233,30,99,0.15);
}

body[data-page-theme="sakura"] .hero-title {
  font-weight: 700;
}

body[data-page-theme="sakura"] .section-label {
  font-weight: 500;
  letter-spacing: 0.04em;
}

body[data-page-theme="sakura"] .gallery img {
  border-radius: 16px;
}


/* ─── Arctic ──────────────────────────────────────────────────────── */
/* Pure white and ice with glacial blue, ultra-clean frozen feel        */

body[data-page-theme="arctic"] {
  --t-bg: #f8fbff;
  --t-text: #1e3a5f;
  --t-text-muted: #4a7fb5;
  --t-heading: #0a2540;
  --t-primary: #4fc3f7;
  --t-label: #29b6f6;
  --t-surface: rgba(255,255,255,0.8);
  --t-border: rgba(79,195,247,0.12);
  --t-border-strong: rgba(79,195,247,0.3);
  --t-card-shadow: 0 4px 20px rgba(2,136,209,0.06);
  --t-radius: 16px;
  --t-nav-bg: #0a2540;
  --t-nav-text: #e1f5fe;
  --t-nav-shadow: 0 2px 12px rgba(10,37,64,0.2);
  --t-footer-bg: #0a2540;
  --t-footer-text: #81d4fa;
  --t-badge-bg: rgba(79,195,247,0.1);
  --t-btn-primary-text: #0a2540;
  --t-focus-ring: rgba(79,195,247,0.2);
}

body[data-page-theme="arctic"] .card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(79,195,247,0.12);
}

body[data-page-theme="arctic"] .card:hover {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 32px rgba(79,195,247,0.1);
  transform: translateY(-2px);
}

body[data-page-theme="arctic"] .hero-media img {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(2,136,209,0.1);
}

body[data-page-theme="arctic"] .btn {
  border-radius: 12px;
}

body[data-page-theme="arctic"] .btn-primary {
  background: linear-gradient(135deg, #4fc3f7, #81d4fa);
  border-color: transparent;
}

body[data-page-theme="arctic"] .btn-primary:hover {
  background: linear-gradient(135deg, #29b6f6, #4fc3f7);
}

body[data-page-theme="arctic"] nav .main-nav > li.active > a {
  border-bottom-color: #4fc3f7;
}

body[data-page-theme="arctic"] .dropdown-menu a:hover {
  border-left-color: #4fc3f7;
  background-color: rgba(79,195,247,0.06);
}

body[data-page-theme="arctic"] .footer-link {
  color: #4fc3f7;
}

body[data-page-theme="arctic"] .hero-cta .btn-outline {
  color: #0288d1;
  border-color: rgba(79,195,247,0.35);
}

body[data-page-theme="arctic"] .stacked-list li {
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.6);
}

body[data-page-theme="arctic"] .stacked-list li:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(79,195,247,0.25);
}

body[data-page-theme="arctic"] .section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #4fc3f7, #e1f5fe);
  border-radius: 2px;
  margin-top: 0.5rem;
}

body[data-page-theme="arctic"] .hero-badge {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(79,195,247,0.15);
  border-radius: 12px;
}

body[data-page-theme="arctic"] .hero-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

body[data-page-theme="arctic"] .gallery img {
  border-radius: 12px;
}


/* ─── Volcanic ────────────────────────────────────────────────────── */
/* Deep charcoal with molten orange-red gradients, intense & dramatic   */

body[data-page-theme="volcanic"] {
  --t-bg: #1a1a1a;
  --t-text: #d4c5b9;
  --t-text-muted: #a0877a;
  --t-heading: #fff0e0;
  --t-primary: #ff4500;
  --t-label: #ff8c00;
  --t-surface: #242424;
  --t-border: rgba(255,69,0,0.15);
  --t-border-strong: rgba(255,69,0,0.35);
  --t-card-shadow: 0 4px 20px rgba(0,0,0,0.5);
  --t-radius: 8px;
  --t-nav-bg: #111111;
  --t-nav-text: #ff8c00;
  --t-nav-shadow: 0 1px 0 rgba(255,69,0,0.2);
  --t-footer-bg: #0d0d0d;
  --t-footer-text: #7a5c45;
  --t-badge-bg: rgba(255,69,0,0.1);
  --t-btn-primary-text: #ffffff;
  --t-input-bg: #1a1a1a;
  --t-focus-ring: rgba(255,69,0,0.25);
}

body[data-page-theme="volcanic"] .card {
  border: 1px solid rgba(255,69,0,0.1);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #ff4500, #ff8c00) 1;
  border-image-slice: 0 0 1 0;
}

body[data-page-theme="volcanic"] .card:hover {
  box-shadow: 0 0 20px rgba(255,69,0,0.12), 0 4px 24px rgba(0,0,0,0.4);
  border-image: linear-gradient(90deg, #ff4500, #ff8c00) 1;
  border-image-slice: 0 0 1 0;
}

body[data-page-theme="volcanic"] .hero-media img {
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

body[data-page-theme="volcanic"] .btn-primary {
  background: linear-gradient(135deg, #ff4500, #ff8c00);
  border-color: transparent;
}

body[data-page-theme="volcanic"] .btn-primary:hover {
  background: linear-gradient(135deg, #e03e00, #ff4500);
  box-shadow: 0 0 20px rgba(255,69,0,0.3);
}

body[data-page-theme="volcanic"] nav .main-nav > li.active > a {
  border-bottom-color: #ff8c00;
}

body[data-page-theme="volcanic"] .dropdown-menu a:hover {
  border-left-color: #ff4500;
  background-color: rgba(255,69,0,0.08);
}

body[data-page-theme="volcanic"] .footer-link {
  color: #ff8c00;
}

body[data-page-theme="volcanic"] .hero-cta .btn-outline {
  color: #ff8c00;
  border-color: rgba(255,140,0,0.35);
}

body[data-page-theme="volcanic"] .stacked-list li:hover {
  border-color: rgba(255,69,0,0.25);
  box-shadow: 0 0 12px rgba(255,69,0,0.06);
}

body[data-page-theme="volcanic"] .hero-title {
  font-weight: 900;
  letter-spacing: -0.03em;
}

body[data-page-theme="volcanic"] .section-label {
  position: relative;
  padding-left: 16px;
}

body[data-page-theme="volcanic"] .section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4500;
  box-shadow: 0 0 8px rgba(255,69,0,0.6), 0 0 16px rgba(255,69,0,0.3);
  animation: volcanic-pulse 2s ease-in-out infinite;
}

@keyframes volcanic-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,69,0,0.6), 0 0 16px rgba(255,69,0,0.3); }
  50% { box-shadow: 0 0 12px rgba(255,140,0,0.8), 0 0 24px rgba(255,69,0,0.4); }
}

body[data-page-theme="volcanic"] .section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,69,0,0.3), rgba(255,140,0,0.15), transparent);
  margin-bottom: 2rem;
}

body[data-page-theme="volcanic"] .gallery img {
  border-radius: 6px;
}

body[data-page-theme="volcanic"] .hero-badge {
  border: 1px solid rgba(255,69,0,0.2);
}


/* ─── Mint ────────────────────────────────────────────────────────── */
/* Fresh mint green, clean health and wellness feel                     */

body[data-page-theme="mint"] {
  --t-bg: #f0fdf4;
  --t-text: #14352a;
  --t-text-muted: #047857;
  --t-heading: #064e3b;
  --t-primary: #10b981;
  --t-label: #34d399;
  --t-surface: #ffffff;
  --t-border: rgba(16,185,129,0.1);
  --t-border-strong: rgba(16,185,129,0.25);
  --t-card-shadow: 0 4px 16px rgba(5,150,105,0.06);
  --t-radius: 999px;
  --t-nav-bg: #064e3b;
  --t-nav-text: #d1fae5;
  --t-nav-shadow: 0 2px 8px rgba(6,78,59,0.25);
  --t-footer-bg: #064e3b;
  --t-footer-text: #6ee7b7;
  --t-badge-bg: rgba(16,185,129,0.08);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(16,185,129,0.18);
}

body[data-page-theme="mint"] .card {
  border-radius: 16px;
}

body[data-page-theme="mint"] .card:hover {
  box-shadow: 0 8px 28px rgba(16,185,129,0.1);
  transform: translateY(-2px);
}

body[data-page-theme="mint"] .hero-media img {
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(5,150,105,0.1);
}

body[data-page-theme="mint"] .btn {
  border-radius: 999px;
}

body[data-page-theme="mint"] .btn-primary {
  background: linear-gradient(135deg, #10b981, #34d399);
  border-color: transparent;
}

body[data-page-theme="mint"] .btn-primary:hover {
  background: linear-gradient(135deg, #059669, #10b981);
}

body[data-page-theme="mint"] nav .main-nav > li.active > a {
  border-bottom-color: #34d399;
}

body[data-page-theme="mint"] .dropdown-menu a:hover {
  border-left-color: #34d399;
  background-color: rgba(16,185,129,0.06);
}

body[data-page-theme="mint"] .footer-link {
  color: #34d399;
}

body[data-page-theme="mint"] .hero-cta .btn-outline {
  color: #10b981;
  border-color: rgba(16,185,129,0.3);
}

body[data-page-theme="mint"] .stacked-list li {
  border-radius: 12px;
}

body[data-page-theme="mint"] .stacked-list li:hover {
  background: rgba(209,250,229,0.4);
  border-color: rgba(16,185,129,0.2);
}

body[data-page-theme="mint"] .hero-badge {
  border-radius: 999px;
  border: 1px solid rgba(16,185,129,0.15);
}

body[data-page-theme="mint"] .section-label {
  background: rgba(16,185,129,0.08);
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

body[data-page-theme="mint"] .section-title {
  font-weight: 700;
}

body[data-page-theme="mint"] .hero-title {
  font-weight: 800;
}

body[data-page-theme="mint"] .gallery img {
  border-radius: 14px;
}

body[data-page-theme="mint"] .section + .section {
  border-top: 1px solid rgba(16,185,129,0.08);
  padding-top: 2.5rem;
}


/* ─── Dusk ────────────────────────────────────────────────────────── */
/* Dusky purple-blue twilight with warm amber highlights, dreamy        */

body[data-page-theme="dusk"] {
  --t-bg: #1a0a3e;
  --t-text: #c9b8e8;
  --t-text-muted: #9b86c4;
  --t-heading: #fef3c7;
  --t-primary: #f59e0b;
  --t-label: #fbbf24;
  --t-surface: #2d1b69;
  --t-border: rgba(245,158,11,0.12);
  --t-border-strong: rgba(245,158,11,0.3);
  --t-card-shadow: 0 4px 20px rgba(0,0,0,0.4);
  --t-radius: 12px;
  --t-nav-bg: #2d1b69;
  --t-nav-text: #fef3c7;
  --t-nav-shadow: 0 2px 8px rgba(26,10,62,0.5);
  --t-footer-bg: #110730;
  --t-footer-text: #7c6aaa;
  --t-badge-bg: rgba(245,158,11,0.1);
  --t-btn-primary-text: #1a0a3e;
  --t-input-bg: #2d1b69;
  --t-focus-ring: rgba(245,158,11,0.2);
}

body[data-page-theme="dusk"] .card:hover {
  border-color: rgba(245,158,11,0.25);
  box-shadow: 0 8px 28px rgba(245,158,11,0.08);
  transform: translateY(-2px);
}

body[data-page-theme="dusk"] .hero-media img {
  border-radius: 12px;
  box-shadow: 0 8px 36px rgba(0,0,0,0.5);
}

body[data-page-theme="dusk"] .btn-primary {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border-color: transparent;
}

body[data-page-theme="dusk"] .btn-primary:hover {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}

body[data-page-theme="dusk"] nav .main-nav > li.active > a {
  border-bottom-color: #fbbf24;
}

body[data-page-theme="dusk"] .dropdown-menu a:hover {
  border-left-color: #fbbf24;
  background-color: rgba(251,191,36,0.08);
}

body[data-page-theme="dusk"] .footer-link {
  color: #fbbf24;
}

body[data-page-theme="dusk"] .hero-cta .btn-outline {
  color: #fbbf24;
  border-color: rgba(251,191,36,0.35);
}

body[data-page-theme="dusk"] .stacked-list li:hover {
  border-color: rgba(245,158,11,0.2);
}

body[data-page-theme="dusk"] .hero-title {
  font-weight: 700;
}

body[data-page-theme="dusk"] .section-label {
  position: relative;
  padding-left: 16px;
}

body[data-page-theme="dusk"] .section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251,191,36,0.6);
}

body[data-page-theme="dusk"] .section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(245,158,11,0.2), rgba(155,134,196,0.1), transparent);
  margin-bottom: 2rem;
}

body[data-page-theme="dusk"] .hero-badge {
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 8px;
}

body[data-page-theme="dusk"] .section-header {
  position: relative;
}

body[data-page-theme="dusk"] .section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, rgba(245,158,11,0.2));
  border-radius: 2px;
  margin-top: 0.5rem;
}

body[data-page-theme="dusk"] .gallery img {
  border-radius: 10px;
}


/* ─── Sand ────────────────────────────────────────────────────────── */
/* Desert sand tones, warm tan and sienna accents, natural earthy       */

body[data-page-theme="sand"] {
  --t-bg: #f5f0e8;
  --t-text: #3b2a1a;
  --t-text-muted: #7d5c3e;
  --t-heading: #6b3410;
  --t-primary: #a0522d;
  --t-label: #c07040;
  --t-surface: #fefcf8;
  --t-border: rgba(160,82,45,0.12);
  --t-border-strong: rgba(160,82,45,0.28);
  --t-card-shadow: 0 3px 12px rgba(107,52,16,0.06);
  --t-radius: 8px;
  --t-nav-bg: #6b3410;
  --t-nav-text: #fbe8d5;
  --t-nav-shadow: 0 2px 8px rgba(107,52,16,0.3);
  --t-footer-bg: #3b2a1a;
  --t-footer-text: #c09060;
  --t-badge-bg: rgba(160,82,45,0.08);
  --t-btn-primary-text: #ffffff;
  --t-focus-ring: rgba(160,82,45,0.18);
}

body[data-page-theme="sand"] .card {
  border: 1px solid rgba(160,82,45,0.1);
  border-bottom: 2px solid rgba(160,82,45,0.15);
}

body[data-page-theme="sand"] .card:hover {
  border-bottom-color: #a0522d;
  box-shadow: 0 6px 20px rgba(160,82,45,0.1);
}

body[data-page-theme="sand"] .hero-media img {
  border-radius: 8px;
  border: 2px solid rgba(160,82,45,0.1);
  box-shadow: 0 6px 24px rgba(107,52,16,0.08);
}

body[data-page-theme="sand"] .btn-primary {
  background: linear-gradient(135deg, #a0522d, #c07040);
  border-color: transparent;
}

body[data-page-theme="sand"] .btn-primary:hover {
  background: linear-gradient(135deg, #8b4513, #a0522d);
}

body[data-page-theme="sand"] nav .main-nav > li.active > a {
  border-bottom-color: #c07040;
}

body[data-page-theme="sand"] .dropdown-menu a:hover {
  border-left-color: #c07040;
  background-color: rgba(160,82,45,0.06);
}

body[data-page-theme="sand"] .footer-link {
  color: #c07040;
}

body[data-page-theme="sand"] .hero-cta .btn-outline {
  color: #a0522d;
  border-color: rgba(160,82,45,0.3);
}

body[data-page-theme="sand"] .stacked-list li {
  border-left: 3px solid transparent;
}

body[data-page-theme="sand"] .stacked-list li:hover {
  border-left-color: #a0522d;
}

body[data-page-theme="sand"] .section-label {
  letter-spacing: 0.06em;
  font-weight: 600;
}

body[data-page-theme="sand"] .hero-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

body[data-page-theme="sand"] .section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(160,82,45,0.15), rgba(192,112,64,0.08), transparent);
  margin-bottom: 2rem;
}

body[data-page-theme="sand"] .hero-badge {
  border: 1px solid rgba(160,82,45,0.15);
  border-radius: 6px;
}

body[data-page-theme="sand"] .gallery img {
  border-radius: 6px;
  border: 1px solid rgba(160,82,45,0.08);
}

body[data-page-theme="sand"] .section-header::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, #a0522d, rgba(160,82,45,0.2));
  margin-top: 0.6rem;
}


/* ─── Electric ────────────────────────────────────────────────────── */
/* Vivid electric blue on dark charcoal, high-energy tech/startup      */

body[data-page-theme="electric"] {
  --t-bg: #111827;
  --t-text: #d1d5db;
  --t-text-muted: #9ca3af;
  --t-heading: #f9fafb;
  --t-primary: #0066ff;
  --t-label: #3b82f6;
  --t-surface: #1f2937;
  --t-border: rgba(0,102,255,0.15);
  --t-border-strong: rgba(0,102,255,0.35);
  --t-card-shadow: 0 4px 20px rgba(0,0,0,0.4);
  --t-radius: 4px;
  --t-nav-bg: #0a0f1a;
  --t-nav-text: #93c5fd;
  --t-nav-shadow: 0 1px 0 rgba(0,102,255,0.2);
  --t-footer-bg: #0a0f1a;
  --t-footer-text: #6b7280;
  --t-badge-bg: rgba(0,102,255,0.1);
  --t-btn-primary-text: #ffffff;
  --t-input-bg: #111827;
  --t-focus-ring: rgba(0,102,255,0.25);
}

body[data-page-theme="electric"] .card {
  border: 1px solid rgba(0,102,255,0.1);
}

body[data-page-theme="electric"] .card:hover {
  border-color: rgba(0,102,255,0.4);
  box-shadow: 0 0 20px rgba(0,102,255,0.1), 0 4px 20px rgba(0,0,0,0.3);
}

body[data-page-theme="electric"] .hero-media img {
  border-radius: 4px;
  border: 1px solid rgba(0,102,255,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

body[data-page-theme="electric"] .hero-title {
  font-weight: 900;
  letter-spacing: -0.03em;
}

body[data-page-theme="electric"] .section-title {
  font-weight: 800;
}

body[data-page-theme="electric"] .btn-primary {
  background: #0066ff;
  border-color: transparent;
  box-shadow: 0 0 12px rgba(0,102,255,0.25);
}

body[data-page-theme="electric"] .btn-primary:hover {
  background: #0052cc;
  box-shadow: 0 0 24px rgba(0,102,255,0.4);
}

body[data-page-theme="electric"] nav .main-nav > li.active > a {
  border-bottom-color: #0066ff;
}

body[data-page-theme="electric"] .dropdown-menu a:hover {
  border-left-color: #0066ff;
  background-color: rgba(0,102,255,0.08);
}

body[data-page-theme="electric"] .footer-link {
  color: #3b82f6;
}

body[data-page-theme="electric"] .hero-cta .btn-outline {
  color: #93c5fd;
  border-color: rgba(0,102,255,0.4);
}

body[data-page-theme="electric"] .hero-cta .btn-outline:hover {
  box-shadow: 0 0 16px rgba(0,102,255,0.25);
}

body[data-page-theme="electric"] .stacked-list li {
  border: 1px solid rgba(0,102,255,0.08);
}

body[data-page-theme="electric"] .stacked-list li:hover {
  border-color: rgba(0,102,255,0.3);
}

body[data-page-theme="electric"] .section-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 0.75rem;
}

body[data-page-theme="electric"] .section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,102,255,0.25), transparent);
  margin-bottom: 2rem;
}

body[data-page-theme="electric"] .hero-badge {
  border: 1px solid rgba(0,102,255,0.25);
  border-radius: 4px;
}

body[data-page-theme="electric"] .gallery img {
  border-radius: 4px;
}


/* ─── Vintage ─────────────────────────────────────────────────────── */
/* Sepia cream with muted burgundy, old-world charm and elegance       */

body[data-page-theme="vintage"] {
  --t-bg: #fdf8ef;
  --t-text: #3c2415;
  --t-text-muted: #7a4f3a;
  --t-heading: #4a1c22;
  --t-primary: #722f37;
  --t-label: #9b4d56;
  --t-surface: #fffcf5;
  --t-border: rgba(114,47,55,0.12);
  --t-border-strong: rgba(114,47,55,0.28);
  --t-card-shadow: 0 2px 10px rgba(74,28,34,0.06);
  --t-radius: 4px;
  --t-nav-bg: #4a1c22;
  --t-nav-text: #f5e6d8;
  --t-nav-shadow: 0 2px 6px rgba(74,28,34,0.25);
  --t-footer-bg: #3c2415;
  --t-footer-text: #b88a70;
  --t-badge-bg: rgba(114,47,55,0.08);
  --t-btn-primary-text: #fdf8ef;
  --t-focus-ring: rgba(114,47,55,0.18);
}

body[data-page-theme="vintage"] .card {
  border: 1px solid rgba(114,47,55,0.1);
}

body[data-page-theme="vintage"] .card:hover {
  border-color: rgba(114,47,55,0.25);
  box-shadow: 0 4px 16px rgba(114,47,55,0.08);
}

body[data-page-theme="vintage"] .hero-media img {
  border-radius: 4px;
  border: 2px solid rgba(114,47,55,0.12);
  box-shadow: 0 4px 16px rgba(74,28,34,0.08);
}

body[data-page-theme="vintage"] .hero-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

body[data-page-theme="vintage"] .section-title {
  font-weight: 700;
}

body[data-page-theme="vintage"] .btn {
  border-radius: 3px;
}

body[data-page-theme="vintage"] .btn-primary {
  background: #722f37;
  border-color: transparent;
}

body[data-page-theme="vintage"] .btn-primary:hover {
  background: #5a252c;
}

body[data-page-theme="vintage"] nav .main-nav > li.active > a {
  border-bottom-color: #9b4d56;
}

body[data-page-theme="vintage"] .dropdown-menu a:hover {
  border-left-color: #9b4d56;
  background-color: rgba(114,47,55,0.06);
}

body[data-page-theme="vintage"] .footer-link {
  color: #9b4d56;
}

body[data-page-theme="vintage"] .hero-cta .btn-outline {
  color: #722f37;
  border-color: rgba(114,47,55,0.3);
}

body[data-page-theme="vintage"] .stacked-list li {
  border: 1px solid rgba(114,47,55,0.08);
  border-left: 3px solid transparent;
}

body[data-page-theme="vintage"] .stacked-list li:hover {
  border-left-color: #722f37;
}

body[data-page-theme="vintage"] .section-label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  font-size: 0.72rem;
}

body[data-page-theme="vintage"] .section + .section::before {
  content: '';
  display: block;
  width: 80px;
  height: 0;
  border-top: 1px solid rgba(114,47,55,0.15);
  border-bottom: 1px solid rgba(114,47,55,0.15);
  padding-top: 3px;
  margin: 0 auto 2rem;
}

body[data-page-theme="vintage"] .hero-badge {
  border: 1px solid rgba(114,47,55,0.2);
  border-radius: 2px;
}

body[data-page-theme="vintage"] .gallery img {
  border-radius: 2px;
  border: 1px solid rgba(114,47,55,0.1);
}

body[data-page-theme="vintage"] .section-header::after {
  content: '';
  display: block;
  width: 40px;
  height: 0;
  border-top: 1px solid rgba(114,47,55,0.2);
  border-bottom: 1px solid rgba(114,47,55,0.2);
  padding-top: 2px;
  margin-top: 0.6rem;
}


/* ─── Graphite ────────────────────────────────────────────────────── */
/* Medium graphite gray with lime green accent, developer/code feel     */

body[data-page-theme="graphite"] {
  --t-bg: #1f2937;
  --t-text: #d1d5db;
  --t-text-muted: #9ca3af;
  --t-heading: #f3f4f6;
  --t-primary: #84cc16;
  --t-label: #a3e635;
  --t-surface: #374151;
  --t-border: rgba(132,204,22,0.12);
  --t-border-strong: rgba(132,204,22,0.3);
  --t-card-shadow: 0 2px 12px rgba(0,0,0,0.3);
  --t-radius: 6px;
  --t-nav-bg: #111827;
  --t-nav-text: #d1d5db;
  --t-nav-shadow: 0 1px 0 rgba(132,204,22,0.1);
  --t-footer-bg: #111827;
  --t-footer-text: #6b7280;
  --t-badge-bg: rgba(132,204,22,0.1);
  --t-btn-primary-text: #1f2937;
  --t-input-bg: #1f2937;
  --t-focus-ring: rgba(132,204,22,0.2);
}

body[data-page-theme="graphite"] .card {
  border: 1px solid rgba(132,204,22,0.08);
  background: linear-gradient(180deg, #374151 0%, #2d3748 100%);
}

body[data-page-theme="graphite"] .card:hover {
  border-color: rgba(132,204,22,0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

body[data-page-theme="graphite"] .hero-media img {
  border-radius: 6px;
  border: 1px solid rgba(132,204,22,0.12);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}

body[data-page-theme="graphite"] .hero-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}

body[data-page-theme="graphite"] .btn-primary {
  background: #84cc16;
  border-color: transparent;
}

body[data-page-theme="graphite"] .btn-primary:hover {
  background: #65a30d;
}

body[data-page-theme="graphite"] nav .main-nav > li.active > a {
  border-bottom-color: #84cc16;
}

body[data-page-theme="graphite"] .dropdown-menu a:hover {
  border-left-color: #84cc16;
  background-color: rgba(132,204,22,0.06);
}

body[data-page-theme="graphite"] .footer-link {
  color: #84cc16;
}

body[data-page-theme="graphite"] .hero-cta .btn-outline {
  color: #a3e635;
  border-color: rgba(132,204,22,0.35);
}

body[data-page-theme="graphite"] .stacked-list li {
  border: 1px solid rgba(132,204,22,0.06);
}

body[data-page-theme="graphite"] .stacked-list li:hover {
  border-color: rgba(132,204,22,0.2);
}

body[data-page-theme="graphite"] .section-label {
  background: rgba(132,204,22,0.1);
  color: #a3e635;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

body[data-page-theme="graphite"] .section + .section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(132,204,22,0.08);
  margin-bottom: 2rem;
}

body[data-page-theme="graphite"] .hero-badge {
  border: 1px solid rgba(132,204,22,0.2);
  border-radius: 4px;
}

body[data-page-theme="graphite"] .gallery img {
  border-radius: 4px;
}

body[data-page-theme="graphite"] .section-title::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: #84cc16;
  border-radius: 2px;
  margin-top: 0.5rem;
}


/* =====================================================================
   RESPONSIVE OVERRIDES FOR THEMES
   ===================================================================== */

@media (max-width: 880px) {
  body[data-page-theme="monochrome"] .hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  body[data-page-theme="sunset"] .section-header {
    padding-left: 14px;
  }
}