/* ============================================================
   Admin Theme Variables - Design Tokens
   All color and shadow values are defined here as CSS custom
   properties.  Switch themes by overriding these variables via
   [data-theme="dark"] or inline styles set by theme.js.
   ============================================================ */

/* --- Light theme (default) --- */
:root {
  /* Primary */
  --color-primary: #4F46E5;
  --color-primary-hover: #4338CA;
  --color-primary-light: rgba(79, 70, 229, 0.1);
  --color-primary-lighter: rgba(79, 70, 229, 0.3);
  --color-primary-ring: rgba(79, 70, 229, 0.15);

  /* Sidebar */
  --color-sidebar: #1E1B4B;
  --color-sidebar-text: rgba(255, 255, 255, 0.7);
  --color-sidebar-text-hover: #fff;
  --color-sidebar-active-bg: rgba(79, 70, 229, 0.3);
  --color-sidebar-active-border: #4F46E5;
  --color-sidebar-border: rgba(255, 255, 255, 0.1);
  --color-sidebar-footer-hover-bg: rgba(239, 68, 68, 0.15);
  --color-sidebar-footer-hover-text: #EF4444;

  /* Backgrounds */
  --color-bg: #F9FAFB;
  --color-card: #ffffff;
  --color-table-header: #F9FAFB;
  --color-hover: #F3F4F6;

  /* Text */
  --color-text: #1F2937;
  --color-heading: #1E1B4B;
  --color-text-secondary: #374151;
  --color-text-body: #4B5563;
  --color-text-muted: #6B7280;
  --color-text-light: #9CA3AF;
  --color-text-dark: #111827;

  /* Borders */
  --color-border: #E5E7EB;
  --color-border-light: #F3F4F6;
  --color-input-border: #D1D5DB;

  /* Status */
  --color-success: #10B981;
  --color-success-hover: #059669;
  --color-danger: #EF4444;
  --color-danger-hover: #DC2626;
  --color-warning: #F59E0B;
  --color-warning-hover: #D97706;

  /* Badges */
  --color-badge-pending-bg: rgba(245, 158, 11, 0.1);
  --color-badge-pending-text: #D97706;
  --color-badge-success-bg: rgba(16, 185, 129, 0.1);
  --color-badge-success-text: #059669;
  --color-badge-failed-bg: rgba(239, 68, 68, 0.1);
  --color-badge-failed-text: #DC2626;
  --color-badge-rejected-bg: rgba(107, 114, 128, 0.1);
  --color-badge-rejected-text: #6B7280;
  --color-badge-processing-bg: rgba(79, 70, 229, 0.1);
  --color-badge-processing-text: #4F46E5;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);
  --shadow-toast: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-login: 0 20px 60px rgba(0, 0, 0, 0.3);

  /* Overlays */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-loading-overlay: rgba(255, 255, 255, 0.7);

  /* Spinners */
  --color-spinner-track: #E5E7EB;
  --color-spinner-fill: #4F46E5;
}

/* --- Dark theme --- */
[data-theme="dark"] {
  /* Primary stays the same unless customized */

  /* Sidebar stays dark; if user picks a lighter sidebar,
     theme.js will adjust --color-sidebar-text automatically */

  /* Backgrounds */
  --color-bg: #111827;
  --color-card: #1F2937;
  --color-table-header: #1F2937;
  --color-hover: #374151;

  /* Text */
  --color-text: #F9FAFB;
  --color-heading: #F9FAFB;
  --color-text-secondary: #D1D5DB;
  --color-text-body: #D1D5DB;
  --color-text-muted: #9CA3AF;
  --color-text-light: #6B7280;
  --color-text-dark: #F9FAFB;

  /* Borders */
  --color-border: #374151;
  --color-border-light: #1F2937;
  --color-input-border: #4B5563;

  /* Shadows (darker in dark mode) */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-toast: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-login: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* Overlays */
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-loading-overlay: rgba(17, 24, 39, 0.7);

  /* Spinners */
  --color-spinner-track: #374151;
  --color-spinner-fill: #4F46E5;
}