/* ==========================================================================
   GEGENERERD DOOR ANSIBLE - NIET HANDMATIG AANPASSEN
   Klant: demo_server
   ========================================================================== */

html:root {
    /* ==========================================
       1. BRAND COLOR SCALES (Tenant-Overridable)
       ========================================== */
    --color-primary-50: #f0f4f8;
    --color-primary-100: #d9e2ec;
    --color-primary-200: #bcccdc;
    --color-primary-300: #9fb3c8;
    --color-primary-400: #829ab1;
    --color-primary-500: #627d98;
    --color-primary-600: #486581;
    --color-primary-700: #334e68;
    --color-primary-800: #243b53;
    --color-primary-900: #102a43;

    --color-primary: var(--color-primary-600);
    --color-primary-hover: var(--color-primary-700);
    --color-primary-subtle: var(--color-primary-50);

    --color-accent-50: #f5fbe8;
    --color-accent-100: #e7f6c6;
    --color-accent-200: #d4ee93;
    --color-accent-300: #bce25b;
    --color-accent-400: #a2d22d;
    --color-accent-500: #88bd17;
    --color-accent-600: #6c9a0f;
    --color-accent-700: #52760f;
    --color-accent-800: #3b5411;
    --color-accent-900: #26380c;

    --color-accent: var(--color-accent-500);
    --color-accent-hover: var(--color-accent-600);
    --color-accent-subtle: var(--color-accent-50);

    /* ==========================================
       2. NEUTRALS & SURFACES
       ========================================== */
    --bg-app: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f1f5f9;
    --bg-muted: #e2e8f0;

    --bg-primary-subtle: color-mix(in srgb, var(--color-primary-100) 60%, transparent);
    --bg-accent-subtle: color-mix(in srgb, var(--color-accent-100) 60%, transparent);

    --bg-surface-translucent: rgba(255, 255, 255, 0.04);
    --bg-surface-glass: rgba(255, 255, 255, 0.7);
    --bg-overlay: rgba(15, 23, 42, 0.4);

    /* ==========================================
       3. TYPOGRAPHY & TEXT
       ========================================== */
   --text-primary: #0f172a;
   --text-secondary: #475569;
   --text-muted: #94a3b8;
   --text-on-primary: #ffffff;
   --text-on-accent: #ffffff;

    --font-brand: 'Gudea', sans-serif;
    --font-ui: system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ==========================================
       9. PRIMEVUE VARIABLES
       ========================================== */
    --p-primary-color: var(--color-primary);
    --p-button-text-primary-color: var(--color-primary);
    --p-button-primary-color: var(--text-on-primary);
    --p-button-primary-background: var(--color-primary);
    --p-button-primary-border-color: var(--color-primary);
    --p-button-primary-hover-background: var(--color-primary-800);
    --p-button-primary-hover-border-color: var(--color-primary-800);
}