/**
 * Theme Token System for Multi-Tenant Branding
 *
 * These CSS variables are dynamically updated based on the current organization's theme.
 * When FEATURE_MULTITENANT is disabled, defaults to MTS branding.
 */

:root {
    /* Primary Brand Colors */
    --theme-primary: #FF7F50;           /* Default: MTS burnt orange */
    --theme-primary-light: #FFB499;
    --theme-primary-dark: #CC6540;
    --theme-primary-rgb: 255, 127, 80;

    /* Accent Colors */
    --theme-accent: #4A90E2;
    --theme-accent-light: #7BB4F5;
    --theme-accent-dark: #3A7AC8;

    /* Surface & Background */
    --theme-surface: #FFFFFF;
    --theme-background: #F5F5F5;
    --theme-background-alt: #FAFAFA;

    /* Text Colors */
    --theme-text-primary: #333333;
    --theme-text-secondary: #666666;
    --theme-text-tertiary: #999999;
    --theme-text-inverse: #FFFFFF;

    /* State Colors (shared across themes) */
    --theme-success: #16A34A;
    --theme-success-light: #4ADE80;
    --theme-warning: #D97706;
    --theme-warning-light: #FBBF24;
    --theme-danger: #DC2626;
    --theme-danger-light: #F87171;
    --theme-info: #3B82F6;
    --theme-info-light: #60A5FA;

    /* UI Element Colors */
    --theme-border: #E0E0E0;
    --theme-border-light: #F0F0F0;
    --theme-divider: #E5E7EB;

    /* Shadows */
    --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Legacy MTS Colors (for gradual migration) */
    --mts-orange: var(--theme-primary);
    --mts-blue: var(--theme-accent);
    --mts-gray-100: #F5F5F5;
    --mts-gray-200: #E0E0E0;
    --mts-gray-300: #CCCCCC;
    --mts-gray-700: #666666;
    --mts-white: #FFFFFF;
}

/* Theme Application Classes */

/* Buttons */
.btn-primary,
.mts-btn-primary {
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-inverse) !important;
    border-color: var(--theme-primary) !important;
}

.btn-primary:hover,
.mts-btn-primary:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
}

.btn-accent {
    background-color: var(--theme-accent) !important;
    color: var(--theme-text-inverse) !important;
}

.btn-accent:hover {
    background-color: var(--theme-accent-dark) !important;
}

.btn-success,
.mts-btn-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}

.btn-success:hover,
.mts-btn-success:hover {
    background-color: #059669 !important;
    border-color: #059669 !important;
}

.btn-secondary,
.mts-btn-secondary {
    background-color: #6b7280 !important;
    color: #ffffff !important;
    border-color: #6b7280 !important;
}

.btn-secondary:hover,
.mts-btn-secondary:hover {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

/* Base button styles for .btn class */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Links */
a,
.link {
    color: var(--theme-primary);
}

a:hover,
.link:hover {
    color: var(--theme-primary-dark);
}

/* Badges */
.mts-badge-primary {
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-inverse) !important;
}

.mts-badge-accent {
    background-color: var(--theme-accent) !important;
    color: var(--theme-text-inverse) !important;
}

/* Nav Items */
.mts-sidebar-item.active,
.mts-nav-item.active {
    background-color: rgba(var(--theme-primary-rgb), 0.1) !important;
    border-left-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}

.mts-sidebar-item:hover,
.mts-nav-item:hover {
    background-color: rgba(var(--theme-primary-rgb), 0.05) !important;
}

/* Header */
.mts-header {
    border-bottom-color: var(--theme-border);
}

/* Cards */
.mts-card {
    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}

/* Inputs */
.mts-input:focus,
.mts-select:focus,
.mts-textarea:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

/* Progress Indicators */
.progress-bar {
    background-color: var(--theme-primary);
}

/* FAB Button */
.mts-fab {
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-inverse) !important;
}

.mts-fab:hover {
    background-color: var(--theme-primary-dark) !important;
}

/* Status Indicators */
.status-active {
    color: var(--theme-success);
}

.status-warning {
    color: var(--theme-warning);
}

.status-error {
    color: var(--theme-danger);
}

/* Tabs */
.tab.active {
    border-bottom-color: var(--theme-primary);
    color: var(--theme-primary);
}

/* Loading Spinner */
.spinner {
    border-color: rgba(var(--theme-primary-rgb), 0.2);
    border-top-color: var(--theme-primary);
}

/* Utility Classes */
.text-primary {
    color: var(--theme-primary) !important;
}

.text-accent {
    color: var(--theme-accent) !important;
}

.bg-primary {
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-inverse) !important;
}

.bg-accent {
    background-color: var(--theme-accent) !important;
    color: var(--theme-text-inverse) !important;
}

.border-primary {
    border-color: var(--theme-primary) !important;
}

/* Contrast Fallback for Light Colors */
@supports (color: color-contrast(white vs black)) {
    .btn-primary,
    .mts-btn-primary {
        color: color-contrast(var(--theme-primary) vs white, black);
    }
}

/* Dark Mode Support (future) */
@media (prefers-color-scheme: dark) {
    :root {
        --theme-surface: #1F2937;
        --theme-background: #111827;
        --theme-background-alt: #1F2937;
        --theme-text-primary: #F9FAFB;
        --theme-text-secondary: #D1D5DB;
        --theme-text-tertiary: #9CA3AF;
        --theme-border: #374151;
    }
}