/*
 * ReconversionAI - Theme System
 * Supports multiple color themes via data-theme attribute
 */

/* ==========================================================================
   Navy Theme (Default)
   ========================================================================== */
[data-theme="navy"] {
    --color-primary: #0C3AA2;
    --color-primary-dark: #071777;
    --color-primary-light: #2DA9DC;
    --color-accent: #2DA9DC;
}

/* ==========================================================================
   Ocean Theme
   ========================================================================== */
[data-theme="ocean"] {
    --color-primary: #0077B6;
    --color-primary-dark: #005A8D;
    --color-primary-light: #00B4D8;
    --color-accent: #00B4D8;
}

/* ==========================================================================
   Forest Theme
   ========================================================================== */
[data-theme="forest"] {
    --color-primary: #2D6A4F;
    --color-primary-dark: #1B4332;
    --color-primary-light: #40916C;
    --color-accent: #40916C;
}

/* ==========================================================================
   Sunset Theme
   ========================================================================== */
[data-theme="sunset"] {
    --color-primary: #9B2335;
    --color-primary-dark: #7B1B2A;
    --color-primary-light: #E07A5F;
    --color-accent: #E07A5F;
}

/* ==========================================================================
   Purple Theme
   ========================================================================== */
[data-theme="purple"] {
    --color-primary: #5A189A;
    --color-primary-dark: #3C096C;
    --color-primary-light: #9D4EDD;
    --color-accent: #9D4EDD;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */
[data-theme="dark"] {
    --color-primary: #3B82F6;
    --color-primary-dark: #1D4ED8;
    --color-primary-light: #60A5FA;
    --color-accent: #60A5FA;

    --color-white: #1e293b;
    --color-light: #0f172a;
    --color-gray-100: #1e293b;
    --color-gray-200: #334155;
    --color-gray-300: #475569;
    --color-gray-400: #64748b;
    --color-gray-500: #94a3b8;
    --color-gray-600: #cbd5e1;
    --color-gray-700: #e2e8f0;
    --color-gray-800: #f1f5f9;
    --color-gray-900: #f8fafc;
}

[data-theme="dark"] body {
    background-color: var(--color-light);
    color: var(--color-gray-800);
}

[data-theme="dark"] .card {
    background-color: var(--color-white);
    border-color: var(--color-gray-200);
}

[data-theme="dark"] .card-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--color-gray-900);
}

[data-theme="dark"] .navbar {
    background-color: var(--color-white);
}

[data-theme="dark"] .list-group-item {
    background-color: var(--color-white);
    border-color: var(--color-gray-200);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--color-white);
    border-color: var(--color-gray-300);
    color: var(--color-gray-800);
}

/* ==========================================================================
   Font Size Preferences
   ========================================================================== */
[data-font-size="small"] {
    font-size: 14px;
}

[data-font-size="normal"] {
    font-size: 16px;
}

[data-font-size="large"] {
    font-size: 18px;
}

[data-font-size="xlarge"] {
    font-size: 20px;
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */
@media (prefers-contrast: high) {
    :root {
        --color-gray-500: #374151;
        --color-gray-600: #1f2937;
    }

    .btn {
        border-width: 3px;
    }

    .card {
        border-width: 2px;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hover-lift:hover {
        transform: none;
    }
}