:root {
  --kontur-bg: #f3f6f4;
  --kontur-bg-2: #ffffff;
  --kontur-surface: #ffffff;
  --kontur-accent: #2f6b52;
  --kontur-accent-hover: #255a44;
  --kontur-accent-2: #8a6d3b;
  --kontur-text: #1a2e26;
  --kontur-muted: #5c7268;
  --kontur-line: rgba(26, 46, 38, 0.12);
  --kontur-shadow: 0 10px 30px rgba(20, 40, 30, 0.08);

  /* push Root vars even if Room loaded first */
  --body-bg: linear-gradient(160deg, #f4f7f5 0%, #e8efeb 45%, #dfe8e3 100%);
  --msger-bg: #ffffff;
  --wb-bg: #ffffff;
  --settings-bg: #ffffff;
  --trx-bg: #ffffff;
  --select-bg: #ffffff;
  --btns-bg-color: rgba(255, 255, 255, 0.92);
  --dd-color: #1a2e26;
  --border: 0.5px solid rgb(30 50 40 / 14%);
  --left-msg-bg: #e8efeb;
  --right-msg-bg: #2f6b52;
  --tab-btn-active: rgb(47 107 82 / 12%);
  --box-shadow: 0px 8px 24px 0px rgb(20 40 30 / 12%);
}

html, body {
  background: var(--kontur-bg) !important;
  background-image:
    radial-gradient(900px 420px at 0% 0%, rgba(47, 107, 82, 0.10), transparent 60%),
    radial-gradient(800px 380px at 100% 0%, rgba(138, 109, 59, 0.08), transparent 55%) !important;
  color: var(--kontur-text) !important;
}

body, .site-header, .hero, .hero-inner, .section, .footer, .has-animations {
  font-family: "Segoe UI", "PT Root UI", "Manrope", system-ui, sans-serif !important;
  color: var(--kontur-text);
}

/* ===== Landing (landing.css dark overrides) ===== */
.site-header,
.hero,
.has-animations,
.section,
.features-wrap,
.cta-inner,
.footer,
.is-boxed .body-wrap,
.body-wrap {
  background: transparent !important;
  color: var(--kontur-text) !important;
}

.is-boxed {
  background: var(--kontur-bg) !important;
}

.hero-bg,
.hero::before,
.hero::after,
.hero-illustration,
.hero-bg-illustration {
  opacity: 0.25 !important;
  filter: grayscale(0.2) brightness(1.4);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.hero-title,
#appTitle,
#appTitle h1,
#newRoomTitle,
.section-title {
  color: var(--kontur-text) !important;
}

p, .hero-paragraph, .section-paragraph,
#appDescription, #newRoomDescription, #joinDescription,
.site-header a, .menu-link, .footer a {
  color: var(--kontur-muted) !important;
}

.site-header a:hover, .menu-link:hover {
  color: var(--kontur-accent) !important;
}

/* Cards / panels */
.feature, .tiles-item, .pricing-table, .form-panel,
.box, .card, .room-form, .hero-form {
  background: var(--kontur-surface) !important;
  border: 1px solid var(--kontur-line) !important;
  box-shadow: var(--kontur-shadow) !important;
  color: var(--kontur-text) !important;
}

/* Inputs */
input, textarea, select,
.form-input, .input, .form-select,
input[type="text"], input[type="email"], input[type="password"] {
  background: #fff !important;
  color: var(--kontur-text) !important;
  border: 1px solid var(--kontur-line) !important;
  border-radius: 10px !important;
}

input::placeholder, textarea::placeholder {
  color: #8a9a92 !important;
}

/* Buttons */
a.button, .button, button.button, #joinRoomButton,
input[type="submit"], .join-button, .button-primary {
  background: linear-gradient(135deg, #2f6b52, #3d8f6e) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(47, 107, 82, 0.22) !important;
}

a.button:hover, .button:hover, #joinRoomButton:hover, .button-primary:hover {
  background: linear-gradient(135deg, #255a44, #2f6b52) !important;
  filter: none;
}

a.button-secondary, .button-secondary {
  background: #fff !important;
  color: var(--kontur-accent) !important;
  border: 1px solid var(--kontur-line) !important;
}

/* Hide marketing chrome */
#features, #teams, #tryEasier, #poweredBy, #sponsors, #advertisers, #footer {
  display: none !important;
}

/* ===== Room UI ===== */
body.room-page,
#bodyElem,
#initVideo,
.videoMenuBar,
#bottomButtons,
#control,
.settings,
.swal2-popup,
.msger,
.tab,
.whiteboard-container {
  color: var(--kontur-text);
}

#control button,
.videoMenuBar button,
#bottomButtons button,
button.control-button {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--kontur-text) !important;
  border: 1px solid var(--kontur-line) !important;
  box-shadow: var(--kontur-shadow) !important;
}

#control button:hover,
.videoMenuBar button:hover {
  background: #e8efeb !important;
}

/* SweetAlert / modals light */
.swal2-popup {
  background: #fff !important;
  color: var(--kontur-text) !important;
}
.swal2-title, .swal2-html-container, .swal2-content {
  color: var(--kontur-text) !important;
}
.swal2-confirm {
  background: #2f6b52 !important;
}

/* Chat bubbles readability on light */
.left-msg .msg-bubble {
  color: var(--kontur-text) !important;
}
.right-msg .msg-bubble {
  color: #fff !important;
}

/* Dropdowns / menus */
.dropdown-menu, .menu, .context-menu {
  background: #fff !important;
  color: var(--kontur-text) !important;
  border: 1px solid var(--kontur-line) !important;
  box-shadow: var(--kontur-shadow) !important;
}

/* Common dark hardcodes from landing */
.has-bg-color,
.bg-dark,
.has-bg-color-dark {
  background: #fff !important;
  color: var(--kontur-text) !important;
}

/* Links that were bright blue on dark */
a { color: var(--kontur-accent); }
a:hover { color: var(--kontur-accent-hover); }


/* ===== Fix: join bar contrast (cta-inner) ===== */
.cta,
.cta.section {
  background: transparent !important;
}

.cta-inner,
.cta-inner.section-inner,
.cta .section-inner {
  background: #ffffff !important;
  border: 1px solid rgba(26, 46, 38, 0.12) !important;
  box-shadow: 0 10px 30px rgba(20, 40, 30, 0.08) !important;
  color: #1a2e26 !important;
}

.cta-inner::before {
  opacity: 0.15 !important;
  filter: grayscale(0.3);
}

.cta .section-title,
.cta-inner .section-title,
#joinDescription,
h3#joinDescription {
  color: #1a2e26 !important;
  opacity: 1 !important;
}

.cta .form-input,
.cta input,
#roomName {
  background: #f4f7f5 !important;
  color: #1a2e26 !important;
  border: 1px solid rgba(26, 46, 38, 0.18) !important;
}

#joinRoomButton,
.cta #joinRoomButton,
.cta .button-primary {
  background: #2f6b52 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(47, 107, 82, 0.25) !important;
}

#joinRoomButton:hover {
  background: #255a44 !important;
  color: #ffffff !important;
}

/* Hero titles must stay dark on light */
#appTitle, #appTitle h1, #newRoomTitle, .hero-title, .hero h1, .hero h2 {
  color: #1a2e26 !important;
}
#appDescription, #newRoomDescription {
  color: #5c7268 !important;
}