/* ============================================================
   LIGHT THEME — GLOBAL COLOR SYSTEM
   ============================================================ */

html[data-theme="light"] {
  --color-text: #1f2a33;
  --color-text-muted: #4a5a6a;
  --color-surface: rgba(255,255,255,0.75);
  --color-surface-strong: rgba(255,255,255,0.92);
  --color-border: rgba(0,0,0,0.12);
  --color-accent: #4d697c;
  --menu-hover-bg: #99aebd;
  --theme-background: linear-gradient(135deg, #dbe7f2, #b7c9d9);
}

/* ============================================================
   LIGHT THEME — GLOBAL SURFACES
   ============================================================ */

html[data-theme="light"] body .surface,
html[data-theme="light"] body .panel,
html[data-theme="light"] body .module,
html[data-theme="light"] body .box {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}


/* ============================================================
   LIGHT THEME — GLOBAL BUTTONS
   ============================================================ */

html[data-theme="light"] button,
html[data-theme="light"] .btn {
  background: var(--color-accent);
  color: #ffffff;
  border: 1px solid rgba(0,0,0,0.15);
}

html[data-theme="light"] button:hover,
html[data-theme="light"] .btn:hover {
  background: var(--menu-hover-bg);
  color: var(--color-text);
}

html[data-theme="light"] .beautybutton {
  background: rgba(255,255,255,0.18);
  border-color: rgba(0,0,0,0.08);
}

html[data-theme="light"] .beautybutton:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(0,0,0,0.15);
}

html[data-theme="light"] .beautybutton {
  border-color: rgba(90,140,255,0.35);
  box-shadow:
    inset 0 0 4px rgba(90,140,255,0.25),
    0 0 6px rgba(90,140,255,0.15);
}

html[data-theme="light"] .beautybutton:hover {
  border-color: rgba(130,170,255,0.55);
  box-shadow:
    inset 0 0 6px rgba(130,170,255,0.35),
    0 0 10px rgba(130,170,255,0.25);
}

html[data-theme="light"] .banner--shop .category-links a {
  border-color: rgba(90,140,255,0.35);
  background: rgba(255,255,255,0.18);
  color: #ffffff;
}

html[data-theme="light"] .banner--shop .category-links a:hover {
  border-color: rgba(130,170,255,0.55);
  background: rgba(255,255,255,0.28);
  box-shadow:
    inset 0 0 6px rgba(130,170,255,0.35),
    0 0 10px rgba(130,170,255,0.25);
}

html[data-theme="light"] .banner--shop .category-links a {
  border-color: rgba(90,140,255,0.35) !important;
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}

/* ============================================================
   LIGHT THEME — MENUS (Top / Sidebar)
   ============================================================ */

html[data-theme="light"] .mod-menu a {
  color: #1f2a33;
}

html[data-theme="light"] .mod-menu a:hover {
  color: #0b3d5c;
}

html[data-theme="light"] .sidebar-left .mod-menu .nav-item > a,
html[data-theme="light"] .sidebar-right .mod-menu .nav-item > a {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.15);
  color: #1f2a33;
}

html[data-theme="light"] .sidebar-left .mod-menu .nav-item > a:hover,
html[data-theme="light"] .sidebar-right .mod-menu .nav-item > a:hover {
  background: #dce7ef;
  color: #0b3d5c;
}


/* ============================================================
   LIGHT THEME — DIVISION TOPBARS
   ============================================================ */

/* Meet Marco */
html[data-theme="light"] body.meetmarco-division .meetmarco-topbar {
  background: linear-gradient(to bottom, #7a0a0a, #d44a4a);
}

/* GoShopping */
html[data-theme="light"] body.goshopping-division .goshopping-topbar {
  background: linear-gradient(to bottom, #6a6a6a, #bfbfbf);
}

/* Bookings */
html[data-theme="light"] body.bookings-division .bookings-topbar {
  background: linear-gradient(to bottom, #1f3d7a, #4f7cc8);
}

/* SymbioSoft */
html[data-theme="light"] .symbio-topbar {
  background: linear-gradient(to bottom, #d0d0d0, #4a7aa0);
}


/* ============================================================
   LIGHT THEME — DIVISION HERO BUTTONS
   (Meet Marco / Shop / Bookings share the same system)
   ============================================================ */

html[data-theme="light"] .division-btn,
html[data-theme="light"] .category-links a,
html[data-theme="light"] .goshopping-links a,
html[data-theme="light"] .booking-btn,
html[data-theme="light"] .booking-nav-btn {
  background: #4d697c;
  color: #bed3e0;
  border: 1px solid #98a8b2;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

html[data-theme="light"] .division-btn:hover,
html[data-theme="light"] .category-links a:hover,
html[data-theme="light"] .goshopping-links a:hover,
html[data-theme="light"] .booking-btn:hover,
html[data-theme="light"] .booking-nav-btn:hover {
  background: #99aebd;
  color: #c66800;
  box-shadow: 0 5px 14px rgba(0,0,0,0.35);
}


/* ============================================================
   LIGHT THEME — FOOTER
   ============================================================ */

html[data-theme="light"] .footer-block h4,
html[data-theme="light"] .footer-block h5 {
  color: #1f2a33;
  border-bottom-color: rgba(0,0,0,0.25);
}

html[data-theme="light"] .footer-btn:not(.meetmarco-btn):not(.goshopping-btn):not(.bookings-btn):not(.software-btn) {
  background: rgba(0,0,0,0.08);
  color: #1f3a5a;
  border-color: rgba(0,0,0,0.2);
}

html[data-theme="light"] .footer-bottom p {
  color: #1f2a33;
  background: rgba(255,255,255,0.6);
}


/* ============================================================
   LIGHT THEME — DIVISION FOOTER SEPARATORS
   ============================================================ */

html[data-theme="light"] .footer-shop .footer-bottom {
  border-top-color: #80bcaa;
}

html[data-theme="light"] .footer-bookings .footer-bottom {
  border-top-color: #2c5890;
}

html[data-theme="light"] .footer-meetmarco .footer-bottom {
  border-top-color: #d68f8f;
}


/* ============================================================
   LIGHT THEME — MISC FIXES
   ============================================================ */

html[data-theme="light"] .spoken-text-inner {
  color: #ffffff;
}

html[data-theme="light"] .tour-badge {
  filter: brightness(1.1);
}