:root {
  --gray-50:  #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;   
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;   
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #312E81;
  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --green-900: #14532D;
  --yellow-50:  #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #EAB308;
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-900: #713F12;
  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;
  --sky-50:  #F0F9FF;
  --sky-100: #E0F2FE;
  --sky-200: #BAE6FD;
  --sky-300: #7DD3FC;
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;
  --sky-700: #0369A1;
  --sky-800: #075985;
  --sky-900: #0C4A6E;
  --purple-50:  #FAF5FF;
  --purple-100: #F3E8FF;
  --purple-200: #E9D5FF;
  --purple-300: #D8B4FE;
  --purple-400: #C084FC;
  --purple-500: #A855F7;
  --purple-600: #9333EA;
  --purple-700: #7E22CE;
  --purple-800: #6B21A8;
  --purple-900: #581C87;
  --color-background:    var(--slate-50);     
  --color-surface:       #FCFCFD;             
  --color-hover:         var(--slate-100);    
  --color-active:        var(--slate-200);    
  --color-muted:         var(--slate-100);    
  --color-primary:       var(--blue-600);     
  --color-primary-hover: var(--blue-700);     
  --color-primary-light: rgba(37, 99, 235, 0.1); 
  --color-primary-bg:    rgba(37, 99, 235, 0.1); 
  --color-accent:        var(--blue-600);     
  --color-accent-hover:  var(--blue-700);     
  --color-accent-light:  rgba(37, 99, 235, 0.10); 
  --color-cta:           var(--indigo-600);
  --color-cta-hover:     var(--indigo-700);
  --color-cta-light:     rgba(79, 70, 229, 0.10);
  --color-cta-active:    var(--indigo-800);
  --color-text-primary:   var(--gray-900);    
  --color-text-secondary: var(--gray-500);    
  --color-text-disabled:  var(--gray-400);    
  --color-text-inverse:   #FFFFFF;            
  --color-border:        var(--slate-200);    
  --color-border-strong:  var(--slate-300);   
  --color-success:       var(--green-600);
  --color-success-light: rgba(22, 163, 74, 0.1);
  --color-success-bg:    rgba(22, 163, 74, 0.1);
  --color-success-text:  var(--green-700);    
  --color-warning:       var(--yellow-600);
  --color-warning-dark:  var(--yellow-700);
  --color-warning-light: rgba(202, 138, 4, 0.1);
  --color-warning-bg:    rgba(202, 138, 4, 0.1);
  --color-warning-text:  var(--yellow-700);   
  --color-error:         var(--red-600);
  --color-error-light:   rgba(220, 38, 38, 0.1);
  --color-error-bg:      rgba(220, 38, 38, 0.1);
  --color-error-text:    var(--red-700);      
  --color-info:          var(--sky-500);
  --color-info-light:    rgba(14, 165, 233, 0.1);
  --color-info-bg:       rgba(14, 165, 233, 0.1);
  --color-info-text:     var(--sky-700);      
  --color-purple:        var(--purple-600);
  --color-purple-light:  rgba(147, 51, 234, 0.1);
  --color-purple-bg:     rgba(147, 51, 234, 0.1);
  --color-primary-purple: var(--purple-500);
  --color-secondary:     var(--sky-500);
  --surface-primary:      var(--color-surface);
  --surface-secondary:    var(--color-muted);
  --surface-hover:        var(--color-hover);
  --color-surface-hover:  var(--color-hover);
  --color-surface-muted:  var(--color-muted);
  --color-bg-primary:     var(--color-background);
  --color-bg-secondary:   var(--color-muted);
  --text-secondary:       var(--color-text-secondary);
  --text-primary:         var(--color-text-primary);
  --text-tertiary:        var(--color-text-disabled);
  --text-muted:           var(--color-text-secondary);
  --color-text:           var(--color-text-primary);
  --color-text-tertiary:  var(--color-text-disabled);
  --border-color:         var(--color-border);
  --border-hover:         var(--color-border-strong);
  --border-primary:       var(--color-border);
  --border-radius:        var(--radius-md);
  --border-radius-lg:     var(--radius-lg);
  --primary:              var(--color-primary);
  --primary-bg:           var(--color-primary-bg);
  --success:              var(--color-success);
  --success-bg:           var(--color-success-bg);
  --warning:              var(--color-warning);
  --warning-bg:           var(--color-warning-bg);
  --danger:               var(--color-error);
  --danger-bg:            var(--color-error-bg);
  --color-danger:         var(--color-error);
  --info:                 var(--color-info);
  --info-bg:              var(--color-info-bg);
  --color-info-dark:      var(--sky-700);
  --color-info-alpha:     rgba(14, 165, 233, 0.08);
  --color-gray-50:        var(--gray-50);
  --font-primary:         var(--font-family);
  --font-weight-bold:     700;
  --text-xs:              var(--font-size-xs);
  --text-sm:              var(--font-size-sm);
  --text-base:            var(--font-size-base);
  --text-lg:              var(--font-size-lg);
  --text-2xl:             var(--font-size-2xl);
  --spacing-xs: 0.25rem;  
  --spacing-sm: 0.5rem;   
  --spacing-md: 1rem;     
  --spacing-lg: 1.5rem;   
  --spacing-2:  0.5rem;   
  --spacing-3:  0.75rem;  
  --spacing-4:  1rem;     
  --btn-primary-bg:      var(--gray-900);
  --btn-primary-hover:   var(--gray-800);
  --btn-primary-text:    var(--color-text-inverse);
  --btn-primary-border:  var(--gray-900);
  --btn-cta-bg:          var(--color-cta);
  --btn-cta-hover:       var(--color-cta-hover);
  --btn-cta-text:        var(--color-text-inverse);
  --btn-cta-border:      var(--color-cta);
  --btn-accent-bg:       var(--color-accent);
  --btn-accent-hover:    var(--color-accent-hover);
  --btn-accent-text:     var(--color-text-inverse);
  --btn-accent-border:   var(--color-accent);
  --btn-secondary-bg:    var(--color-muted);
  --btn-secondary-hover: var(--color-border);
  --btn-secondary-text:  var(--color-text-primary);
  --btn-secondary-border: transparent;
  --btn-ghost-bg:        transparent;
  --btn-ghost-hover:     var(--color-hover);
  --btn-ghost-text:      var(--color-text-primary);
  --btn-ghost-border:    var(--color-border);
  --btn-outline-bg:      transparent;
  --btn-outline-hover:   var(--color-muted);
  --btn-outline-text:    var(--color-text-primary);
  --btn-outline-border:  var(--color-border);
  --btn-danger-bg:       var(--color-error);
  --btn-danger-hover:    var(--red-700);
  --btn-danger-text:     var(--color-text-inverse);
  --btn-danger-border:   var(--color-error);
  --card-bg:             var(--color-surface);
  --card-border:         var(--color-border);
  --card-shadow:         var(--shadow-sm);
  --card-hover-shadow:   var(--shadow-md);
  --input-bg:            var(--color-surface);
  --input-border:        var(--color-border);
  --input-focus-border:  var(--color-primary);
  --input-focus-ring:    var(--color-primary-light);
  --input-placeholder:   var(--color-text-secondary);
  --input-disabled-bg:   var(--color-muted);
  --badge-default-bg:    var(--color-muted);
  --badge-default-text:  var(--color-text-primary);
  --badge-primary-bg:    var(--color-primary-light);
  --badge-primary-text:  var(--color-primary);
  --badge-success-bg:    var(--color-success-bg);
  --badge-success-text:  var(--color-success-text);
  --badge-warning-bg:    var(--color-warning-bg);
  --badge-warning-text:  var(--color-warning-text);
  --badge-error-bg:      var(--color-error-bg);
  --badge-error-text:    var(--color-error-text);
  --badge-info-bg:       var(--color-info-bg);
  --badge-info-text:     var(--color-info-text);
  --badge-purple-bg:     var(--color-purple-bg);
  --badge-purple-text:   var(--color-purple);
  --sidebar-bg:          var(--color-surface);
  --sidebar-border:      var(--color-border);
  --sidebar-item-hover:  var(--color-hover);
  --sidebar-active-bg:   var(--color-primary-light);
  --sidebar-active-text: var(--color-primary);
  --font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --font-size-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);     
  --font-size-sm:   clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem);    
  --font-size-base: clamp(0.8125rem, 0.77rem + 0.18vw, 0.875rem);   
  --font-size-md:   clamp(0.875rem, 0.82rem + 0.25vw, 1rem);        
  --font-size-lg:   clamp(1.0625rem, 0.97rem + 0.4vw, 1.25rem);     
  --font-size-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);         
  --font-size-2xl:  clamp(1.5rem, 1.3rem + 0.85vw, 1.875rem);       
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --line-height-tight:  1.3;
  --line-height-snug:   1.35;
  --line-height-normal: 1.5;
  --space-1:  0.25rem;   
  --space-2:  0.5rem;    
  --space-3:  0.75rem;   
  --space-4:  1rem;      
  --space-5:  1.25rem;   
  --space-6:  1.5rem;    
  --space-8:  2rem;      
  --space-10: 2.5rem;    
  --space-12: 3rem;      
  --space-16: 4rem;      
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --space-fluid-sm: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);   
  --space-fluid-md: clamp(0.75rem, 0.55rem + 0.85vw, 1.5rem);  
  --space-fluid-lg: clamp(1rem, 0.7rem + 1.3vw, 2rem);         
  --space-fluid-xl: clamp(1.5rem, 1rem + 2vw, 3rem);           
  --sidebar-width:     240px;
  --header-height:     77px;
  --content-max-width: 1200px;
  --z-base:           0;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-fixed:          300;
  --z-modal-backdrop: 400;
  --z-modal:          500;
  --z-tooltip:        600;
}
@media (prefers-color-scheme: dark) {
  :root.dark {
    --color-background:    #0A0A0A;
    --color-surface:       var(--slate-900);
    --color-hover:         var(--slate-800);
    --color-active:        #303030;
    --color-muted:         #1F1F1F;
    --color-text-primary:   var(--slate-50);
    --color-text-secondary: var(--slate-400);
    --color-text-disabled:  var(--slate-600);
    --color-text-inverse:   var(--slate-900);
    --color-border:        var(--slate-800);
    --color-border-strong:  var(--slate-700);
    --color-primary-light:  rgba(37, 99, 235, 0.15);
    --color-primary-bg:     rgba(37, 99, 235, 0.15);
    --color-accent-light:   rgba(37, 99, 235, 0.15);
    --color-cta-light:      rgba(79, 70, 229, 0.15);
    --color-success-bg:     rgba(22, 163, 74, 0.15);
    --color-success-light:  rgba(22, 163, 74, 0.15);
    --color-success-text:   var(--green-400);
    --color-warning-bg:     rgba(202, 138, 4, 0.15);
    --color-warning-light:  rgba(202, 138, 4, 0.15);
    --color-warning-text:   var(--yellow-400);
    --color-error-bg:       rgba(220, 38, 38, 0.15);
    --color-error-light:    rgba(220, 38, 38, 0.15);
    --color-error-text:     var(--red-400);
    --color-info-bg:        rgba(14, 165, 233, 0.15);
    --color-info-light:     rgba(14, 165, 233, 0.15);
    --color-info-text:      var(--sky-400);
  }
}