/* Light Theme Variables */
[data-theme="light"],
.theme-light {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Text Colors */
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #6b7280;
  --text-inverse: #ffffff;

  /* Brand Colors */
  --primary-blue: #2563eb;
  --primary-blue-hover: #1d4ed8;
  --primary-green: #059669;
  --primary-green-hover: #047857;
  --accent-purple: #7c3aed;

  /* Border Colors */
  --border-color: #e5e7eb;
  --border-color-light: #f3f4f6;
  --border-color-dark: #d1d5db;

  /* Shadow Colors */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Card Colors */
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-shadow: var(--shadow-md);

  /* Form Colors */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-border-focus: var(--primary-blue);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-muted);

  /* Button Colors */
  --btn-primary-bg: var(--primary-blue);
  --btn-primary-hover: var(--primary-blue-hover);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: var(--bg-secondary);
  --btn-secondary-hover: var(--bg-tertiary);
  --btn-secondary-text: var(--text-primary);

  /* Sidebar Colors */
  --sidebar-bg: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-green) 100%);
  --sidebar-text: rgba(255, 255, 255, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-bg-hover: rgba(255, 255, 255, 0.15);

  /* Status Colors */
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #cc362e;
  --info-color: #3b82f6;

  /* Table Colors */
  --table-bg: #ffffff;
  --table-border: var(--border-color);
  --table-stripe: var(--bg-secondary);
  --table-hover: var(--bg-tertiary);

  /* Navigation Colors */
  --nav-bg: #ffffff;
  --nav-border: var(--border-color);
  --nav-text: var(--text-primary);
  --nav-text-hover: var(--primary-blue);
  --nav-bg-hover: var(--bg-secondary);
}