/**
 * MindForge Color System
 * Extracted from front-page.php and standardized
 * Provides consistent color palette across the application
 */

:root {
    /* Primary Colors - Neumorphic Theme */
    --color-primary: #1f2937;
    --color-primary-hover: #1f2937;
    --color-primary-light: #374151;
    --color-primary-dark: #111827;

    /* Accent Colors - Orange Theme */
    --color-accent-orange: #f97316;
    --color-accent-orange-hover: #fb923c;
    --color-accent-orange-light: #fb923c;
    --color-accent-orange-dark: #c2410c;

    /* Accent Colors - Grey Theme */
    --color-accent-grey: #e5e7eb;
    --color-accent-grey-hover: #f3f4f6;
    --color-accent-grey-light: #f3f4f6;
    --color-accent-grey-dark: #d1d5db;

    /* Background Colors */
    --color-bg-primary: #1f2937;
    --color-bg-secondary: #374151;
    --color-bg-tertiary: #4b5563;
    
    /* Text Colors */
    --color-text-primary: #e5e7eb;
    --color-text-secondary: #9ca3af;
    --color-text-tertiary: #6b7280;
    --color-text-inverse: #1f2937;

    /* Surface Colors */
    --color-surface-primary: rgba(255, 255, 255, 0.05);
    --color-surface-secondary: rgba(255, 255, 255, 0.1);
    --color-surface-tertiary: rgba(255, 255, 255, 0.15);

    /* Border Colors */
    --color-border-primary: rgba(255, 255, 255, 0.1);
    --color-border-secondary: rgba(255, 255, 255, 0.2);
    --color-border-tertiary: rgba(255, 255, 255, 0.3);
    --color-border-focus: #3b82f6;

    /* State Colors */
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-success-border: rgba(16, 185, 129, 0.3);

    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-warning-border: rgba(245, 158, 11, 0.3);

    --color-info: #3b82f6;
    --color-info-light: #60a5fa;
    --color-info-bg: rgba(59, 130, 246, 0.1);
    --color-info-border: rgba(59, 130, 246, 0.3);

    /* Legacy aliases for color-blind friendly design */
    --color-error: var(--color-warning);
    --color-error-light: var(--color-warning-light);
    --color-error-bg: var(--color-warning-bg);
    --color-error-border: var(--color-warning-border);

    /* Shadow Colors */
    --color-shadow-light: rgba(255, 255, 255, 0.1);
    --color-shadow-dark: rgba(0, 0, 0, 0.3);
    --color-shadow-darker: rgba(0, 0, 0, 0.4);
    --color-shadow-inset-light: rgba(255, 255, 255, 0.1);
    --color-shadow-inset-dark: rgba(0, 0, 0, 0.4);

    /* Overlay Colors */
    --color-overlay-backdrop: rgba(0, 0, 0, 0.7);
    --color-overlay-light: rgba(255, 255, 255, 0.05);
    --color-overlay-medium: rgba(255, 255, 255, 0.1);

    /* Google OAuth Colors */
    --color-google-bg: #ffffff;
    --color-google-text: #374151;
    --color-google-border: #d1d5db;
    --color-google-hover: #f9fafb;

    /* Progress Bar Colors */
    --color-progress-bg: rgba(229, 231, 235, 0.2);
    --color-progress-fill: #e5e7eb;
}

/* Dark Theme Classes */
.dark-theme {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* Color Utility Classes */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }

.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-surface { background-color: var(--color-surface-primary); }

.border-primary { border-color: var(--color-border-primary); }
.border-secondary { border-color: var(--color-border-secondary); }

/* State Color Classes */
.text-success { color: var(--color-success-light); }
.text-error { color: var(--color-error-light); }
.text-warning { color: var(--color-warning-light); }
.text-info { color: var(--color-info-light); }

.bg-success { background-color: var(--color-success-bg); border-color: var(--color-success-border); }
.bg-error { background-color: var(--color-error-bg); border-color: var(--color-error-border); }
.bg-warning { background-color: var(--color-warning-bg); border-color: var(--color-warning-border); }
.bg-info { background-color: var(--color-info-bg); border-color: var(--color-info-border); }

/* Accent Color Classes */
.text-accent-grey { color: var(--color-accent-grey); }
.text-accent-grey-light { color: var(--color-accent-grey-light); }
.text-accent-grey-dark { color: var(--color-accent-grey-dark); }
.text-accent-orange { color: var(--color-accent-orange); }
.text-accent-orange-light { color: var(--color-accent-orange-light); }
.text-accent-orange-dark { color: var(--color-accent-orange-dark); }

/* Application-wide Color Overrides */
html, body {
    background: var(--color-bg-primary) !important;
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
}

#mindforge-container,
.mindforge-frontpage,
.mindforge-main {
    background: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
}

/* Component Color Integrations */
.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-secondary);
}

.btn-ghost:hover {
    background: var(--color-surface-secondary);
    border-color: var(--color-border-tertiary);
}