/* ========================================
   AIERPP Theme Tokens - Color Only
   Theme A: Dark (Black/Blue)
   Theme B: Light (White/Greenish)
   ======================================== */

/* ========================================
   THEME B: LIGHT (White/Greenish) - Default
   ======================================== */
:root,
:root[data-theme="light"],
html[data-theme="light"] {
  /* Backgrounds */
  --bg: #ffffff;
  --bg-muted: #f7f8fa;
  --bg-alt: #f2f4f7;
  --surface: #ffffff;
  --surface-alt: #f2f4f7;
  --panel: #ffffff;
  --panel-alt: #f2f4f7;

  /* Text */
  --text: #0b1220;
  --text-muted: #566074;
  --text-secondary: #475569;
  --heading: #0b1220;
  --link: #16a34a;
  --link-hover: #15803d;

  /* Primary (Greenish) */
  --primary: #16a34a;
  --primary-hover: #15803d;
  --primary-active: #166534;
  --primary-contrast: #ffffff;
  --primary-light: #4ade80;
  --primary-dark: #15803d;

  /* Status Colors */
  --success: #22c55e;
  --success-hover: #16a34a;
  --success-light: #86efac;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: #fde047;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-light: #fca5a5;
  --info: #0ea5e9;
  --info-hover: #0284c7;
  --info-light: #7dd3fc;

  /* Borders & Dividers */
  --border: #e5e7eb;
  --border-strong: #cbd5e1;
  --border-light: #f1f5f9;
  --divider: #e5e7eb;

  /* Inputs */
  --input-bg: #ffffff;
  --input-text: #0b1220;
  --input-border: #cbd5e1;
  --input-focus: #16a34a;
  --input-focus-ring: #86efac33;
  --input-disabled-bg: #f7f8fa;
  --input-disabled-text: #94a3b8;

  /* Interactive States */
  --surface-hover: #f7f8fa;
  --surface-active: #e5e7eb;
  --surface-selected: #dcfce7;

  /* Sidebar */
  --sidebar-bg: #0b1220;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #1e293b;
  --sidebar-hover: #334155;
  --sidebar-border: #1e293b;

  /* Topbar */
  --topbar-bg: #ffffff;
  --topbar-text: #0b1220;
  --topbar-border: #e5e7eb;

  /* Cards & Modals */
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --modal-bg: #ffffff;
  --modal-overlay: rgba(11, 18, 32, 0.75);

  /* Tables */
  --table-bg: #ffffff;
  --table-header-bg: #f7f8fa;
  --table-border: #e5e7eb;
  --table-hover: #f7f8fa;
  --table-stripe: #f7f8fa;

  /* Focus & Rings */
  --focus: #86efac33;
  --focus-ring: 0 0 0 3px rgba(22, 163, 74, 0.25);
  --ring: 0 0 0 3px rgba(22, 163, 74, 0.25);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
  --shadow: 0 6px 16px rgba(2, 6, 23, 0.08);

  /* Legacy compatibility */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-alt);
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-heading: var(--heading);
  --color-primary: var(--primary);
  --color-primary-600: var(--primary-hover);
  --color-primary-700: var(--primary-dark);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-info: var(--info);
  --color-border: var(--border);
  --bg-primary: var(--bg);
  --bg-secondary: var(--bg-muted);
  --bg-tertiary: var(--bg-alt);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --accent-primary: var(--primary);
  --border-color: var(--border);
}

/* ========================================
   THEME A: DARK (Black/Blue)
   ======================================== */
:root[data-theme="dark"],
html[data-theme="dark"] {
  /* Backgrounds */
  --bg: #0b0d12;
  --bg-muted: #0f131a;
  --bg-alt: #141820;
  --surface: #11151c;
  --surface-alt: #171c24;
  --panel: #11151c;
  --panel-alt: #171c24;

  /* Text */
  --text: #e6edf6;
  --text-muted: #a3adc2;
  --text-secondary: #94a3b8;
  --heading: #ffffff;
  --link: #2563eb;
  --link-hover: #3b82f6;

  /* Primary (Blue) */
  --primary: #2563eb;
  --primary-hover: #3b82f6;
  --primary-active: #1e40af;
  --primary-contrast: #ffffff;
  --primary-light: #60a5fa;
  --primary-dark: #1e40af;

  /* Status Colors */
  --success: #22c55e;
  --success-hover: #16a34a;
  --success-light: #4ade80;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: #fbbf24;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-light: #f87171;
  --info: #38bdf8;
  --info-hover: #0ea5e9;
  --info-light: #7dd3fc;

  /* Borders & Dividers */
  --border: #243045;
  --border-strong: #2d3a52;
  --border-light: #1a2332;
  --divider: #243045;

  /* Inputs */
  --input-bg: #0f131a;
  --input-text: #e6edf6;
  --input-border: #243045;
  --input-focus: #2563eb;
  --input-focus-ring: #2563eb33;
  --input-disabled-bg: #0f131a;
  --input-disabled-text: #64748b;

  /* Interactive States */
  --surface-hover: #171c24;
  --surface-active: #1a2332;
  --surface-selected: #1e3a5f;

  /* Sidebar */
  --sidebar-bg: #0b0d12;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #1e293b;
  --sidebar-hover: #334155;
  --sidebar-border: #243045;

  /* Topbar */
  --topbar-bg: #0b0d12;
  --topbar-text: #e6edf6;
  --topbar-border: #243045;

  /* Cards & Modals */
  --card-bg: #11151c;
  --card-border: #243045;
  --modal-bg: #11151c;
  --modal-overlay: rgba(11, 13, 18, 0.85);

  /* Tables */
  --table-bg: #11151c;
  --table-header-bg: #0f131a;
  --table-border: #243045;
  --table-hover: #171c24;
  --table-stripe: #0f131a;

  /* Focus & Rings */
  --focus: #2563eb33;
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.5);
  --shadow: 0 6px 16px rgba(15, 23, 42, 0.55);

  /* Legacy compatibility */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-alt);
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-heading: var(--heading);
  --color-primary: var(--primary);
  --color-primary-600: var(--primary-hover);
  --color-primary-700: var(--primary-dark);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-info: var(--info);
  --color-border: var(--border);
  --bg-primary: var(--bg);
  --bg-secondary: var(--bg-muted);
  --bg-tertiary: var(--surface-alt);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --accent-primary: var(--primary);
  --border-color: var(--border);
}

/* ========================================
   Global Theme Application
   ======================================== */
body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scrollbar Theming */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-muted);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* Focus Visible - Use theme-aware focus ring */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ========================================
   TEST CHECKLIST (for manual testing):
   ========================================
   ✓ Login page - backgrounds, inputs, buttons
   ✓ Forms - inputs, selects, checkboxes, focus states
   ✓ Tables - headers, rows, borders, hover states
   ✓ Buttons - primary, secondary, ghost, disabled
   ✓ Modals - backgrounds, borders, close buttons
   ✓ Alerts/Toasts - success, warning, danger, info
   ✓ Charts - series colors, gridlines, axes
   ✓ Tooltips - backgrounds, text
   ✓ Pagination - active, hover, disabled states
   ✓ Empty states - text, icons
   ✓ Skeletons - loading placeholders
   ✓ Settings page - all form elements
   ✓ Sidebar - active, hover states
   ✓ Topbar - search, buttons
   ✓ Cards - backgrounds, borders
   ✓ Badges/Chips - all variants
   ✓ Tabs - active, hover states
   ✓ Dropdowns - menus, items
   ======================================== */