:root {
    /* Primary brand colors */
    --brand-primary: #f59e0b;
    --brand-secondary: #8b5cf6;
    --brand-gradient: linear-gradient(135deg, #f59e0b 0%, #8b5cf6 100%);
    /* Text colors for colorful theme */
    --text-primary: #1f2937;
  --text-secondary: white;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;
    --text-brand: #f59e0b;
    --text-link: #8b5cf6;
    --text-heading: #7c3aed;
    /* Neutral colors */
    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50: #f9fafb;
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #fef3c7;
    --bg-tertiary: #f3e8ff;
    /* Border colors */
    --border-light: rgba(245, 158, 11, 0.1);
    --border-medium: rgba(139, 92, 246, 0.2);
    /* Shadow colors */
    --shadow-light: 0 2px 4px rgba(245, 158, 11, 0.1);
    --shadow-medium: 0 4px 6px rgba(245, 158, 11, 0.1);
    --shadow-heavy: 0 20px 25px -5px rgba(245, 158, 11, 0.1), 0 10px 10px -5px rgba(245, 158, 11, 0.04);
    /* Status colors */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
  }