/* ============================================
   DePraktijkDigitaal.nl — Design Tokens v2.0
   Premium Healthcare Design System
   ============================================ */

:root {
    /* Primaire kleuren — Diepblauw, vertrouwd & zakelijk */
    --dpd-blue-50:  #EEF4FB;
    --dpd-blue-100: #D0E2F4;
    --dpd-blue-200: #9DC4E8;
    --dpd-blue-300: #6AA6DC;
    --dpd-blue-400: #3D8ECF;
    --dpd-blue-500: #1A73B5;
    --dpd-blue-600: #155F96;
    --dpd-blue-700: #104A76;
    --dpd-blue-800: #0B3658;
    --dpd-blue-900: #07243B;

    /* Groen — succes, veiligheid, groei */
    --dpd-green-50:  #EDFAF4;
    --dpd-green-100: #C7F0DE;
    --dpd-green-200: #7EDDB8;
    --dpd-green-300: #3ECB96;
    --dpd-green-400: #17B87E;
    --dpd-green-500: #0FA573;
    --dpd-green-600: #0C8A5F;
    --dpd-green-700: #096B4A;
    --dpd-green-800: #064D35;

    /* Amber — CTA, aandacht */
    --dpd-amber-50:  #FFF8ED;
    --dpd-amber-100: #FEECC7;
    --dpd-amber-200: #FCD88F;
    --dpd-amber-400: #F5A623;
    --dpd-amber-500: #E0941A;
    --dpd-amber-600: #C07D12;
    --dpd-amber-700: #8C5B0B;

    /* Rood — fouten, alerts, urgentie */
    --dpd-red-50:  #FEF2F2;
    --dpd-red-100: #FEE2E2;
    --dpd-red-400: #EF4444;
    --dpd-red-500: #DC2626;
    --dpd-red-600: #B91C1C;

    /* Neutraal — verfijnd grijs met koele ondertoon */
    --dpd-gray-50:  #F8FAFC;
    --dpd-gray-100: #F1F5F9;
    --dpd-gray-200: #E2E8F0;
    --dpd-gray-300: #CBD5E1;
    --dpd-gray-400: #94A3B8;
    --dpd-gray-500: #64748B;
    --dpd-gray-600: #475569;
    --dpd-gray-700: #334155;
    --dpd-gray-800: #1E293B;
    --dpd-gray-900: #0F172A;

    /* Semantische aliassen */
    --dpd-primary:       var(--dpd-blue-500);
    --dpd-primary-hover: var(--dpd-blue-600);
    --dpd-primary-light: var(--dpd-blue-50);
    --dpd-primary-dark:  var(--dpd-blue-800);
    --dpd-success:       var(--dpd-green-500);
    --dpd-success-light: var(--dpd-green-50);
    --dpd-warning:       var(--dpd-amber-400);
    --dpd-warning-light: var(--dpd-amber-50);
    --dpd-danger:        var(--dpd-red-500);
    --dpd-danger-light:  var(--dpd-red-50);

    --dpd-bg:      #FFFFFF;
    --dpd-bg-page: var(--dpd-gray-50);
    --dpd-bg-card: #FFFFFF;

    --dpd-text:           var(--dpd-gray-900);
    --dpd-text-secondary: var(--dpd-gray-500);
    --dpd-text-muted:     var(--dpd-gray-400);

    --dpd-border:       var(--dpd-gray-200);
    --dpd-border-light: var(--dpd-gray-100);

    /* Typografie — Sora (display) + DM Sans (body) */
    --dpd-font: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --dpd-font-display: 'Sora', system-ui, -apple-system, sans-serif;
    --dpd-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing — 4px grid */
    --dpd-space-xs:  4px;
    --dpd-space-sm:  8px;
    --dpd-space-md:  16px;
    --dpd-space-lg:  24px;
    --dpd-space-xl:  32px;
    --dpd-space-2xl: 48px;
    --dpd-space-3xl: 64px;
    --dpd-space-4xl: 96px;

    /* Border radius */
    --dpd-radius-sm:   8px;
    --dpd-radius-md:   12px;
    --dpd-radius-lg:   16px;
    --dpd-radius-xl:   20px;
    --dpd-radius-2xl:  24px;
    --dpd-radius-full: 9999px;

    /* Schaduwen — gelaagd systeem */
    --dpd-shadow-xs:  0 1px 2px rgba(15,23,42,.04);
    --dpd-shadow-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --dpd-shadow-md:  0 4px 16px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.03);
    --dpd-shadow-lg:  0 12px 40px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.04);
    --dpd-shadow-xl:  0 24px 56px rgba(15,23,42,.10), 0 8px 16px rgba(15,23,42,.04);
    --dpd-shadow-2xl: 0 32px 72px rgba(15,23,42,.12), 0 12px 24px rgba(15,23,42,.06);

    /* Gekleurde schaduwen */
    --dpd-shadow-blue:  0 8px 28px rgba(26,115,181,.18);
    --dpd-shadow-green: 0 8px 28px rgba(15,165,115,.16);

    /* Animatie easings */
    --dpd-ease-spring: cubic-bezier(.22, 1, .36, 1);
    --dpd-ease-smooth: cubic-bezier(.4, 0, .2, 1);
    --dpd-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --dpd-ease-out:    cubic-bezier(.16, 1, .3, 1);

    /* Transition durations */
    --dpd-dur-fast:   150ms;
    --dpd-dur-normal: 250ms;
    --dpd-dur-slow:   400ms;
    --dpd-dur-slower: 600ms;
}