/* CrossPaths themes — LIGHT is the public default.
   Dark via data-theme="dark". Toggle available for everyone. */

:root {
  color-scheme: dark;
  --bg: #070708;
  --bg-elevated: #101014;
  --bg-soft: #16161c;
  --ink: #f4f1ea;
  --ink-soft: rgba(244, 241, 234, 0.72);
  --ink-muted: rgba(244, 241, 234, 0.48);
  --line: rgba(244, 241, 234, 0.08);
  --accent: #d4a574;
  --accent-hot: #e8c49a;
  --accent-glow: rgba(212, 165, 116, 0.22);
  --accent-ink: #14110e;
  --champagne: #d4a574;
  --champagne-hot: #e8c49a;
  --champagne-glow: rgba(212, 165, 116, 0.22);
  --header-bg: rgba(7, 7, 8, 0.72);
  --nav-toggle-bg: rgba(255, 255, 255, 0.03);
  --surface-hover: rgba(255, 255, 255, 0.03);
  --ghost-hover-border: rgba(244, 241, 234, 0.28);
  --body-glow-a: rgba(212, 165, 116, 0.07);
  --body-glow-b: rgba(255, 255, 255, 0.02);
  --body-base-top: #070708;
  --body-base-mid: #0c0c10;
  --body-base-bot: #070708;
  --scrollbar-track: #0a0a0b;
  --scrollbar-thumb: #3a3a42;
  --scrollbar-thumb-hover: #4e4e58;
  --map-fallback: #0a0a0b;
  --radius: 18px;
  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max: 1120px;
  --narrow: 720px;
}

html[data-theme="light"] {
  color-scheme: light;
  /* White page + landing-button yellow (#d9b77e) as accent; blocks = light grey */
  --bg: #ffffff;
  --bg-elevated: #f5f8fa;
  --bg-soft: #eef1f4;
  --ink: #12141a;
  --ink-soft: #2a3038;
  --ink-muted: #4a525c;
  --line: #e2e6ea;
  /* Feller knopgeel (fills); donkerder accent-text voor titels op wit */
  --accent: #e8b84a;
  --accent-hot: #f0c85e;
  --accent-text: #7a5810;
  --accent-glow: rgba(232, 184, 74, 0.35);
  --accent-ink: #1a1410;
  --champagne: #e8b84a;
  --champagne-hot: #f0c85e;
  --champagne-glow: rgba(232, 184, 74, 0.35);
  --header-bg: rgba(255, 255, 255, 0.92);
  --nav-toggle-bg: rgba(18, 20, 26, 0.04);
  --surface-hover: rgba(217, 183, 126, 0.12);
  --ghost-hover-border: rgba(18, 20, 26, 0.16);
  --body-glow-a: rgba(217, 183, 126, 0.1);
  --body-glow-b: rgba(217, 183, 126, 0.04);
  --body-base-top: #ffffff;
  --body-base-mid: #ffffff;
  --body-base-bot: #ffffff;
  --scrollbar-track: #f5f8fa;
  --scrollbar-thumb: #c5ccd3;
  --scrollbar-thumb-hover: #a8b0b8;
  --map-fallback: #e8eef1;
}

/* Admin theme switcher */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  flex-shrink: 0;
}

.theme-toggle__btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1.2;
}

.theme-toggle__btn:hover {
  color: var(--ink);
}

.theme-toggle__btn.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

.theme-toggle__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-nav .theme-toggle,
.admin-nav .theme-toggle,
.site-header .theme-toggle {
  margin-left: 0.35rem;
}

@media (max-width: 860px) {
  .theme-toggle {
    margin: 0.5rem 0 0;
  }
}

/* —— Light-theme hardening —— */
html[data-theme="light"] .nav-user__dropdown,
html[data-theme="light"] .admin-nav__panel {
  background: var(--bg-elevated);
  border-color: var(--line);
  box-shadow: 0 12px 40px rgba(23, 25, 28, 0.12);
}

html[data-theme="light"] .form-card,
html[data-theme="light"] .club-card,
html[data-theme="light"] .profile-section,
html[data-theme="light"] .world-card,
html[data-theme="light"] .cp-card,
html[data-theme="light"] .chat-thread,
html[data-theme="light"] .modal__panel,
html[data-theme="light"] .lf-modal__panel,
html[data-theme="light"] .guest-flow__panel {
  background: var(--bg-elevated);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-input,
html[data-theme="light"] .cpm-search__input {
  background: var(--bg-soft);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="light"] .hint,
html[data-theme="light"] .text-muted {
  color: var(--ink-soft);
}

html[data-theme="light"] .app-nav > a.is-active {
  color: #12141a;
}

html[data-theme="light"] .btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

html[data-theme="light"] .cookie-consent__inner {
  background: #ffffff;
  box-shadow: 0 -8px 40px rgba(23, 25, 28, 0.14);
}

html[data-theme="light"] .hero--map .cpm-frame::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.35) 42%, transparent 70%);
}

