/* =======================================================================
   maarsstee-light.css  (THEME)
   ======================================================================= */

:root{
  /* Huisstijl */
  --red:#E85B64;
  --teal:#1FB6C1;
  --ink:#1F2328;
  --muted:#5C6670;

  /* Warmere basis */
  --bg:#FBFAF7;
  --card:#FFFDFB;

  /* Warm accent */
  --warm:#FFB27A;
  --warm-weak: rgba(255,178,122,.18);
  --warm-wash: rgba(255,178,122,.10);

  /* Lijnen */
  --line:#EFE7E1;
  --border: var(--line);

  /* Washes */
  --wash-1: rgba(232,91,100,.10);
  --wash-2: rgba(31,182,193,.10);
  --wash-3: rgba(232,91,100,.06);
  --wash-4: rgba(31,182,193,.06);

  /* Gradients */
  --accent-grad: linear-gradient(90deg,
    rgba(232,91,100,.22),
    rgba(255,178,122,.18),
    rgba(31,182,193,.22)
  );
  --accent-grad-strong: linear-gradient(90deg,
    rgba(232,91,100,.36),
    rgba(255,178,122,.28),
    rgba(31,182,193,.36)
  );
  --btn-grad: linear-gradient(135deg,
    #1FB6C1 0%,
    #FFB27A 55%,
    #E85B64 110%
  );

  /* Shape + shadow */
  --radius: 18px;
  --shadow: 0 14px 40px rgba(16,24,40,.12);
  --shadow-soft: 0 10px 26px rgba(16,24,40,.08);

  /* Layout */
  --container: 1200px;

  /* Focus */
  --focus: 0 0 0 3px rgba(31,182,193,.35), 0 0 0 6px rgba(232,91,100,.20);

  /* A11Y controls sizing */
  --ctrl-h: 40px;
  --ctrl-r: 999px;
  --ctrl-px: 18px;
}

/* =========================
   PAGE BACKGROUND (body bg)
   ========================= */
:root{
  --page-bg:
    radial-gradient(1200px 520px at 10% -5%, rgba(232,91,100,.12), transparent 60%),
    radial-gradient(1200px 520px at 90% -5%, rgba(31,182,193,.10), transparent 60%),
    radial-gradient(900px 420px at 50% 30%, rgba(255,178,122,.12), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--bg) 55%, #fff 100%);
}

/* =========================
   TOPBAR theme fills
   ========================= */
:root{
  --topbar-bg: linear-gradient(90deg,
    rgba(31,182,193,.98),
    rgba(255,178,122,.85),
    rgba(232,91,100,.92)
  );
  --topbar-ink:#fff;
  --topbar-border: rgba(255,255,255,.22);

  --topbar-ctrl-border: rgba(255,255,255,.35);
  --topbar-ctrl-bg: rgba(255,255,255,.10);
  --topbar-ctrl-bg-hover: rgba(255,255,255,.18);
  --topbar-ctrl-inset: rgba(255,255,255,.32);

  --topbar-switch-bg: rgba(255,255,255,.28);
  --topbar-switch-knob: #fff;
  --topbar-switch-on: rgba(232,91,100,.72);

  --topbar-ctrl-btn-bg: rgba(255,255,255,.10);
  --topbar-ctrl-btn-bg-hover: rgba(255,255,255,.16);
}

/* =========================
   HEADER / NAV theme fills
   ========================= */
:root{
  --header-bg: rgba(255,255,255,.90);
  --header-border: rgba(239,231,225,.95);

  --brand-mark-bg: rgba(232,91,100,.14);
  --brand-mark-border: rgba(232,91,100,.24);

  --nav-bg: rgba(255,255,255,.85);
  --nav-bg-hover: #fff;
  --nav-inset: rgba(31,35,40,.14);
  --nav-hover-inset: rgba(31,182,193,.35);
  --nav-hover-shadow: rgba(31,182,193,.12);

  --menu-bg:#fff;
  --menu-hover-bg: linear-gradient(90deg,
    rgba(232,91,100,.10),
    rgba(255,178,122,.10),
    rgba(31,182,193,.10)
  );

  --caret: rgba(31,35,40,.70);

  --btn-outline-bg: rgba(255,255,255,.92);
  --btn-outline-hover: linear-gradient(180deg, rgba(232,91,100,.07), rgba(31,182,193,.07));
}

