/**
 * FEM Design System - Core
 * Variables, reset, base typography, utility classes
 *
 * Version: 1.0.0
 * Date: April 2026
 */

/* ============================================
   1. CSS VARIABLES
   ============================================ */

:root {
  /* Fonts */
  --font-body: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Cormorant Garamond", Georgia, serif;

  /* FEM Brand Colors */
  --fem-primary: #571512;
  --fem-primary-light: #6b1d19;
  --fem-primary-dark: #3d0f0d;
  --fem-accent: #e87d5e;
  --fem-accent-soft: #f4a68a;
  --fem-accent-light: #fff5f2;
  --fem-gold: #c9a96e;
  --fem-gold-light: #f5efe6;

  /* Warm neutrals */
  --fem-warm-bg: #fffbf9;
  --fem-warm-border: #f0e5dd;

  /* Layout */
  --fem-header-height: 64px;
  --fem-radius: 12px;
  --fem-radius-sm: 8px;

  /* Shadows */
  --fem-shadow: 0 2px 12px rgba(87, 21, 18, 0.06);
  --fem-shadow-lg: 0 8px 32px rgba(87, 21, 18, 0.10);
}

/* ============================================
   2. RESET & BASE
   ============================================ */

/* Global box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Portal reset & base (alleen ingelogd) */
body.fem-body.logged-in {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  background: #f8f5f2;
  -webkit-font-smoothing: antialiased;
}

body.fem-body.logged-in .fem-content a {
  color: var(--fem-accent);
  text-decoration: none;
  transition: color 0.2s;
}

body.fem-body.logged-in .fem-content a:hover {
  color: var(--fem-primary);
}

/* ============================================
   3. TYPOGRAPHY (alleen portal)
   ============================================ */

body.fem-body.logged-in h1,
body.fem-body.logged-in h2,
body.fem-body.logged-in h3,
body.fem-body.logged-in h4 {
  font-family: var(--font-heading);
  color: var(--fem-primary);
  line-height: 1.25;
  font-weight: 600;
}

body.fem-body.logged-in h1 { font-size: 2rem; }
body.fem-body.logged-in h2 { font-size: 1.5rem; }
body.fem-body.logged-in h3 { font-size: 1.25rem; }
body.fem-body.logged-in h4 { font-size: 1.1rem; }

/* ============================================
   4. UTILITY CLASSES
   ============================================ */

/* Text */
.fem-text-muted { color: #999; }
.fem-text-sm { font-size: 13px; }
.fem-text-xs { font-size: 11px; }
.fem-text-center { text-align: center; }
.fem-text-right { text-align: right; }
.fem-text-accent { color: var(--fem-accent); }
.fem-text-primary { color: var(--fem-primary); }

/* Margin */
.fem-mt-0 { margin-top: 0; }
.fem-mb-0 { margin-bottom: 0; }
.fem-mb-sm { margin-bottom: 8px; }
.fem-mb-md { margin-bottom: 16px; }
.fem-mb-lg { margin-bottom: 24px; }
.fem-mb-xl { margin-bottom: 40px; }

/* Flexbox */
.fem-flex { display: flex; }
.fem-flex-between { display: flex; justify-content: space-between; align-items: center; }
.fem-flex-center { display: flex; align-items: center; }
.fem-flex-wrap { flex-wrap: wrap; }
.fem-gap-sm { gap: 8px; }
.fem-gap-md { gap: 16px; }
.fem-gap-lg { gap: 24px; }

/* Display */
.fem-hidden { display: none; }
.fem-show-mobile { display: none !important; }
.fem-hide-mobile { display: block; }

@media (max-width: 600px) {
  .fem-show-mobile { display: block !important; }
  .fem-hide-mobile { display: none !important; }
}

/* Responsive typography */
@media (max-width: 600px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
}

/* ============================================
   5. LEGACY OVERRIDES
   Neutraliseert conflicten met fem-base.css
   zodat het nieuwe layout systeem voorrang krijgt.
   Verwijder deze sectie zodra alle views gemigreerd zijn.
   ============================================ */

/* Voorkom dat legacy .header het nieuwe fem-header overruled (alleen ingelogd) */
body.fem-body.logged-in #header.header { display: none; }

/* Voorkom dat legacy .main padding de layout breekt */
body.fem-body .fem-main { padding-top: 0; }

/* Legacy sidebar/drawer verbergen (we gebruiken fem-mobile-drawer, alleen ingelogd) */
body.fem-body.logged-in .mobile-drawer,
body.fem-body.logged-in .mobile-drawer-overlay { display: none !important; }

/* Legacy scroll-top en preloader */
body.fem-body #preloader { display: none; }

/* Legacy content-card → transparant (Rebalance-stijl) */
body.fem-body.logged-in .content-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

body.fem-body.logged-in .content-card:hover {
  box-shadow: none;
}

body.fem-body.logged-in .content-card .content-card {
  background: white;
  border-radius: var(--fem-radius);
  box-shadow: var(--fem-shadow);
  padding: 24px;
  border: none;
}

body.fem-body.logged-in .bodysection {
  padding: 0;
}

body.fem-body.logged-in .section-header {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 16px;
}

/* Legacy container binnen portal → geen extra padding/max-width
   (wordt al afgehandeld door .fem-content) */
body.fem-body.logged-in .bodysection > .container {
  max-width: none;
  padding: 0;
}

/* Legacy panel → transparant */
body.fem-body.logged-in .panel {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Legacy card-body → geen eigen achtergrond */
body.fem-body.logged-in .fem-content .card-body {
  background: transparent;
}

/* bg-white/bg-light binnen portal → subtiele Rebalance look */
body.fem-body.logged-in .fem-content .bg-white,
body.fem-body.logged-in .fem-content .bg-light {
  background: white !important;
  border-radius: var(--fem-radius);
  box-shadow: var(--fem-shadow);
}