/* ========== NORMAL MODE ========== */
:root {
  --color-bg: #f8f9fa;
  --color-header-bg: #f8f9fa;
  --color-content-bg: #e8e8e87a;
  --color-text: #2c2f33;
  --color-primary: #5c7cfa;
  --color-hover-bg: #e9ecef;
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-search-bg: #f1f3f5;

  --form-bg: #fff;
  --form-border: #555;
  --form-focus: #5c7cfa;
  --form-radius: 6px;
  --form-padding: 0.75rem 1rem;
  --form-label: #555;
  --form-label-focus: var(--form-focus);
  --form-placeholder: #aaa;
  --form-accent: #5c7cfa;

  --card-bg: #fff;
  --card-border: var(--form-border);
  --card-header-bg: #d5e6f6;
  --card-footer-bg: #dedede;
  --card-text: #333;

  --sidebar-width: 220px;
  --glow-color-1: rgba(0, 255, 251, 0.7);
  --glow-color-2: rgba(0, 255, 255, 0.418);

  --table-border: #dee2e6;
  --table-header-bg: #f1f3f5;
  --table-row-bg-odd: #ffffff;
  --table-row-bg-even: #f8f9fa;
  --table-row-hover: #eaf2ff;
}

/* ========== DARK MODE OVERRIDE ========== */
body.dark-mode {
  --color-bg: #21242a;
  --color-header-bg: #21242a;
  --color-content-bg: #21242a;
  --color-text: #d9dee3;
  --color-primary: #82aaff;
  --color-hover-bg: #2b2f36;
  --color-shadow: rgba(0, 0, 0, 0.25);
  --color-search-bg: #262a31;

  --form-bg: #2c2f33;
  --form-border: #444;
  --form-label: #ccc;
  --form-placeholder: #888;

  --card-bg: #1f1f1f;
  --card-border: #333;
  --card-header-bg: #2a2a2a;
  --card-footer-bg: #2a2a2a;
  --card-text: #ddd;

  --sidebar-width: 220px;
  --table-border: #333;
  --table-header-bg: #2a2a2a;
  --table-row-bg-odd: #1f1f1f;
  --table-row-bg-even: #242424;
  --table-row-hover: #30353d;
}