/* ================================================================
   VERBOUWEN XL - DESIGN SYSTEM
   ================================================================
   
   Dit bestand bevat ALLE aanpasbare design tokens.
   Wijzig hier de variabelen om de hele applicatie aan te passen.
   
   INSTRUCTIES:
   1. Wijzig de variabelen in :root voor globale aanpassingen
   2. Gebruik component-specifieke secties voor fijnafstelling
   3. Import dit bestand VOOR styles.css in je HTML
   
   ================================================================ */

:root {
  
  /* ============================================================
     1. KLEURENPALET - PRIMAIRE KLEUREN
     ============================================================ */
  
  /* Brand Kleuren */
  --ds-brand-primary: #3B82F6;           /* Hoofdkleur (Orison Blue) */
  --ds-brand-primary-hover: #2563EB;     /* Hover state */
  --ds-brand-primary-dark: #1D4ED8;      /* Donkere variant */
  --ds-brand-primary-light: rgba(59, 130, 246, 0.08);
  --ds-brand-primary-lighter: rgba(59, 130, 246, 0.04);
  
  /* Brand Gradient */
  --ds-brand-gradient: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  --ds-brand-gradient-hover: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
  
  /* ============================================================
     2. SEMANTISCHE KLEUREN
     ============================================================ */
  
  /* Success (Groen) */
  --ds-success: #22C55E;
  --ds-success-hover: #16A34A;
  --ds-success-light: rgba(34, 197, 94, 0.1);
  --ds-success-gradient: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  
  /* Error/Danger (Rood) */
  --ds-error: #EF4444;
  --ds-error-hover: #DC2626;
  --ds-error-light: rgba(239, 68, 68, 0.1);
  --ds-error-gradient: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  
  /* Warning (Oranje) */
  --ds-warning: #F59E0B;
  --ds-warning-hover: #D97706;
  --ds-warning-light: rgba(245, 158, 11, 0.1);
  --ds-warning-gradient: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  
  /* Info (Blauw) */
  --ds-info: #0EA5E9;
  --ds-info-hover: #0284C7;
  --ds-info-light: rgba(14, 165, 233, 0.1);
  
  /* Purple */
  --ds-purple: #8B5CF6;
  --ds-purple-hover: #7C3AED;
  --ds-purple-light: rgba(139, 92, 246, 0.15);
  --ds-purple-gradient: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  
  /* ============================================================
     3. ACHTERGROND KLEUREN
     ============================================================ */
  
  /* Pagina Achtergrond */
  --ds-bg-main: linear-gradient(135deg, #F0F4FF 0%, #F8F9FB 50%, #FFF5F5 100%);
  --ds-bg-main-solid: #F8F9FB;
  
  /* Card Achtergronden */
  --ds-bg-card: rgba(255, 255, 255, 0.7);
  --ds-bg-card-solid: #FFFFFF;
  --ds-bg-card-hover: rgba(250, 251, 252, 0.85);
  --ds-bg-card-header: #FAFBFC;
  
  /* Surface & Elevated */
  --ds-bg-surface: rgba(250, 251, 252, 0.6);
  --ds-bg-elevated: rgba(255, 255, 255, 0.9);
  --ds-bg-hover: rgba(249, 250, 251, 0.8);
  --ds-bg-active: rgba(243, 244, 246, 0.9);
  
  /* Overlay */
  --ds-bg-overlay: rgba(17, 24, 39, 0.75);
  --ds-bg-overlay-light: rgba(0, 0, 0, 0.6);
  
  /* ============================================================
     4. TEKST KLEUREN
     ============================================================ */
  
  --ds-text-primary: #111827;        /* Hoofdtekst */
  --ds-text-secondary: #6B7280;      /* Secundaire tekst */
  --ds-text-tertiary: #9CA3AF;       /* Tertiaire tekst */
  --ds-text-muted: #D1D5DB;          /* Gedempte tekst */
  --ds-text-on-primary: #FFFFFF;     /* Tekst op gekleurde achtergrond */
  --ds-text-link: #3B82F6;           /* Links */
  --ds-text-link-hover: #2563EB;     /* Link hover */
  
  /* ============================================================
     5. BORDER KLEUREN
     ============================================================ */
  
  --ds-border: #E8EAED;              /* Standaard border */
  --ds-border-light: #F0F1F3;        /* Lichte border */
  --ds-border-dark: #D1D5DB;         /* Donkere border */
  --ds-border-focus: #3B82F6;        /* Focus state */
  
  /* ============================================================
     6. TYPOGRAFIE
     ============================================================ */
  
  /* Font Families */
  --ds-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  
  /* Font Sizes */
  --ds-font-size-xs: 12px;
  --ds-font-size-sm: 14px;
  --ds-font-size-base: 16px;
  --ds-font-size-lg: 18px;
  --ds-font-size-xl: 20px;
  --ds-font-size-2xl: 24px;
  --ds-font-size-3xl: 32px;
  --ds-font-size-4xl: 40px;
  --ds-font-size-5xl: 48px;
  
  /* Font Weights */
  --ds-font-weight-light: 300;
  --ds-font-weight-normal: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;
  --ds-font-weight-extrabold: 800;
  
  /* Line Heights */
  --ds-line-height-tight: 1.2;
  --ds-line-height-normal: 1.5;
  --ds-line-height-relaxed: 1.6;
  --ds-line-height-loose: 1.8;
  
  /* Letter Spacing */
  --ds-letter-spacing-tight: -0.03em;
  --ds-letter-spacing-normal: -0.011em;
  --ds-letter-spacing-wide: 0.05em;
  --ds-letter-spacing-wider: 0.08em;
  
  /* ============================================================
     7. SPACING (AFSTANDEN)
     ============================================================ */
  
  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 28px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;
  
  /* ============================================================
     8. BORDER RADIUS
     ============================================================ */
  
  --ds-radius-none: 0;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-2xl: 20px;
  --ds-radius-3xl: 24px;
  --ds-radius-full: 9999px;
  
  /* ============================================================
     9. SHADOWS (SCHADUWEN)
     ============================================================ */
  
  --ds-shadow-none: none;
  --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ds-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Gekleurde Schaduwen */
  --ds-shadow-primary: 0 4px 14px rgba(59, 130, 246, 0.25);
  --ds-shadow-primary-sm: 0 2px 8px rgba(59, 130, 246, 0.15);
  --ds-shadow-success: 0 4px 14px rgba(34, 197, 94, 0.25);
  --ds-shadow-error: 0 4px 14px rgba(239, 68, 68, 0.25);
  --ds-shadow-purple: 0 4px 14px rgba(139, 92, 246, 0.25);
  
  /* Inner Shadow */
  --ds-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* ============================================================
     10. TRANSITIONS (ANIMATIES)
     ============================================================ */
  
  --ds-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ============================================================
     11. Z-INDEX LAGEN
     ============================================================ */
  
  --ds-z-base: 1;
  --ds-z-dropdown: 100;
  --ds-z-sticky: 200;
  --ds-z-fixed: 300;
  --ds-z-modal-backdrop: 400;
  --ds-z-modal: 500;
  --ds-z-toast: 600;
  --ds-z-tooltip: 700;
  
  /* ============================================================
     12. BLUR EFFECTS
     ============================================================ */
  
  --ds-blur-sm: 4px;
  --ds-blur-md: 8px;
  --ds-blur-lg: 12px;
  --ds-blur-xl: 16px;
}

/* ================================================================
   COMPONENT TOKENS - SIDEBAR
   ================================================================ */

:root {
  /* Sidebar Afmetingen */
  --ds-sidebar-width: 280px;
  --ds-sidebar-width-collapsed: 72px;
  
  /* Sidebar Kleuren */
  --ds-sidebar-bg: var(--ds-bg-card);
  --ds-sidebar-border: var(--ds-border);
  --ds-sidebar-shadow: var(--ds-shadow-lg);
  
  /* Sidebar Logo */
  --ds-sidebar-logo-size: 48px;
  --ds-sidebar-logo-radius: var(--ds-radius-lg);
  --ds-sidebar-logo-bg: var(--ds-brand-primary);
  
  /* Sidebar Nav Items */
  --ds-sidebar-nav-padding: 12px 16px;
  --ds-sidebar-nav-radius: var(--ds-radius-lg);
  --ds-sidebar-nav-color: var(--ds-text-secondary);
  --ds-sidebar-nav-color-hover: var(--ds-text-primary);
  --ds-sidebar-nav-color-active: var(--ds-text-on-primary);
  --ds-sidebar-nav-bg-hover: linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0%, transparent 100%);
  --ds-sidebar-nav-bg-active: var(--ds-brand-gradient);
  --ds-sidebar-nav-shadow-active: 0 4px 12px rgba(59, 130, 246, 0.25);
  
  /* Sidebar Credits Box */
  --ds-sidebar-credits-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(59, 130, 246, 0.06) 100%);
  --ds-sidebar-credits-border: rgba(59, 130, 246, 0.15);
  --ds-sidebar-credits-accent: var(--ds-brand-gradient);
}

