/* ══════════════════════════════════════════════
   tokens.css — Design Tokens voor app.ryles.nl
   Gegenereerd bij modularisatie (Task 1)
   ══════════════════════════════════════════════ */

:root {

  /* ── KLEUREN ── */

  /* Primary (upgrade: #1565C0 → #0055CC, WCAG AAA) */
  --pri: #0055CC;

  /* Tekst */
  --text:  #0F172A;   /* was: #0d1b3e  — donker navy */
  --text2: #1a1a2e;   /* body tekst (origineel, ongewijzigd) */
  --text3: #64748B;   /* was: #64748b  — secundaire tekst */
  --text4: #94A3B8;   /* was: #94a3b8  — muted/placeholder */

  /* Randen & achtergronden */
  --border:    #e2e8f0;
  --bg:        #f4f6fb;
  --bg-white:  #ffffff;

  /* Status kleuren */
  --danger:  #ef4444;
  --success: #2e7d32;
  --warning: #e65100;

  /* Warm palet (nieuw) */
  --sec:         #8C7466;
  --warm-bg:     #F9F6F3;
  --warm-border: #E8DFD6;

  /* ── SPACING (8px grid) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* ── BORDER RADIUS ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* ── SHADOWS ── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);

  /* ── TYPOGRAFIE ── */
  --font-base: 'Inter', Arial, sans-serif;

  /* ── LAYOUT ── */
  --sidebar-width:    224px;
  --header-height:    58px;
  --touch-target-min: 44px;
}