/* ============================================
   DASHBOARD COLORS — Single source of truth

   Wijzig deze variabelen om ALLE dashboard kleuren
   in één keer aan te passen.

   Gebruik in HTML/JS: var(--c-primary), var(--c-bg), etc.
   ============================================ */

:root {
    /* === Brand === */
    --c-primary: #2563eb;
    --c-primary-hover: #1d4ed8;
    --c-secondary: #7986cb;

    /* === Backgrounds === */
    --c-bg: #0f0f1a;
    --c-bg-card: #1a1a2e;
    --c-bg-input: #141420;
    --c-bg-hover: rgba(255,255,255,0.04);

    /* === Borders === */
    --c-border: #252540;
    --c-border-light: #303052;

    /* === Text === */
    --c-text: #e2e2f5;
    --c-text-bright: #ffffff;
    --c-text-muted: #6c6c8a;
    --c-text-dim: #3a3a5a;

    /* === Status === */
    --c-success: #10b981;
    --c-warning: #fbbf24;
    --c-error: #ef4444;
    --c-info: #5d5fef;

    /* === Buttons === */
    --c-btn-primary-bg: #2563eb;
    --c-btn-primary-text: #ffffff;
    --c-btn-primary-hover: #1d4ed8;
    --c-btn-ghost-border: #303052;
    --c-btn-ghost-text: #6c6c8a;
}

/* === Light Mode === */
[data-theme="light"] {
    /* === Brand === */
    --c-primary: #1a1a2e;
    --c-primary-hover: #0f0f1a;
    --c-secondary: #5d5fef;

    /* === Backgrounds === */
    --c-bg: #f5f5f7;
    --c-bg-card: #ffffff;
    --c-bg-input: #ffffff;
    --c-bg-hover: #f0f0f5;

    /* === Borders === */
    --c-border: #e8e8ee;
    --c-border-light: #d0d0da;

    /* === Text === */
    --c-text: #2a2a4a;
    --c-text-bright: #1a1a2e;
    --c-text-muted: #8a8a9a;
    --c-text-dim: #b0b0ba;

    /* === Status === */
    --c-success: #059669;
    --c-warning: #d97706;
    --c-error: #dc2626;
    --c-info: #5d5fef;

    /* === Buttons === */
    --c-btn-primary-bg: #2563eb;
    --c-btn-primary-text: #ffffff;
    --c-btn-primary-hover: #1d4ed8;
    --c-btn-ghost-border: #d0d0da;
    --c-btn-ghost-text: #6c6c8a;
}