/* ================================================================
   COMPONENT TOKENS - CARDS
   ================================================================ */

:root {
  /* Basis Card */
  --ds-card-bg: var(--ds-bg-card-solid);
  --ds-card-border: var(--ds-border);
  --ds-card-radius: var(--ds-radius-lg);
  --ds-card-shadow: var(--ds-shadow-sm);
  --ds-card-shadow-hover: var(--ds-shadow-md);
  --ds-card-padding: var(--ds-space-6);
  
  /* Card Header */
  --ds-card-header-bg: var(--ds-bg-card-header);
  --ds-card-header-border: var(--ds-border-light);
  --ds-card-header-padding: 20px 24px;
  
  /* Card Title */
  --ds-card-title-size: 17px;
  --ds-card-title-weight: 700;
  --ds-card-title-color: var(--ds-text-primary);
  
  /* Card Subtitle */
  --ds-card-subtitle-size: 13px;
  --ds-card-subtitle-color: var(--ds-text-secondary);
  
  /* Card Body */
  --ds-card-body-padding: var(--ds-space-6);
  
  /* Card Static (Glassmorphism) */
  --ds-card-static-bg: rgba(255, 255, 255, 0.7);
  --ds-card-static-blur: 12px;
  --ds-card-static-border: rgba(255, 255, 255, 0.4);
  --ds-card-static-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  
  /* Card Hover Accent Line */
  --ds-card-accent-gradient: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
}