/* Hero public map: override hardcoded dark frame / shade / poster */
html[data-theme="light"] .cpm-shade {
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(255, 255, 255, 0.65) 100%);
}
@media (min-width: 1024px) {
  html[data-theme="light"] .cpm-root--public:not(.is-expanded) .cpm-shade {
    background:
      linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.97) 40%, rgba(255, 255, 255, 0.88) 54%, rgba(255, 255, 255, 0.25) 76%, rgba(255, 255, 255, 0.15) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, transparent 22%, transparent 72%, #ffffff 100%);
  }
}
html[data-theme="light"] .admin-light-preview-banner {
  background: #f5f8fa;
  border-bottom-color: #e8b84a;
  color: #12141a;
}

/* App + landing blocks: force warm light surfaces */
html[data-theme="light"] .place-chips li,
html[data-theme="light"] .partner-card,
html[data-theme="light"] .partner-card__body,
html[data-theme="light"] .partners-home__card {
  background: #f5f8fa !important;
  border-color: #e2e6ea;
  color: #12141a;
}

/* Dashboard + Places blocks: light grey (override hardcoded #141416) */
html[data-theme="light"] .world-world,
html[data-theme="light"] .world-cross,
html[data-theme="light"] .places-mine.form-card,
html[data-theme="light"] .places-search.form-card {
  background: #f5f8fa !important;
  border: 1px solid #e2e6ea !important;
  box-shadow: none;
}

html[data-theme="light"] .world-world__title,
html[data-theme="light"] .world-cross h2,
html[data-theme="light"] .world-section h2,
html[data-theme="light"] .places-mine__head .h-sm,
html[data-theme="light"] .places-search .h-sm,
html[data-theme="light"] h1,
html[data-theme="light"] .page-title {
  color: #3a4048 !important;
}

html[data-theme="light"] .club-hero__title,
html[data-theme="light"] .place-page .club-hero__title {
  color: #3a4048 !important;
}

html[data-theme="light"] .world-world__lead,
html[data-theme="light"] .world-world__count-badge,
html[data-theme="light"] .place-suggest__meta,
html[data-theme="light"] .hint,
html[data-theme="light"] .lead {
  color: #2a3038 !important;
}

html[data-theme="light"] .world-world__count-badge [data-world-place-count] {
  background: #ffffff;
  color: #12141a;
}

html[data-theme="light"] .world-world__manage {
  color: #2a3038 !important;
  border-color: #e8b84a !important;
}

html[data-theme="light"] .world-world__field input[type="search"],
html[data-theme="light"] .places-search input[type="search"],
html[data-theme="light"] .field input {
  background: #ffffff !important;
  border-color: #e2e6ea !important;
  color: #12141a !important;
}

html[data-theme="light"] .cp-manage-card {
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(217, 183, 126, 0.12), transparent 55%),
    #f5f8fa !important;
}

/* Nested list rows stay white on grey blocks */
html[data-theme="light"] .places-mine .place-row,
html[data-theme="light"] .places-mine li,
html[data-theme="light"] .place-list-item {
  background: #ffffff;
}

html[data-theme="light"] .section--phases {
  background: linear-gradient(180deg, transparent, rgba(245, 248, 250, 0.95), transparent);
}

html[data-theme="light"] .section--partners-home {
  background: linear-gradient(180deg, rgba(217, 183, 126, 0.1), transparent 60%);
}

html[data-theme="light"] .partner-card {
  box-shadow: 0 8px 28px rgba(23, 25, 28, 0.06);
}

html[data-theme="light"] .media-home {
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(217, 183, 126, 0.14), transparent 55%),
    #f5f8fa !important;
}

