/* ============================================
   TECH IN DE LES - COLOR & TYPOGRAPHY SYSTEM
   Single source of truth for all colors and fonts
   ============================================ */

:root {
    /* === PRIMARY BRAND COLORS === */
    --primary: #030D26;            /* Blauw - Professioneel, betrouwbaar, helder */
    --secondary: #D08856;          /* Oranje - Energie, actie (link naar Bert) */
    --accent: #E8B86D;             /* Goud - Warmte, premium */

    /* === TEXT COLORS === */
    --text-default: #2C3E50;       /* Donker blauwgrijs - Leesbaar */
    --text-light: #FFFFFF;         /* Wit - Voor donkere achtergronden */
    --text-secondary: #5D6D7E;     /* Grijs - Secondary tekst */

    /* === BACKGROUND COLORS === */
    --bg-default: #F8FAF9;         /* Zeer licht - Fris, rustig */
    --bg-card: #FFFFFF;            /* Wit - Clean cards */
    --bg-section: #ECF1F4;        /* Licht blauw voor secties */
    --bg-white: #FFFFFF;           /* Zuiver wit voor secties */
    --bg-werkvormen: #ECF1F4;      /* Licht grijsblauw voor werkvormen sectie */

    /* === DARK THEME COLORS === */
    --bg-dark-start: #1a1a2e;     /* Gradient start - diep paars/blauw */
    --bg-dark-mid: #16213e;       /* Gradient midden */
    --bg-dark-end: #0f0f23;       /* Gradient einde - bijna zwart */
    --text-on-dark: #FFFFFF;      /* Tekst op donkere achtergrond */
    --text-on-dark-muted: rgba(255, 255, 255, 0.7);  /* Gedempte tekst */
    --border-on-dark: rgba(255, 255, 255, 0.15);     /* Subtiele border */

    /* === BORDER COLORS === */
    --border-orange: var(--secondary);  /* Oranje border (#D08856) */
    --border-orange-hover: rgba(208, 136, 86, 0.6); /* Hover state */
    --border-color: #E0E7E5;      /* Standaard lichte border */

    /* === LEGACY COLORS (for compatibility) === */
    --brand-orange: #D08856;
    --brand-dark: #000F08;
    --secondary-red: #AA210F;

    /* === TYPOGRAPHY === */
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* === CONTAINER WIDTHS === */
    --width-full: 100%;           /* Edge-to-edge secties */
    --width-wide: 1200px;         /* Hoofd container - grids, navigatie, footer */
    --width-content: 900px;       /* Tekst-content - artikelen, hero */
    --width-narrow: 700px;        /* Focused content - subtitels, callouts */

    /* === SPACING === */
    --container-max: var(--width-wide);  /* Legacy support */
    --container-padding: 20px;
    --section-padding: 60px;

    /* === BORDER RADIUS === */
    --radius-sm: 8px;      /* Kleine elementen: buttons, badges */
    --radius-md: 12px;     /* Medium: cards, images */
    --radius-lg: 20px;     /* Grote: sections, containers */
    --radius-full: 50%;    /* Volledig rond: avatars, icons */
}