/* ================================================================
   COMPONENT TOKENS - ADMIN CARDS
   ================================================================ */

:root {
  /* Admin Card Wrapper */
  --ds-admin-card-bg: var(--ds-bg-card-solid);
  --ds-admin-card-border: var(--ds-border);
  --ds-admin-card-radius: var(--ds-radius-lg);
  --ds-admin-card-shadow: var(--ds-shadow-xs);
  
  /* Admin Card Header */
  --ds-admin-header-bg: var(--ds-bg-card-header);
  --ds-admin-header-border: var(--ds-border-light);
  --ds-admin-header-padding: 20px 24px;
  
  /* Admin Header Icon */
  --ds-admin-icon-size: 44px;
  --ds-admin-icon-radius: 11px;
  --ds-admin-icon-shadow: 0 4px 14px rgba(59, 130, 246, 0.28);
}

/* ================================================================
   COMPONENT TOKENS - STATS CARDS
   ================================================================ */

:root {
  /* Stats Icon */
  --ds-stats-icon-size: 56px;
  --ds-stats-icon-radius: var(--ds-radius-lg);
  --ds-stats-icon-font-size: 1.5rem;
  
  /* Stats Value */
  --ds-stats-value-size: 2rem;
  --ds-stats-value-weight: 700;
  --ds-stats-value-color: var(--ds-text-primary);
  
  /* Stats Label */
  --ds-stats-label-size: var(--ds-font-size-xs);
  --ds-stats-label-color: var(--ds-text-secondary);
  --ds-stats-label-transform: uppercase;
  --ds-stats-label-spacing: 0.08em;
}

/* ================================================================
   COMPONENT TOKENS - BUTTONS
   ================================================================ */

