/* --- css/base.css --- */
:root {
    --bg-dark: #121212;
    --bg-card: #1e1e1e;
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --accent: #D32F2F;        
    --accent-glow: rgba(211, 47, 47, 0.3);
    --border: #333333;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    overscroll-behavior: none; 
    overflow: hidden; 
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Zichtbare focus voor toetsenbordgebruikers */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Respecteer 'verminderde beweging' als de bezoeker dat heeft ingesteld */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* Tekstversie voor zoekmachines/AI-bots (zie AI-FALLBACK in index.html).
   Bots lezen de kale HTML; bezoekers zien dit nooit: hier verborgen,
   en js/main.js haalt het blok bij het opstarten helemaal weg. */
.ai-fallback { display: none; }