/* ============================================================
   MODERN WARM SKIN — Effe centraal
   Overschrijft de kleur-tokens van skin-modern.css.
   Vereist dat body BEIDE klassen heeft: "modern modern-warm".
   ============================================================ */

body.modern.modern-warm {
  /* === Achtergrond & vlakken === */
  --bg:          #f5ede3;
  --card-bg:     #fdf8f2;
  --card-border: #e8d8c8;
  --card-radius: 14px;

  /* === Tekst === */
  --text:        #3a2e28;
  --text-muted:  #7a6258;
  --text-subtle: #a8998f;

  /* === Primaire kleur (warm amber) === */
  --primary:        #c97a40;
  --primary-dark:   #b36832;
  --primary-darker: #8a4f24;
  --primary-soft:   #f5e8da;
  --primary-softer: rgba(201,122,64,0.13);

  /* === Secundaire / chip === */
  --secondary:       #f0e6da;
  --secondary-hover: #e8d9ca;
  --chip-bg:         #f0e6da;

  /* === Schaduwen (warme tint) === */
  --shadow-sm: 0 1px 2px rgba(60,30,10,0.06);
  --shadow-md: 0 4px 12px rgba(60,30,10,0.10);
  --shadow-lg: 0 12px 28px rgba(60,30,10,0.14);
  --shadow:    var(--shadow-md);

  /* === Status === */
  --danger:  #b52b27;
  --success: #245a36;
  --warning: #8a6200;
  --info:    #3b1f6b;

  /* === Alerts === */
  --alert-success-bg:     #edf6ee;
  --alert-success-border: #cfe7d2;
  --alert-success-text:   #245a36;

  --alert-error-bg:     #fde9e3;
  --alert-error-border: #f2c0b1;
  --alert-error-text:   #7a241a;

  --alert-info-bg:     #f3ecff;
  --alert-info-border: #dbc7ff;
  --alert-info-text:   #3b1f6b;
}

/* ============================================================
   TOPBAR — warme glaslaag
   ============================================================ */
body.modern.modern-warm .topbar {
  background: rgba(253,248,242,0.88);
  border-bottom-color: #e8d8c8;
}

/* Nav-knoppen */
body.modern.modern-warm .topbar-btn {
  color: #7a6258;
}

body.modern.modern-warm .topbar-btn:hover {
  background: rgba(60,30,10,0.05);
  color: var(--text);
}

body.modern.modern-warm .topbar-btn.is-active {
  background: var(--primary-softer);
  color: var(--primary-darker);
}

/* Profielknop */
body.modern.modern-warm .profile-trigger {
  background: rgba(60,30,10,0.05);
}

body.modern.modern-warm .profile-trigger:hover {
  background: rgba(60,30,10,0.09);
}

body.modern.modern-warm .profile-trigger.is-active {
  background: var(--primary-softer);
  color: var(--primary-darker);
}

/* ============================================================
   MOBIEL MENU
   ============================================================ */
body.modern.modern-warm .mobile-menu a:hover,
body.modern.modern-warm .mobile-menu button:hover {
  background: rgba(60,30,10,0.05);
}

/* ============================================================
   FORMULIERVELDEN
   ============================================================ */
body.modern.modern-warm input[type="text"],
body.modern.modern-warm input[type="email"],
body.modern.modern-warm input[type="password"],
body.modern.modern-warm input[type="number"],
body.modern.modern-warm input[type="date"],
body.modern.modern-warm input[type="datetime-local"],
body.modern.modern-warm input[type="search"],
body.modern.modern-warm textarea,
body.modern.modern-warm select {
  background: #fdf8f2;
  border-color: #e0cfc0;
  color: var(--text);
}

body.modern.modern-warm input:focus,
body.modern.modern-warm textarea:focus,
body.modern.modern-warm select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(201,122,64,0.15);
}

/* ============================================================
   SECONDARY BUTTON
   ============================================================ */
body.modern.modern-warm .secondary-btn,
body.modern.modern-warm .btn-ghost {
  border-color: #e8cdb8;
  color: var(--primary-darker);
}

body.modern.modern-warm .secondary-btn:hover,
body.modern.modern-warm .btn-ghost:hover {
  background: var(--primary-soft);
  border-color: #d9b99a;
}

/* ============================================================
   AFSPRAKEN — dagen-blok
   ============================================================ */
body.modern.modern-warm .appointment-days {
  background: var(--primary-soft);
  color: var(--primary-darker);
}

/* ============================================================
   ACTIVITY ALERT
   ============================================================ */
body.modern.modern-warm .activity-alert {
  background: rgba(180,140,0,0.10);
  border-color: rgba(180,140,0,0.25);
  color: #7a5c00;
}

/* ============================================================
   OPMERKING — rand links
   ============================================================ */
body.modern.modern-warm .appt-comment {
  border-left-color: #e8cdb8;
}

/* ============================================================
   HOMEPAGE — accent blok
   ============================================================ */
body.modern.modern-warm .block-accent {
  background: #f5e8da;
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
body.modern.modern-warm .cookie-banner {
  background: #fdf8f2;
  border-top-color: #e8d8c8;
}