/**
 * LuxaLife Design System
 * Centrale ontwerpvariabelen. Definitieve merkkleuren/lettertypen volgen later.
 * Header/footer-kleuren blijven afzonderlijk overschrijfbaar via de Customizer.
 */
:root {
  color-scheme: light;
  --luxa-bg: #ffffff;
  --luxa-surface: #ffffff;
  --luxa-surface-alt: #fbf8f2;
  --luxa-text: #24231f;
  --luxa-muted: #6d685e;
  --luxa-accent: #c6a25a;
  --luxa-accent-hover: #d5b570;
  --luxa-accent-contrast: #211f1b;
  --luxa-border: #e9e2d7;
  --luxa-focus: #aa7c32;

  --luxa-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --luxa-font-heading: var(--luxa-font-body);
  --luxa-radius-sm: 5px;
  --luxa-radius-md: 10px;
  --luxa-space-1: .5rem;
  --luxa-space-2: 1rem;
  --luxa-space-3: 1.5rem;
  --luxa-space-4: 2rem;
  --luxa-space-5: 3rem;
}

/* Paletten voor terugkerende header- en footeronderdelen. */
:root {
  --luxa-dark-surface: #22211f;
  --luxa-dark-surface-alt: #292724;
  --luxa-dark-text: #f8f4e9;
  --luxa-dark-muted: #c5bfb3;
  --luxa-dark-accent: #d6b66f;
  --luxa-dark-border: #48443c;
}
.site-header, .site-footer {
  color-scheme: light;
  --luxa-section-bg: var(--luxa-surface);
  --luxa-section-text: var(--luxa-text);
  --luxa-section-muted: var(--luxa-muted);
  --luxa-section-accent: var(--luxa-accent);
  --luxa-section-border: var(--luxa-border);
}
.site-footer { --luxa-section-bg: var(--luxa-surface-alt); }
.site-header.luxalife-mode-dark,
.site-footer.luxalife-mode-dark {
  color-scheme: dark;
  --luxa-section-bg: var(--luxa-dark-surface);
  --luxa-section-text: var(--luxa-dark-text);
  --luxa-section-muted: var(--luxa-dark-muted);
  --luxa-section-accent: var(--luxa-dark-accent);
  --luxa-section-border: var(--luxa-dark-border);
}
.site-footer.luxalife-mode-dark {
  --luxa-section-bg: var(--luxa-dark-surface-alt);
}

/* Expliciete balkprofielen overschrijven onafhankelijk het hoofdheaderprofiel. */
.site-header .site-topbar.luxalife-mode-light,
.site-header .site-secondary-nav.luxalife-mode-light {
  color-scheme: light;
  --luxa-section-bg: var(--luxa-surface);
  --luxa-section-text: var(--luxa-text);
  --luxa-section-muted: var(--luxa-muted);
  --luxa-section-accent: var(--luxa-accent);
  --luxa-section-border: var(--luxa-border);
}
.site-header .site-topbar.luxalife-mode-dark,
.site-header .site-secondary-nav.luxalife-mode-dark {
  color-scheme: dark;
  --luxa-section-bg: var(--luxa-dark-surface);
  --luxa-section-text: var(--luxa-dark-text);
  --luxa-section-muted: var(--luxa-dark-muted);
  --luxa-section-accent: var(--luxa-dark-accent);
  --luxa-section-border: var(--luxa-dark-border);
}

body {
  background: var(--luxa-bg);
  color: var(--luxa-text);
  font-family: var(--luxa-font-body);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--luxa-font-heading); }
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--luxa-focus);
  outline-offset: 3px;
}

/* Eenvoudige herbruikbare basiscomponenten. */
.luxalife-button,
.site-main .woocommerce a.button,
.site-main .woocommerce button.button,
.site-main .woocommerce input.button,
.site-main button[type="submit"],
.site-main input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--luxa-space-1);
  min-height: 44px;
  padding: .7rem 1.25rem;
  border: 1px solid var(--luxa-accent);
  border-radius: var(--luxa-radius-sm);
  background: var(--luxa-accent);
  color: var(--luxa-accent-contrast);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}
.luxalife-button:hover,
.site-main .woocommerce a.button:hover,
.site-main .woocommerce button.button:hover,
.site-main .woocommerce input.button:hover,
.site-main button[type="submit"]:hover,
.site-main input[type="submit"]:hover {
  background: var(--luxa-accent-hover);
  border-color: var(--luxa-accent-hover);
  color: var(--luxa-accent-contrast);
}
.site-main :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], select, textarea) {
  max-width: 100%;
  min-height: 42px;
  border: 1px solid var(--luxa-border);
  border-radius: var(--luxa-radius-sm);
  background: var(--luxa-surface);
  color: var(--luxa-text);
  font: inherit;
  padding: .6rem .75rem;
}
.site-main textarea { min-height: 110px; }