:root {
  /* Button Base */
  --ds-btn-padding: 11px 22px;
  --ds-btn-padding-sm: 8px 16px;
  --ds-btn-padding-lg: 14px 24px;
  --ds-btn-height: 44px;
  --ds-btn-height-sm: 36px;
  --ds-btn-height-lg: 48px;
  --ds-btn-radius: var(--ds-radius-md);
  --ds-btn-font-size: var(--ds-font-size-sm);
  --ds-btn-font-weight: 600;
  
  /* Button Primary */
  --ds-btn-primary-bg: var(--ds-brand-gradient);
  --ds-btn-primary-bg-hover: var(--ds-brand-gradient-hover);
  --ds-btn-primary-color: var(--ds-text-on-primary);
  --ds-btn-primary-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(59, 130, 246, 0.25);
  --ds-btn-primary-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(59, 130, 246, 0.35);
  
  /* Button Secondary */
  --ds-btn-secondary-bg: var(--ds-bg-card-solid);
  --ds-btn-secondary-color: var(--ds-text-primary);
  --ds-btn-secondary-border: var(--ds-border);
  --ds-btn-secondary-shadow: var(--ds-shadow-xs);
  
  /* Button Success */
  --ds-btn-success-bg: var(--ds-success);
  --ds-btn-success-bg-hover: var(--ds-success-hover);
  --ds-btn-success-color: var(--ds-text-on-primary);
  
  /* Button Danger */
  --ds-btn-danger-bg: var(--ds-error);
  --ds-btn-danger-bg-hover: var(--ds-error-hover);
  --ds-btn-danger-color: var(--ds-text-on-primary);
  
  /* Button Warning */
  --ds-btn-warning-bg: var(--ds-warning);
  --ds-btn-warning-bg-hover: var(--ds-warning-hover);
  --ds-btn-warning-color: var(--ds-text-on-primary);
}

/* ================================================================
   COMPONENT TOKENS - MODALS
   ================================================================ */

:root {
  /* Modal Backdrop */
  --ds-modal-backdrop-bg: var(--ds-bg-overlay);
  --ds-modal-backdrop-blur: var(--ds-blur-xl);
  
  /* Modal Content */
  --ds-modal-bg: var(--ds-bg-card);
  --ds-modal-radius: var(--ds-radius-xl);
  --ds-modal-shadow: var(--ds-shadow-xl);
  --ds-modal-border: rgba(229, 231, 235, 0.8);
  --ds-modal-width: 600px;
  --ds-modal-width-wide: 900px;
  --ds-modal-width-sm: 400px;
  --ds-modal-width-lg: 800px;
  --ds-modal-width-xl: 1000px;
  --ds-modal-max-height: 85vh;
  
  /* Modal Header */
  --ds-modal-header-bg: var(--ds-bg-card);
  --ds-modal-header-border: var(--ds-border);
  --ds-modal-header-padding: var(--ds-space-6);
  --ds-modal-title-size: var(--ds-font-size-2xl);
  --ds-modal-title-weight: 700;
  
  /* Modal Body */
  --ds-modal-body-padding: var(--ds-space-6);
  
  /* Modal Footer */
  --ds-modal-footer-padding: var(--ds-space-4) var(--ds-space-6);
  --ds-modal-footer-border: var(--ds-border);
  
  /* Modal Close Button */
  --ds-modal-close-size: 36px;
  --ds-modal-close-bg: var(--ds-bg-hover);
  --ds-modal-close-color: var(--ds-text-secondary);
  --ds-modal-close-hover-bg: var(--ds-error);
  --ds-modal-close-hover-color: var(--ds-text-on-primary);
}

/* ================================================================
   COMPONENT TOKENS - FORMS
   ================================================================ */

:root {
  /* Form Control */
  --ds-input-height: 44px;
  --ds-input-padding: 11px 14px;
  --ds-input-font-size: var(--ds-font-size-sm);
  --ds-input-radius: var(--ds-radius-md);
  --ds-input-bg: var(--ds-bg-card-solid);
  --ds-input-border: var(--ds-border);
  --ds-input-border-hover: var(--ds-border-dark);
  --ds-input-border-focus: var(--ds-brand-primary);
  --ds-input-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.1);
  
  /* Form Label */
  --ds-label-size: var(--ds-font-size-sm);
  --ds-label-weight: 500;
  --ds-label-color: var(--ds-text-primary);
  --ds-label-margin: var(--ds-space-2);
  
  /* Textarea */
  --ds-textarea-min-height: 120px;
  
  /* Select */
  --ds-select-arrow-color: var(--ds-text-secondary);
}

/* ================================================================
   COMPONENT TOKENS - TABLES
   ================================================================ */

