/* =============================================
   ?? ULTIMATE CSS SYSTEM – MAXIMAAL UITGESCHREVEN
   ============================================= */

:root {
  /* =====================
     TYPOGRAFIE & BASIS
  ===================== */
  --font-base: 'Inter', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;
  --line-height-tight: 1.2;
  --line-height-normal: 1.65;
  --letter-spacing-tight: -0.015em;
  --letter-spacing-wide: 0.05em;

  /* =====================
     SPACING SYSTEM
  ===================== */
  --space-xxs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* =====================
     RADIUS & CURVES
  ===================== */
  --radius-xs: 0.125rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;

  /* =====================
     COLOR SYSTEM
  ===================== */
  --color-bg: #0b0b0b;
  --color-bg-soft: #151515;
  --color-surface: #000000;
  --color-card: #1c1c1c;
  --color-text: #f0f0f0;
  --color-text-muted: #bbbbbb;
  --color-border: #333333;
  --color-placeholder: #888888;

  --color-accent: #e6c77b;
  --color-accent-hover: #f3d58a;
  --color-accent-strong: #d4af37;
  --color-focus: #f3d58a;
  --color-shadow-focus: rgba(243, 213, 138, 0.5);

  --color-gladgoud: #ffd700;
  --color-matgoud: #c9b472;
  --color-glow: rgba(230, 199, 123, 0.5);

  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  --color-glass: rgba(255, 255, 255, 0.06);

  /* =====================
     SHADOW SYSTEM
  ===================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 12px 30px var(--color-glow);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.06);

  /* =====================
     TRANSITION / MOTION
  ===================== */
  --timing-fast: 150ms ease-out;
  --timing-normal: 300ms ease;
  --timing-slow: 600ms ease-in-out;

  /* =====================
     LAYERS / Z-INDEX
  ===================== */
  --z-header: 10;
  --z-dropdown: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-tooltip: 300;
  --z-max: 999;
}

/* =============================================
   ?? STRUCTUUR & BODY RESET
============================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-height-normal);
  scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}
p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
a {
  color: var(--color-accent);
  text-decoration: underline;
  transition: color var(--timing-fast);
}
a:hover {
  color: var(--color-accent-hover);
}

/* =============================================
   ? INTERACTIE & ACCESSIBILITY
============================================= */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--color-shadow-focus);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =============================================
   ?? COMPONENT STYLES (KNOPPEN, ALERTS, ETC.)
============================================= */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  font-size: var(--font-size-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--timing-fast), color var(--timing-fast), box-shadow var(--timing-fast);
  text-decoration: none;
  line-height: 1.25;
  border: none;
}
.btn-primary {
  background-color: var(--color-accent);
  color: #000;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  background-color: var(--color-accent-hover);
}
.btn-outline {
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  background-color: transparent;
}
.btn-outline:hover {
  background-color: var(--color-accent);
  color: #000;
}

.card {
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--timing-normal);
}
.card:hover {
  box-shadow: var(--shadow-glow);
}

.alert {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  margin-bottom: var(--space-md);
}
.alert-success {
  background-color: #e6f6e8;
  color: #065f46;
  border: 1px solid var(--color-success);
}
.alert-error {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid var(--color-danger);
}

/* =============================================
   ??? ANIMATIES & EFFECTEN
============================================= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { box-shadow: 0 0 20px var(--color-glow); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}
.animate-fade-in {
  animation: fadeIn var(--timing-normal) ease-out both;
}
.animate-glow-pulse {
  animation: glowPulse 2s infinite ease-in-out;
}

/* =============================================
   ?? THEME SWITCHES
============================================= */
[data-theme="dark"] {
  --color-bg: #0b0b0b;
  --color-text: #f0f0f0;
  --color-border: #2a2a2a;
  --color-card: #191919;
  --color-placeholder: #666;
}
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-border: #cccccc;
  --color-card: #fefefe;
  --color-placeholder: #999999;
}

/* =============================================
   ?? CUSTOM UTILITIES / MISC
============================================= */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.drop-shadow-glow { filter: drop-shadow(0 0 20px var(--color-glow)); }
.backdrop-blur-md { backdrop-filter: blur(10px); }

/* END OF SYSTEM */