/* ============================================
   CSS Variables - Master Design Tokens
   ============================================
   Single source of truth for all colors, spacing,
   shadows, and transitions across the project.
   ============================================ */

:root {
    /* === Brand Colors === */
    --primary: #FF6B35;
    --primary-hover: #FF5722;
    --primary-light: #fff0f0;
    --secondary: #00BFA6;
    --accent: #FFD23F;

    /* === Feedback Colors === */
    --success: #10B981;
    --success-dark: #059669;
    --success-bg: #dcfce7;
    --success-bg-hover: #d1fae5;
    --error: #EF4444;
    --error-dark: #dc2626;
    --error-bg: #fef2f2;
    --error-bg-hover: #fee2e2;
    --error-border: #fecaca;
    --warning: #F59E0B;
    --warning-dark: #d97706;
    --warning-bg: #fef3c7;
    --warning-bg-hover: #fde68a;

    /* === Admin / Info Accent === */
    --info: #667eea;
    --info-dark: #764ba2;
    --gradient-admin: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* === Activity Type Colors === */
    --type-event: #10b981;
    --type-activity: #3b82f6;
    --type-private: #8b5cf6;

    /* === Text Colors === */
    --text-heading: #1f2937;
    --text-dark: #1a1a1a;
    --text-medium: #374151;
    --text-base: #666;
    --text-muted: #6b7280;
    --text-faint: #9ca3af;
    --text-faintest: #d1d5db;

    /* === Surface / Background Colors === */
    --surface-white: rgb(246, 246, 246);
    --surface-light: #f8f9fa;
    --surface-muted: #f9fafb;
    --surface-hover: #f3f4f6;

    /* === Border Colors === */
    --border-base: #e0e0e0;
    --border-light: #e5e7eb;
    --border-input: #d1d5db;

    /* === Legacy landing page tokens === */
    --dark: #1A1A2E;
    --dark-soft: #2D2D44;
    --light: #F8F9FA;
    --white: rgb(246, 246, 246);

    /* === Aliases for dashboard.css backward compatibility === */
    --primary-color: var(--primary);
    --logo-text: var(--text-dark);
    --text-light: var(--text-base);
    --border-color: var(--border-base);
    --bg-light: var(--surface-light);
    --bg-white: var(--surface-white);

    /* === Gradients === */
    --gradient-warm: linear-gradient(135deg, #ff6b35d8 0%, #ff6b35d8 100%);
    --gradient-cool: linear-gradient(135deg, #1de2c8 0%, #1de2c8 100%);
    --gradient-accent: linear-gradient(135deg, #FFD23F 0%, #FFE66D 100%);

    /* === Shadows === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);

    /* === Transitions === */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* === Spacing === */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* === Border Radius === */
    --radius-sm: 10px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --radius-full: 50px;
}