html[data-theme="light"] .media-home__card {
  background: linear-gradient(165deg, #ffffff 0%, #f5f8fa 100%);
  border-color: #e2e6ea;
  color: #12141a;
}

html[data-theme="light"] .cp-manage-card__photo--empty,
html[data-theme="light"] .cp-manage-card__photo--shielded {
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(217, 183, 126, 0.2), transparent 70%),
    linear-gradient(160deg, #f5f8fa, #e8ecef) !important;
  color: var(--accent);
}

html[data-theme="light"] .cp-manage-card__shield-label {
  color: #12141a;
}

html[data-theme="light"] .place-suggest__item {
  border-bottom-color: rgba(18, 20, 26, 0.1);
}

html[data-theme="light"] .place-suggest__item:hover,
html[data-theme="light"] .place-suggest__item:focus-visible {
  background: rgba(217, 183, 126, 0.12);
}

html[data-theme="light"] .place-suggest__action,
html[data-theme="light"] .btn--primary,
html[data-theme="light"] .btn--champagne {
  background: #e8b84a !important;
  color: #1a1410 !important;
}

html[data-theme="light"] .place-suggest__action:hover,
html[data-theme="light"] .btn--primary:hover,
html[data-theme="light"] .btn--champagne:hover {
  background: #f0c85e !important;
}

/* Accenttitels / eyebrows / links: donkerder goud op wit */
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .eyebrow--hero,
html[data-theme="light"] .promise,
html[data-theme="light"] .phase-card__label,
html[data-theme="light"] .world-prompt__eyebrow,
html[data-theme="light"] .world-net__label--gold,
html[data-theme="light"] .cpm-cta,
html[data-theme="light"] .text-link,
html[data-theme="light"] .world-info-link,
html[data-theme="light"] .cpm-back a,
html[data-theme="light"] .cpm-note a,
html[data-theme="light"] .cpm-retry,
html[data-theme="light"] a.text-link {
  color: var(--accent-text, #7a5810) !important;
}

/* Actief menu-item: donker genoeg op wit */
html[data-theme="light"] .app-nav a.is-active {
  color: #12141a !important;
  font-weight: 650;
}

/* Actieve keuzes: zwarte tekst, gouden rand/bg blijft */
html[data-theme="light"] .chip:has(input:checked),
html[data-theme="light"] .chip-group--stack .chip:has(input:checked),
html[data-theme="light"] #contextModal .chip:has(input:checked),
html[data-theme="light"] #clubContextModal .chip:has(input:checked),
html[data-theme="light"] .world-choice:has(input:checked),
html[data-theme="light"] .world-choice-list .world-choice:has(input:checked),
html[data-theme="light"] .toggle-btn:has(input:checked),
html[data-theme="light"] .toggle-btn.is-on,
html[data-theme="light"] .interest-tile.is-selected,
html[data-theme="light"] .report-reason:has(input:checked),
html[data-theme="light"] .cp-share-option:has(input:checked),
html[data-theme="light"] .pref-pill.is-active,
html[data-theme="light"] .preferences-page button.pref-pill.is-active,
html[data-theme="light"] .cpm-filter__btn.is-active,
html[data-theme="light"] .crosspaths-tabs__tab.is-active,
html[data-theme="light"] .ai-chip.is-active {
  color: #12141a !important;
  border-color: rgba(232, 184, 74, 0.7);
  background: rgba(232, 184, 74, 0.22);
}

html[data-theme="light"] .preferences-page button.pref-pill.is-active {
  background: linear-gradient(135deg, #f0c85e, #e8b84a);
  color: #12141a !important;
}

html[data-theme="light"] .crosspaths-tabs__tab.is-active .crosspaths-tabs__count {
  color: #12141a !important;
}

/* Chats (0)-badge: zwarte tekst */
html[data-theme="light"] .nav-badge {
  background: rgba(18, 20, 26, 0.08);
  color: #12141a !important;
}

/* Chat-balk met naam: niet zwart in light */
html[data-theme="light"] .chats-thread__head {
  background: rgba(245, 248, 250, 0.96) !important;
  border-bottom-color: #e2e6ea;
  color: #12141a;
}

html[data-theme="light"] .chats-thread__identity h2 {
  color: #12141a;
}

html[data-theme="light"] .chats-bubble--them {
  background: #eef1f4;
  color: #12141a;
}

html[data-theme="light"] .chats-bubble--me {
  background: rgba(232, 184, 74, 0.28);
  color: #12141a;
}

html[data-theme="light"] .chats-item:hover {
  background: rgba(18, 20, 26, 0.04);
}

/* Jullie Werelden (profiel): leesbaar in light */
html[data-theme="light"] .world-net__label {
  color: #4a525c;
}

html[data-theme="light"] .world-net__label--gold {
  color: #a67c1a;
}

html[data-theme="light"] .world-node {
  background: #ffffff;
  border-color: #e2e6ea;
}

html[data-theme="light"] .world-node--mine {
  background: #ffffff;
  border-color: #d5dae0;
}

html[data-theme="light"] .world-node--mine .world-node__name {
  color: #12141a !important;
}

html[data-theme="light"] .world-node--mine .place-icon {
  color: #4a525c;
}

html[data-theme="light"] .world-node--shared {
  border-color: rgba(232, 184, 74, 0.7);
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(232, 184, 74, 0.2), transparent 70%),
    #fff8e8;
  box-shadow: 0 0 0 1px rgba(232, 184, 74, 0.2);
}

html[data-theme="light"] .world-node--shared .place-icon,
html[data-theme="light"] .world-node--shared .world-node__name {
  color: #8a6410 !important;
}

html[data-theme="light"] .world-node--theirs {
  border-color: #cfd5db;
  background: #e8ecef;
}

html[data-theme="light"] .world-node--theirs .world-node__name {
  color: #2a3038 !important;
}

html[data-theme="light"] .world-node--theirs .place-icon {
  color: #4a525c;
  opacity: 0.85;
}

html[data-theme="light"] .world-net__empty {
  color: #4a525c;
  border-color: #cfd5db;
}

html[data-theme="light"] .world-node__meta {
  color: #4a525c;
}

/* Voor iPhone: zwarte tekst + lichte outline */
html[data-theme="light"] .nav-install__btn {
  background: #ffffff !important;
  border-color: #12141a !important;
  color: #12141a !important;
}

html[data-theme="light"] .nav-install__btn:hover {
  background: #f5f8fa !important;
  border-color: #12141a !important;
  color: #12141a !important;
}

html[data-theme="light"] .nav-install__icon {
  color: #12141a;
  opacity: 1;
}

/* Place-prompt “Misschien vergeet je deze plaats” */
html[data-theme="light"] .world-prompt,
html[data-theme="light"] .world-prompt--ready {
  background: #f5f8fa !important;
  border-color: #e2e6ea !important;
}

html[data-theme="light"] .world-prompt__title {
  color: #12141a !important;
}

html[data-theme="light"] .world-prompt__hint {
  color: #2a3038 !important;
}

html[data-theme="light"] .world-prompt__eyebrow {
  color: var(--accent-text, #7a5810) !important;
}

html[data-theme="light"] .cpm-frame--public {
  background: #e8eef1;
}

html[data-theme="light"] .cpm-poster {
  background:
    radial-gradient(1.5px 1.5px at 68% 38%, rgba(217, 183, 126, 0.5), transparent 60%),
    radial-gradient(2px 2px at 74% 52%, rgba(217, 183, 126, 0.4), transparent 60%),
    radial-gradient(60% 70% at 72% 48%, #f5f8fa 0%, #e8eef1 70%);
}

html[data-theme="light"] .site-header,
html[data-theme="light"] .app-top {
  background: rgba(255, 255, 255, 0.94);
}

html[data-theme="light"] .media-home__card-label,
html[data-theme="light"] .media-home__card-note {
  color: #4a525c;
}

html[data-theme="light"] .hero-stamp__inner {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(217, 183, 126, 0.55);
}

html[data-theme="light"] .prose p,
html[data-theme="light"] .hero__sub,
html[data-theme="light"] .section__lead,
html[data-theme="light"] .place-suggest__body,
html[data-theme="light"] .promise {
  color: #2a3038;
}

html[data-theme="light"] .prose__punch,
html[data-theme="light"] .promise {
  color: #12141a;
}

html[data-theme="light"] .promise__mark {
  background: #e8b84a;
}

html[data-theme="light"] .partner-card__logo {
  background: #ffffff;
}

html[data-theme="light"] .step:hover {
  border-color: rgba(217, 183, 126, 0.5);
}

html[data-theme="light"] .step p,
html[data-theme="light"] .place-chips li,
html[data-theme="light"] .partners-home__copy p,
html[data-theme="light"] .places-why__copy p,
html[data-theme="light"] .prose p,
html[data-theme="light"] .hero__sub,
html[data-theme="light"] .section__lead,
html[data-theme="light"] .media-home__lead,
html[data-theme="light"] .cta-block > p:first-of-type {
  color: #2a3038;
}

html[data-theme="light"] .step__title,
html[data-theme="light"] .section__heading,
html[data-theme="light"] .cta-block h2,
html[data-theme="light"] .partners-home__copy h2,
html[data-theme="light"] .places-why__copy h2 {
  color: #17191c;
}

.admin-light-preview-banner {
  margin: 0;
  padding: 0.55rem 1.25rem;
  background: rgba(25, 185, 178, 0.15);
  border-bottom: 1px solid rgba(25, 185, 178, 0.35);
  color: var(--ink);
  font-size: 0.85rem;
  text-align: center;
}

.admin-light-preview-banner a {
  color: var(--accent);
  text-decoration: underline;
}