:root {
  /* Table Container */
  --ds-table-bg: var(--ds-bg-card);
  --ds-table-radius: var(--ds-radius-lg);
  --ds-table-shadow: var(--ds-shadow-sm);
  
  /* Table Header */
  --ds-table-header-bg: var(--ds-bg-card-header);
  --ds-table-header-color: var(--ds-text-secondary);
  --ds-table-header-size: 11px;
  --ds-table-header-weight: 600;
  --ds-table-header-transform: uppercase;
  --ds-table-header-spacing: 0.8px;
  --ds-table-header-padding: 14px 20px;
  --ds-table-header-border: var(--ds-border);
  
  /* Table Row */
  --ds-table-row-bg: var(--ds-bg-card-solid);
  --ds-table-row-bg-hover: rgba(59, 130, 246, 0.02);
  --ds-table-row-border: var(--ds-border-light);
  --ds-table-row-hover-accent: var(--ds-brand-primary);
  
  /* Table Cell */
  --ds-table-cell-padding: 16px 20px;
  --ds-table-cell-size: 14px;
  --ds-table-cell-color: var(--ds-text-primary);
}

/* ================================================================
   COMPONENT TOKENS - BADGES
   ================================================================ */

:root {
  /* Badge Base */
  --ds-badge-padding: 6px 14px;
  --ds-badge-radius: var(--ds-radius-full);
  --ds-badge-font-size: var(--ds-font-size-xs);
  --ds-badge-font-weight: 700;
  --ds-badge-transform: uppercase;
  --ds-badge-spacing: 0.05em;
  
  /* Badge Variants */
  --ds-badge-success-bg: var(--ds-success-light);
  --ds-badge-success-color: var(--ds-success);
  --ds-badge-success-border: var(--ds-success);
  
  --ds-badge-danger-bg: var(--ds-error-light);
  --ds-badge-danger-color: var(--ds-error);
  --ds-badge-danger-border: var(--ds-error);
  
  --ds-badge-warning-bg: var(--ds-warning-light);
  --ds-badge-warning-color: var(--ds-warning);
  --ds-badge-warning-border: var(--ds-warning);
  
  --ds-badge-purple-bg: var(--ds-purple-light);
  --ds-badge-purple-color: var(--ds-purple);
  --ds-badge-purple-border: var(--ds-purple);
  
  --ds-badge-info-bg: var(--ds-brand-primary);
  --ds-badge-info-color: var(--ds-text-on-primary);
}

/* ================================================================
   COMPONENT TOKENS - TOASTS
   ================================================================ */

:root {
  /* Toast Base */
  --ds-toast-min-width: 320px;
  --ds-toast-max-width: 500px;
  --ds-toast-padding: 16px 20px;
  --ds-toast-radius: var(--ds-radius-lg);
  --ds-toast-shadow: var(--ds-shadow-xl);
  --ds-toast-bg: var(--ds-bg-card-solid);
  --ds-toast-border: var(--ds-border);
  
  /* Toast Variants Border */
  --ds-toast-success-border: var(--ds-success);
  --ds-toast-error-border: var(--ds-error);
  --ds-toast-warning-border: var(--ds-warning);
  --ds-toast-info-border: var(--ds-info);
}

/* ================================================================
   COMPONENT TOKENS - CHARTS
   ================================================================ */