/* =========================
   HERO backgrounds (light)
   ========================= */
:root{
  --hero-bg:
    radial-gradient(1200px 420px at 8% 10%, rgba(232,91,100,.24), transparent 60%),
    radial-gradient(1200px 420px at 50% 10%, rgba(255,178,122,.22), transparent 60%),
    radial-gradient(1200px 420px at 92% 10%, rgba(31,182,193,.22), transparent 60%),
    linear-gradient(180deg, #fff 0%, #FBF4EF 100%);
  --hero-border: rgba(239,231,225,.95);
  --hero-lead: rgba(31,35,40,.90);

  --panel-bg:
    radial-gradient(520px 220px at 12% 8%, rgba(232,91,100,.09), transparent 60%),
    radial-gradient(520px 220px at 50% 8%, rgba(255,178,122,.10), transparent 60%),
    radial-gradient(520px 220px at 88% 8%, rgba(31,182,193,.08), transparent 60%),
    rgba(255,255,255,.92);

  --photo-bg:
    radial-gradient(360px 180px at 50% 45%, rgba(255,255,255,.90), transparent 72%),
    radial-gradient(520px 220px at 15% 15%, rgba(232,91,100,.18), transparent 60%),
    radial-gradient(520px 220px at 50% 15%, rgba(255,178,122,.16), transparent 60%),
    radial-gradient(520px 220px at 85% 15%, rgba(31,182,193,.14), transparent 60%),
    linear-gradient(180deg, #fff 0%, #f7f9fa 100%);

  --chip-ink: rgba(31,35,40,.90);
  --chip-bg: rgba(255,178,122,.16);
  --chip-border: rgba(255,178,122,.22);
  --chip-bg-hover: rgba(255,178,122,.20);

  --chip-teal-bg: rgba(31,182,193,.13);
  --chip-teal-border: rgba(31,182,193,.22);
  --chip-teal-bg-hover: rgba(31,182,193,.17);
}

/* =========================
   SECTIONS / TEXT TONES (light)
   ========================= */
:root{
  --lead-ink: rgba(31,35,40,.80);

  --quote-bg:
    radial-gradient(520px 220px at 12% 12%, rgba(232,91,100,.14), transparent 62%),
    rgba(232,91,100,.08);
  --quote-border: rgba(232,91,100,.20);
  --quote-ink: rgba(31,35,40,.82);
  --quote-sig: rgba(31,35,40,.72);
}

/* =========================
   PROJECTS background (light)
   ========================= */
:root{
  --projects-bg:
    radial-gradient(900px 380px at 15% 0%, var(--wash-1), transparent 60%),
    radial-gradient(900px 380px at 50% 0%, var(--warm-wash), transparent 62%),
    radial-gradient(900px 380px at 85% 0%, var(--wash-2), transparent 60%),
    var(--bg);
}

/* =========================
   SNACKBAR background (light)
   ========================= */
:root{
  --snackbar-bg:
    radial-gradient(620px 240px at 10% 30%, rgba(232,91,100,.18), transparent 60%),
    radial-gradient(620px 240px at 50% 30%, rgba(255,178,122,.16), transparent 60%),
    radial-gradient(620px 240px at 90% 30%, rgba(31,182,193,.18), transparent 60%),
    linear-gradient(90deg, rgba(232,91,100,.16), rgba(255,178,122,.12), rgba(31,182,193,.16));
}

/* =========================
   NEWSFLASH background (light)
   ========================= */
:root{
  --newsflash-bg: linear-gradient(90deg,
    rgba(232,91,100,.98),
    rgba(255,178,122,.90),
    rgba(31,182,193,.92)
  );
  --newsflash-ink:#fff;
  --newsflash-border: rgba(255,255,255,.18);
}

/* =========================
   FOOTER background (light)
   ========================= */
:root{
  --footer-bg:
    radial-gradient(900px 260px at 15% 0%, rgba(232,91,100,.06), transparent 60%),
    radial-gradient(900px 260px at 50% 0%, rgba(255,178,122,.06), transparent 62%),
    radial-gradient(900px 260px at 85% 0%, rgba(31,182,193,.06), transparent 60%),
    #fff;
}

/* =========================
   PAGE TEMPLATE background (light)
   ========================= */
:root{
  --pagehero-bg:
    radial-gradient(1100px 380px at 10% 0%, rgba(232,91,100,.14), transparent 60%),
    radial-gradient(1100px 380px at 90% 0%, rgba(31,182,193,.14), transparent 60%),
    linear-gradient(180deg, #fff 0%, #f7f9fa 100%);
}

/* =========================
   OPTIONAL: force light on body.light
   ========================= */
body.light{
  color-scheme: light;
}
/* =========================================================
   Reactions + comments (shared base)
   Zet dit in je theme_light.css + theme_dark.css
   ========================================================= */

.card-reactions{ margin-top:16px; }

/* bar met reactie-knoppen */
.react-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* spacing helpers (voor consistentie, geen inline meer) */
.sp-14{ height:14px; }
.sp-16{ height:16px; }

.divider{
  border:0;
  border-top:1px solid var(--line);
  margin: 0;
}

/* lijst met comments */
.comment-list{
  display:grid;
  gap:10px;
}
/* Comments – light theme */

.comment-card{
  background: rgba(31,35,40,.03);
  border:1px solid rgba(31,35,40,.08);
}

.comment-card.is-pending{
  border-style:dashed;
  background: rgba(31,35,40,.025);
}

.comment-pending-note{
  color: rgba(31,35,40,.70);
}

.comment-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.comment-date{
  opacity:.7;
  font-weight:800;
  font-size:12px;
}

.comment-body{ white-space:pre-wrap; }

.comments-title{ margin:0 0 10px; }
.form-title{ margin:0 0 6px; }
.form-lead{ margin:0 0 10px; }

/* honeypot (anti-spam) */
.honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
}
/* =========================
   LIGHT THEME COLORS
   ========================= */

/* Side card */
.side-card{
  background:#fff;
  border:1px solid rgba(230,236,239,.98);
  box-shadow: 0 14px 40px rgba(16,24,40,.12);
}
.side-lead{ color: rgba(31,35,40,.78); }

/* Cover */
.cover{ background:#ddd; }
.cover-badge{
  background: rgba(255,255,255,.88);
  border:1px solid rgba(230,236,239,.98);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.cover-badge .bdot{ background:#1FB6C1; }

/* Mini CTA divider */
.mini-cta{ border-top:1px solid rgba(230,236,239,.95); }

/* Card */
.card{
  background:#fff;
  border:1px solid rgba(230,236,239,.98);
  box-shadow: 0 10px 26px rgba(16,24,40,.08);
}

/* Prose */
.prose{ color: rgba(31,35,40,.86); }

/* TOC */
.toc a{
  background: rgba(31,182,193,.08);
  border:1px solid rgba(31,182,193,.12);
}
.toc a:hover{ background: rgba(31,182,193,.14); }
.toc .h3{
  background: rgba(232,91,100,.06);
  border-color: rgba(232,91,100,.10);
}

/* Mini link */
.mini-link{
  color: #1FB6C1;
  background: rgba(31,182,193,.10);
  border:1px solid rgba(31,182,193,.16);
}
.mini-link:hover{ background: rgba(31,182,193,.16); }

.mini-link.red{
  color: #E85B64;
  background: rgba(232,91,100,.10);
  border:1px solid rgba(232,91,100,.16);
}
.mini-link.red:hover{ background: rgba(232,91,100,.16); }

/* Related band */
.related{
  background: rgba(246,248,250,.8);
  border-top:1px solid rgba(230,236,239,.95);
  border-bottom:1px solid rgba(230,236,239,.95);
}

/* Project cards */
.pcard{
  background:#fff;
  border:1px solid rgba(230,236,239,.98);
  box-shadow: 0 10px 26px rgba(16,24,40,.08);
}
.pbody p{ color: rgba(31,35,40,.78); }
/* events.light.css */
.ms-events__hero{
  background:
    radial-gradient(1100px 380px at 10% 0%, rgba(232,91,100,.14), transparent 60%),
    radial-gradient(1100px 380px at 90% 0%, rgba(31,182,193,.14), transparent 60%),
    linear-gradient(180deg, #fff 0%, #f7f9fa 100%);
  border-bottom: 1px solid rgba(230,236,239,.90);
}

.ms-events .hero-card{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(230,236,239,.98);
  box-shadow: var(--shadow);
}
.ms-events .hero-card::before{ background: var(--teal); }
.ms-events .hero-sub{ color: rgba(31,35,40,.82); }

.ms-events .toolbar{
  background:#fff;
  border:1px solid rgba(230,236,239,.98);
  box-shadow: var(--shadow-soft);
}
.ms-events label{ color: rgba(31,35,40,.75); }

.ms-events input,
.ms-events select{
  background:#fff;
  border:1px solid rgba(31,35,40,.16);
  color: rgba(31,35,40,.92);
}

.ms-events .chip{
  background: rgba(31,182,193,.10);
  border:1px solid rgba(31,182,193,.16);
  color: rgba(31,35,40,.92);
}
.ms-events .chip:hover{ background: rgba(31,182,193,.16); }
.ms-events .chip[aria-current="true"]{
  background: rgba(31,182,193,.20);
  box-shadow: 0 0 0 1px rgba(31,182,193,.22) inset;
}
.ms-events .chip.red{
  background: rgba(232,91,100,.10);
  border-color: rgba(232,91,100,.16);
}
.ms-events .chip.red:hover{ background: rgba(232,91,100,.16); }

.ms-events .monthBlock{
  background:#fff;
  border:1px solid rgba(230,236,239,.98);
  box-shadow: var(--shadow-soft);
}
.ms-events .monthHead{ border-bottom:1px solid rgba(230,236,239,.95); }
.ms-events .mini{ color: rgba(31,35,40,.70); }

.ms-events .eventCard{
  border:1px solid rgba(31,35,40,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,250,.65));
}
.ms-events .dateBox{
  border:1px solid rgba(31,182,193,.18);
  background: rgba(31,182,193,.10);
}
.ms-events .dateBox .weekday{ opacity:.72; }
.ms-events .dateBox .month{ opacity:.95; }

.ms-events .pill{
  border:1px solid rgba(31,35,40,.14);
  background: rgba(31,35,40,.04);
  color: rgba(31,35,40,.88);
}
.ms-events .pill .dot{ background: var(--teal); }
.ms-events .pill.red{
  border-color: rgba(232,91,100,.18);
  background: rgba(232,91,100,.10);
}
.ms-events .pill.red .dot{ background: var(--red); }

.ms-events .eDesc{ color: rgba(31,35,40,.78); }

.ms-events .link{
  color: var(--teal);
  background: rgba(31,182,193,.10);
  border:1px solid rgba(31,182,193,.16);
}
.ms-events .link:hover{ background: rgba(31,182,193,.16); }
.ms-events .link.red{
  color: var(--red);
  background: rgba(232,91,100,.10);
  border:1px solid rgba(232,91,100,.16);
}
.ms-events .link.red:hover{ background: rgba(232,91,100,.16); }

/* CTA */
.ms-events .ctaBlock{
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(232,91,100,.10), transparent 60%),
    radial-gradient(900px 260px at 90% 0%, rgba(31,182,193,.10), transparent 60%),
    #fff;
}
.ms-events .ctaSub{ color: rgba(31,35,40,.74); }
/* Contact – light */
body:not(.dark):not(.hc) .ms-note--ok{
  background: rgba(31,182,193,.10);
  border-color: rgba(31,182,193,.18);
}
body:not(.dark):not(.hc) .ms-note--err{
  background: rgba(232,91,100,.10);
  border-color: rgba(232,91,100,.18);
}