/**
 * CLMS v2 Dark Theme - Refactored Architecture
 * Comprehensive CSS variables system with logical organization
 */

/* ===== ROOT VARIABLES (LIGHT MODE DEFAULTS) ===== */
:root {
  /* === COLOR PALETTE === */
  --clms-white: #ffffff;
  --clms-black: #000000;
  --clms-transparent: transparent;

  /* === SEMANTIC COLORS === */
  --clms-accent-orange: #d3983f;
  --clms-accent-blue: #4a9ae6;
  --clms-accent-blue-hover: #90caf9;
  --clms-accent-blue-focus: #1976d2;

  /* === BACKGROUND COLORS === */
  --clms-bg-primary: #ffffff;
  --clms-bg-secondary: #f8f9fa;
  --clms-bg-tertiary: #e9ecef;
  --clms-bg-muted: #f1f3f4;
  --clms-bg-content: #ffffff;
  --clms-bg-card: #ffffff;
  --clms-bg-album: #f8f9fa;
  --clms-bg-sidebar: #ffffff;
  --clms-bg-header: #044678;

  /* === TEXT COLORS === */
  --clms-text-primary: #000000;
  --clms-text-secondary: #6c757d;
  --clms-text-muted: #adb5bd;
  --clms-text-inverse: #ffffff;
  --clms-text-link: #0d6efd;
  --clms-text-link-hover: #0a58ca;

  /* === BORDER COLORS === */
  --clms-border-primary: #dee2e6;
  --clms-border-secondary: #ced4da;
  --clms-border-focus: #86b7fe;
  --clms-border-muted: #e9ecef;

  /* === FORM COLORS === */
  --clms-form-bg: #ffffff;
  --clms-form-border: #ced4da;
  --clms-form-focus-border: #86b7fe;
  --clms-form-focus-shadow: rgba(13, 110, 253, 0.25);
  --clms-form-placeholder: #6c757d;
  --clms-form-disabled-bg: #e9ecef;
  --clms-form-disabled-color: #6c757d;

  /* === INTERACTIVE STATES === */
  --clms-hover-bg: #f8f9fa;
  --clms-active-bg: #e9ecef;
  --clms-focus-shadow: rgba(13, 110, 253, 0.25);

  /* === TABLE COLORS === */
  --clms-table-bg: #ffffff;
  --clms-table-striped-bg: #f8f9fa;
  --clms-table-hover-bg: #f1f3f4;
  --clms-table-border: #dee2e6;

  /* === NAVIGATION COLORS === */
  --clms-nav-link-color: #6c757d;
  --clms-nav-link-hover: #000000;
  --clms-nav-link-active: #d3983f;

  /* === DROPDOWN COLORS === */
  --clms-dropdown-bg: #ffffff;
  --clms-dropdown-border: #ced4da;
  --clms-dropdown-item-color: #000000;
  --clms-dropdown-item-hover-bg: #f8f9fa;
  --clms-dropdown-item-active-bg: #0d6efd;

  /* === CHART COLORS === */
  --clms-chart-bg: #c4c4c4;
  --clms-chart-text: #000000;
  --clms-chart-axis: #000000;
}

/* ===== DARK THEME OVERRIDES ===== */
[data-bs-theme="dark"] {
  /* === BACKGROUND COLORS === */
  --clms-bg-primary: #1c1c1c;
  --clms-bg-secondary: #2c3136;
  --clms-bg-tertiary: #3a4047;
  --clms-bg-muted: #404449;
  --clms-bg-content: #2c3136;
  --clms-bg-card: #2c3136;
  --clms-bg-album: #111111;
  --clms-bg-sidebar: #1c1c1c;
  --clms-bg-header: #044678;

  /* === TEXT COLORS === */
  --clms-text-primary: #ffffff;
  --clms-text-secondary: #adb5bd;
  --clms-text-muted: #6c757d;
  --clms-text-inverse: #1c1c1c;
  --clms-text-link: #4a9ae6;
  --clms-text-link-hover: #90caf9;

  /* === BORDER COLORS === */
  --clms-border-primary: #495057;
  --clms-border-secondary: #596c80;
  --clms-border-focus: #86b7fe;
  --clms-border-muted: #404449;

  /* === FORM COLORS === */
  --clms-form-bg: #2c3136;
  --clms-form-border: #495057;
  --clms-form-focus-border: #86b7fe;
  --clms-form-focus-shadow: rgba(134, 183, 254, 0.25);
  --clms-form-placeholder: #adb5bd;
  --clms-form-disabled-bg: #3a4047;
  --clms-form-disabled-color: #6c757d;

  /* === INTERACTIVE STATES === */
  --clms-hover-bg: #404449;
  --clms-active-bg: #495057;
  --clms-focus-shadow: rgba(134, 183, 254, 0.25);

  /* === TABLE COLORS === */
  --clms-table-bg: #2c3136;
  --clms-table-striped-bg: #3a4047;
  --clms-table-hover-bg: #d3983f;
  --clms-table-border: #495057;

  /* === NAVIGATION COLORS === */
  --clms-nav-link-color: #c4c4c4;
  --clms-nav-link-hover: #d3983f;
  --clms-nav-link-active: #d3983f;

  /* === DROPDOWN COLORS === */
  --clms-dropdown-bg: #2c3136;
  --clms-dropdown-border: #495057;
  --clms-dropdown-item-color: #ffffff;
  --clms-dropdown-item-hover-bg: #d3983f;
  --clms-dropdown-item-active-bg: #596c80;

  /* === CHART COLORS === */
  --clms-chart-bg: #c4c4c4;
  --clms-chart-text: #ffffff;
  --clms-chart-axis: #ffffff;

  /* === SPECIAL OVERRIDES === */
  /* Body background with pattern */
  --clms-body-bg: #1e2329;
  --clms-body-pattern: radial-gradient(#666666 1px, transparent 0);
  --clms-body-pattern-size: 22px 22px;
}