:root {
  /* ====== BAR CHART COLORS ====== */
  
  /* Gekochte Credits - Lichtgroen */
  --ds-chart-credits-purchased: #86EFAC;
  --ds-chart-credits-purchased-hover: #4ADE80;
  --ds-chart-credits-purchased-light: rgba(134, 239, 172, 0.2);
  
  /* Verkochte Leads - Donkergroen */
  --ds-chart-leads-sold: #22C55E;
  --ds-chart-leads-sold-hover: #16A34A;
  --ds-chart-leads-sold-light: rgba(34, 197, 94, 0.2);
  
  /* Gekochte Leads - Rood/Koraal */
  --ds-chart-leads-purchased: #F87171;
  --ds-chart-leads-purchased-hover: #EF4444;
  --ds-chart-leads-purchased-light: rgba(248, 113, 113, 0.2);
  
  /* ====== LINE CHART COLORS ====== */
  
  /* Totaal Saldo - Blauw */
  --ds-chart-balance-line: #3B82F6;
  --ds-chart-balance-line-width: 3px;
  --ds-chart-balance-point-radius: 5px;
  --ds-chart-balance-point-hover-radius: 7px;
  --ds-chart-balance-fill: rgba(59, 130, 246, 0.1);
  
  /* ====== GENERAL CHART COLORS ====== */
  --ds-chart-primary: var(--ds-brand-primary);
  --ds-chart-secondary: var(--ds-purple);
  --ds-chart-success: var(--ds-success);
  --ds-chart-warning: var(--ds-warning);
  --ds-chart-error: var(--ds-error);
  
  /* Extra Palette - Voor meer datasets */
  --ds-chart-color-1: #3B82F6;  /* Blauw */
  --ds-chart-color-2: #22C55E;  /* Groen */
  --ds-chart-color-3: #F87171;  /* Rood */
  --ds-chart-color-4: #8B5CF6;  /* Paars */
  --ds-chart-color-5: #F59E0B;  /* Oranje */
  --ds-chart-color-6: #06B6D4;  /* Cyan */
  --ds-chart-color-7: #EC4899;  /* Roze */
  --ds-chart-color-8: #14B8A6;  /* Teal */
  
  /* ====== CHART GRID & AXES ====== */
  --ds-chart-grid-color: rgba(0, 0, 0, 0.05);
  --ds-chart-grid-color-dark: rgba(0, 0, 0, 0.1);
  --ds-chart-axis-color: var(--ds-text-tertiary);
  --ds-chart-axis-font-size: 11px;
  --ds-chart-axis-font-weight: 500;
  --ds-chart-tick-color: var(--ds-text-secondary);
  
  /* ====== CHART APPEARANCE ====== */
  
  /* Bar Styling */
  --ds-chart-bar-radius: 6px;
  --ds-chart-bar-border-width: 0;
  --ds-chart-bar-hover-brightness: 1.1;
  --ds-chart-bar-spacing: 0.3;
  --ds-chart-bar-category-spacing: 0.4;
  
  /* Line Styling */
  --ds-chart-line-width: 2px;
  --ds-chart-line-tension: 0.4;
  --ds-chart-point-radius: 4px;
  --ds-chart-point-hover-radius: 6px;
  --ds-chart-point-border-width: 2px;
  --ds-chart-point-bg: white;
  
  /* Area Fill */
  --ds-chart-area-opacity: 0.15;
  
  /* ====== CHART LEGEND ====== */
  --ds-chart-legend-font-size: 12px;
  --ds-chart-legend-font-weight: 500;
  --ds-chart-legend-color: var(--ds-text-secondary);
  --ds-chart-legend-box-size: 12px;
  --ds-chart-legend-box-radius: 4px;
  --ds-chart-legend-spacing: 16px;
  --ds-chart-legend-position: top;
  
  /* ====== CHART TOOLTIP ====== */
  --ds-chart-tooltip-bg: rgba(17, 24, 39, 0.95);
  --ds-chart-tooltip-color: white;
  --ds-chart-tooltip-font-size: 13px;
  --ds-chart-tooltip-font-weight: 500;
  --ds-chart-tooltip-radius: 8px;
  --ds-chart-tooltip-padding: 10px 14px;
  --ds-chart-tooltip-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  --ds-chart-tooltip-arrow-size: 6px;
  
  /* ====== CHART CONTAINER ====== */
  --ds-chart-container-bg: var(--ds-bg-card);
  --ds-chart-container-radius: var(--ds-radius-lg);
  --ds-chart-container-shadow: var(--ds-shadow-sm);
  --ds-chart-container-padding: var(--ds-space-6);
  --ds-chart-container-border: 1px solid var(--ds-border);
  
  /* Chart Header */
  --ds-chart-header-margin: 0 0 var(--ds-space-4) 0;
  --ds-chart-title-size: var(--ds-font-size-lg);
  --ds-chart-title-weight: 600;
  --ds-chart-title-color: var(--ds-text-primary);
  --ds-chart-subtitle-size: var(--ds-font-size-sm);
  --ds-chart-subtitle-color: var(--ds-text-secondary);
  
  /* ====== CHART ANIMATIONS ====== */
  --ds-chart-animation-duration: 750ms;
  --ds-chart-animation-easing: easeOutQuart;
  --ds-chart-hover-animation: 200ms;
  
  /* ====== DONUT/PIE CHART ====== */
  --ds-chart-donut-size: 240px;
  --ds-chart-donut-thickness: 60px;
  --ds-chart-donut-spacing: 2px;
  --ds-chart-pie-border-width: 2px;
  --ds-chart-pie-border-color: white;
  
  /* Donut Center Label */
  --ds-chart-donut-center-size: var(--ds-font-size-3xl);
  --ds-chart-donut-center-weight: 700;
  --ds-chart-donut-center-color: var(--ds-text-primary);
  --ds-chart-donut-label-size: var(--ds-font-size-sm);
  --ds-chart-donut-label-color: var(--ds-text-secondary);
}

