/* =============================================================
   OSE P2P — Design Tokens
   ============================================================= */

:root {

  /* --- Kleur: Basis --- */
  --color-bg-page:        #F4F6F5;
  --color-bg-surface:     #FFFFFF;
  --color-bg-subtle:      #F0F2F1;
  --color-bg-overlay:     rgba(0, 0, 0, 0.4);

  /* --- Kleur: Accent (teal) --- */
  --color-accent:         #1D9E75;
  --color-accent-hover:   #0F6E56;
  --color-accent-light:   #E1F5EE;
  --color-accent-text:    #085041;

  /* --- Kleur: Tekst --- */
  --color-text-primary:   #1A1C1B;
  --color-text-secondary: #5F6661;
  --color-text-tertiary:  #9AA09C;
  --color-text-inverse:   #FFFFFF;
  --color-text-accent:    #0F6E56;

  /* --- Kleur: Rand --- */
  --color-border:         rgba(0, 0, 0, 0.10);
  --color-border-strong:  rgba(0, 0, 0, 0.18);

  /* --- Status: Actief / Succes --- */
  --color-status-active-bg:   #E1F5EE;
  --color-status-active-text: #0F6E56;

  /* --- Status: Waarschuwing --- */
  --color-status-warn-bg:     #FAEEDA;
  --color-status-warn-text:   #854F0B;

  /* --- Status: Fout --- */
  --color-status-error-bg:    #FCEBEB;
  --color-status-error-text:  #A32D2D;

  /* --- Status: Inactief --- */
  --color-status-inactive-bg:   #F0F2F1;
  --color-status-inactive-text: #5F6661;

  /* --- Status: Info --- */
  --color-status-info-bg:   #E6F1FB;
  --color-status-info-text: #185FA5;

  /* --- Typografie --- */
  --font-sans:   system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   "JetBrains Mono", "Fira Code", monospace;

  --text-xs:     11px;
  --text-sm:     12px;
  --text-base:   13px;
  --text-md:     14px;
  --text-lg:     16px;
  --text-xl:     20px;
  --text-2xl:    24px;

  --font-normal: 400;
  --font-medium: 500;

  --line-height-tight:  1.3;
  --line-height-normal: 1.6;

  /* --- Spacing --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* --- Border radius --- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* --- Layout --- */
  --sidebar-width:      220px;
  --topbar-height:      52px;
  --content-max-width:  1200px;

  /* --- Schaduwen --- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.06);

  /* --- Transitie --- */
  --transition-fast: 100ms ease;
  --transition-base: 160ms ease;

  /* --- Z-index --- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;

  /* --- Backward-compat aliases (oude templates) --- */
  --accent:       #1D9E75;
  --accent-hover: #0F6E56;
  --accent-faint: #E1F5EE;
  --border:       rgba(0,0,0,0.10);
  --fg:           #1A1C1B;
  --fg-soft:      #5F6661;
  --fg-faint:     #9AA09C;
  --surface:      #FFFFFF;
  --surface-alt:  #F0F2F1;
  --bg:           #F4F6F5;
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --radius:       6px;
  --radius-pill:  9999px;
  --highlight:    #1D9E75;
  --highlight-text: #FFFFFF;
}