/* ── Design tokens ─────────────────────────────────────────────
   Custom properties only — no rules, so this is safe to load on
   every page alongside the parent theme's stylesheet.

   Theme is set via JS: document.documentElement.setAttribute('data-theme', 'teal')
   Options: blue | teal | violet | forest (default) | dark
──────────────────────────────────────────────────────────────── */

:root {
  --color-primary:       #1a5590;
  --color-primary-light: #e8f2fb;
  --color-primary-mid:   #2a7abf;
  --color-text:          #1a202c;
  --color-text-muted:    #5a6a7a;
  --color-border:        #dce4ed;
  --color-bg:            #f4f7fa;
  --color-card:          #ffffff;
  --color-active:        #1a5590;

  --tag-blue-bg:   #dbeafe;
  --tag-blue-text: #1e40af;
  --tag-teal-bg:   #ccfbf1;
  --tag-teal-text: #0f5e52;
  --tag-gray-bg:   #f1f5f9;
  --tag-gray-text: #475569;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

[data-theme="blue"] {
  --color-primary:       #1a5590;
  --color-primary-light: #e8f2fb;
  --color-primary-mid:   #2a7abf;
  --color-active:        #1a5590;
}

[data-theme="teal"] {
  --color-primary:       #0f766e;
  --color-primary-light: #ccfbf1;
  --color-primary-mid:   #0d9488;
  --color-active:        #0f766e;
}

[data-theme="violet"] {
  --color-primary:       #6d28d9;
  --color-primary-light: #ede9fe;
  --color-primary-mid:   #7c3aed;
  --color-active:        #6d28d9;
}

/* Thema 4 – ISA Groen (forest) */
[data-theme="forest"] {
  /*--color-primary:       #1a6b3a;*/
  --color-primary:       #093C29;
  --color-primary-light: #e6f4ec;
  --color-primary-mid:   #237a46;
  --color-active:        #1a6b3a;
  --tag-teal-text:       #0a5c30;
  --tag-teal-bg:         #d1fae5;
}

[data-theme="dark"] {
  --color-primary:       #3b82f6;
  --color-primary-light: #1e3a5f;
  --color-primary-mid:   #60a5fa;
  --color-active:        #3b82f6;
  --color-text:          #e2e8f0;
  --color-text-muted:    #94a3b8;
  --color-border:        #334155;
  --color-bg:            #0f172a;
  --color-card:          #1e293b;
  --tag-blue-bg:         #1e3a5f;
  --tag-blue-text:       #93c5fd;
  --tag-teal-bg:         #134e4a;
  --tag-teal-text:       #5eead4;
  --tag-gray-bg:         #293548;
  --tag-gray-text:       #94a3b8;
}