/**
 * Unified Theme System - Adiuta Application
 *
 * This file provides a centralized theme system using semantic color tokens.
 * Both light and dark modes use the same semantic names, making it easy to
 * switch themes without changing component CSS.
 *
 * Color System Architecture:
 * - Background colors (surfaces, elevated elements)
 * - Text colors (primary, secondary, tertiary)
 * - Border colors (subtle, default, strong)
 * - Interactive states (hover, active, focus)
 * - Status colors (success, warning, error, info)
 */

/* ========================================
 * LIGHT THEME (Default)
 * ======================================== */
:root,
[data-bs-theme="light"] {
  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-surface: #ffffff;
  --color-bg-surface-secondary: #f8fafc;
  --color-bg-elevated: #ffffff;
  --color-bg-overlay: rgba(15, 23, 42, 0.5);

  /* Text Colors */
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-tertiary: #94a3b8;
  --color-text-inverse: #ffffff;
  --color-text-muted: #6c757d;
  --color-text-disabled: #cbd5e0;

  /* Border Colors */
  --color-border-subtle: #f1f5f9;
  --color-border-default: #e2e8f0;
  --color-border-strong: #cbd5e0;
  --color-border-hover: #86b7fe;

  /* Interactive States */
  --color-interactive-hover: #f1f5f9;
  --color-interactive-active: #e2e8f0;
  --color-interactive-focus: #0d6efd;
  --color-interactive-disabled: #e2e8f0;

  /* Brand Colors */
  --color-primary: #206bc4;
  --color-primary-hover: #1a5ba3;
  --color-primary-active: #164b87;

  /* Status Colors */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-bg: #d1fae5;
  --color-success-border: #6ee7b7;

  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-bg: #fef3c7;
  --color-warning-border: #fcd34d;

  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-error-bg: #fee2e2;
  --color-error-border: #fca5a5;

  --color-info: #3b82f6;
  --color-info-hover: #2563eb;
  --color-info-bg: #dbeafe;
  --color-info-border: #93c5fd;

  /* Component Specific */
  --color-navbar-bg: #1e293b;
  --color-navbar-text: #ffffff;
  --color-navbar-hover: rgba(255, 255, 255, 0.1);

  --color-sidebar-bg: #1e293b;
  --color-sidebar-text: rgba(255, 255, 255, 0.7);
  --color-sidebar-hover: rgba(255, 255, 255, 0.1);
  --color-sidebar-active: rgba(255, 255, 255, 0.15);

  --color-card-bg: #ffffff;
  --color-card-border: #e2e8f0;
  --color-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);

  /* Form Elements */
  --color-input-bg: #ffffff;
  --color-input-border: #dee2e6;
  --color-input-text: #1e293b;
  --color-input-placeholder: #94a3b8;
  --color-input-focus-border: #0d6efd;
  --color-input-disabled-bg: #e9ecef;
}

/* ========================================
 * DARK THEME
 * ======================================== */
[data-bs-theme="dark"] {
  /* Background Colors */
  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #334155;
  --color-bg-surface: #1e293b;
  --color-bg-surface-secondary: #334155;
  --color-bg-elevated: #334155;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);

  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #e2e8f0;
  --color-text-tertiary: #cbd5e1;
  --color-text-inverse: #0f172a;
  --color-text-muted: #94a3b8;
  --color-text-disabled: #475569;

  /* Border Colors */
  --color-border-subtle: #334155;
  --color-border-default: #475569;
  --color-border-strong: #64748b;
  --color-border-hover: #64748b;

  /* Interactive States */
  --color-interactive-hover: #334155;
  --color-interactive-active: #475569;
  --color-interactive-focus: #3b82f6;
  --color-interactive-disabled: #334155;

  /* Brand Colors - slightly adjusted for dark mode */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-active: #1d4ed8;

  /* Status Colors - adjusted for dark mode */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-bg: #064e3b;
  --color-success-border: #047857;

  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-bg: #78350f;
  --color-warning-border: #b45309;

  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-error-bg: #7f1d1d;
  --color-error-border: #b91c1c;

  --color-info: #3b82f6;
  --color-info-hover: #2563eb;
  --color-info-bg: #1e3a8a;
  --color-info-border: #2563eb;

  /* Component Specific */
  --color-navbar-bg: #0f172a;
  --color-navbar-text: #f8fafc;
  --color-navbar-hover: rgba(255, 255, 255, 0.1);

  --color-sidebar-bg: #0f172a;
  --color-sidebar-text: rgba(248, 250, 252, 0.7);
  --color-sidebar-hover: rgba(255, 255, 255, 0.1);
  --color-sidebar-active: rgba(255, 255, 255, 0.15);

  --color-card-bg: #1e293b;
  --color-card-border: #334155;
  --color-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);

  /* Form Elements */
  --color-input-bg: #1e293b;
  --color-input-border: #334155;
  --color-input-text: #f8fafc;
  --color-input-placeholder: #94a3b8;
  --color-input-focus-border: #3b82f6;
  --color-input-disabled-bg: #334155;
}

/* ========================================
 * Theme Transition Support
 * Smooth color transitions when switching themes
 * ======================================== */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: var(--transition-base, 200ms);
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Disable transitions on page load */
.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
  transition: none !important;
}

/* ========================================
 * Semantic Color Utilities
 * Apply theme colors to common elements
 * ======================================== */

/* Backgrounds */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-surface { background-color: var(--color-bg-surface); }
.bg-elevated { background-color: var(--color-bg-elevated); }

/* Text Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-muted { color: var(--color-text-muted); }

/* Borders */
.border-subtle { border-color: var(--color-border-subtle); }
.border-default { border-color: var(--color-border-default); }
.border-strong { border-color: var(--color-border-strong); }

/* ========================================
 * Auto Theme (System Preference)
 * Respects user's OS dark mode preference
 * ======================================== */
@media (prefers-color-scheme: dark) {
  [data-bs-theme="auto"] {
    /* Apply dark theme colors when OS is in dark mode */
    color-scheme: dark;
  }

  [data-bs-theme="auto"] {
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-text-primary: #f8fafc;
    /* ... other dark theme colors ... */
  }
}

@media (prefers-color-scheme: light) {
  [data-bs-theme="auto"] {
    color-scheme: light;
  }
}