/* ================================================================
   COMPONENT TOKENS - FILTERS & SEARCH
   ================================================================ */

:root {
  /* Filter Tabs */
  --ds-filter-bg: var(--ds-bg-card-solid);
  --ds-filter-radius: var(--ds-radius-md);
  --ds-filter-shadow: var(--ds-shadow-sm);
  --ds-filter-padding: var(--ds-space-1);
  
  /* Filter Tab Item */
  --ds-filter-tab-padding: 8px 16px;
  --ds-filter-tab-radius: var(--ds-radius-sm);
  --ds-filter-tab-color: var(--ds-text-secondary);
  --ds-filter-tab-color-hover: var(--ds-text-primary);
  --ds-filter-tab-bg-hover: #F3F4F6;
  --ds-filter-tab-bg-active: var(--ds-brand-gradient);
  --ds-filter-tab-color-active: var(--ds-text-on-primary);
  --ds-filter-tab-shadow-active: 0 4px 12px rgba(59, 130, 246, 0.2);
  
  /* Search Box */
  --ds-search-height: var(--ds-input-height);
  --ds-search-radius: var(--ds-radius-md);
  --ds-search-bg: var(--ds-bg-card-solid);
  --ds-search-border: var(--ds-border);
  --ds-search-icon-color: var(--ds-text-secondary);
}

/* ================================================================
   COMPONENT TOKENS - PAGE LAYOUT
   ================================================================ */

:root {
  /* Main Content */
  --ds-content-margin-left: var(--ds-sidebar-width);
  --ds-content-padding: var(--ds-space-8);
  --ds-content-padding-mobile: var(--ds-space-4);
  
  /* Page Header */
  --ds-page-title-size: var(--ds-font-size-3xl);
  --ds-page-title-weight: 800;
  --ds-page-title-color: var(--ds-text-primary);
  --ds-page-title-spacing: var(--ds-letter-spacing-tight);
  
  --ds-page-subtitle-size: var(--ds-font-size-base);
  --ds-page-subtitle-color: var(--ds-text-secondary);
}

/* ================================================================
   COMPONENT TOKENS - CALENDAR/PLANNING
   ================================================================ */

:root {
  /* Calendar Header */
  --ds-calendar-header-bg: var(--ds-bg-card-solid);
  --ds-calendar-header-radius: var(--ds-radius-lg);
  --ds-calendar-header-shadow: var(--ds-shadow-sm);
  --ds-calendar-header-padding: var(--ds-space-4);
  
  /* Calendar Grid */
  --ds-calendar-cell-border: var(--ds-border-light);
  --ds-calendar-cell-bg-hover: var(--ds-bg-hover);
  --ds-calendar-today-bg: var(--ds-brand-primary-light);
  --ds-calendar-today-border: var(--ds-brand-primary);
  
  /* Appointment Card */
  --ds-appointment-radius: var(--ds-radius-md);
  --ds-appointment-padding: 8px 12px;
}

/* ================================================================
   COMPONENT TOKENS - SKELETON LOADERS
   ================================================================ */

:root {
  --ds-skeleton-bg: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
  --ds-skeleton-radius: var(--ds-radius-md);
  --ds-skeleton-animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* ================================================================
   COMPONENT TOKENS - FILE UPLOAD
   ================================================================ */

:root {
  --ds-upload-border: 2px dashed #D1D5DB;
  --ds-upload-border-hover: 2px dashed var(--ds-brand-primary);
  --ds-upload-bg: #F9FAFB;
  --ds-upload-bg-hover: rgba(59, 130, 246, 0.05);
  --ds-upload-radius: var(--ds-radius-md);
  --ds-upload-padding: 12px var(--ds-space-4);
}

/* ================================================================
   COMPONENT TOKENS - PHOTO GALLERY
   ================================================================ */

:root {
  --ds-gallery-gap: var(--ds-space-4);
  --ds-gallery-item-radius: var(--ds-radius-md);
  --ds-gallery-item-bg: #F3F4F6;
  --ds-gallery-delete-bg: var(--ds-error);
  --ds-gallery-delete-size: 28px;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS (Reference)
   ================================================================
   
   Mobile:  max-width: 768px
   Tablet:  max-width: 1024px  
   Desktop: min-width: 1025px
   Large:   min-width: 1440px
   
   ================================================================ */