/* ========================================
   DEV THEME - DARK MODE
   Dark gray backgrounds with slate accents
   ======================================== */

[data-theme*="dev"].dark {
  /* Dev Dark Mode uses darker grays with subtle slate accents */
  --color-surface: #111827;              /* Gray-900 base */
  --color-surface-secondary: #1f2937;     /* Gray-800 */
  --color-surface-tertiary: #374151;      /* Gray-700 */

  /* Borders - subtle but visible */
  --color-border: #4b5563;

  /* Text - good contrast on dark backgrounds */
  --color-text-primary: #f9fafb;          /* Gray-50 - near white */
  --color-text-secondary: #d1d5db;        /* Gray-300 - light gray */
  --color-text-tertiary: #9ca3af;         /* Gray-400 - medium gray */
  --color-text-inverse: #111827;
  --color-text-muted: #6b7280;            /* Gray-500 */

  /* Primary colors - lighter slate for dark mode visibility */
  --color-primary-100: #334155;           /* Slate-700 background for icons */
  --color-primary-600: #94a3b8;           /* Slate-400 - lighter for visibility */
  --color-primary-700: #cbd5e1;           /* Slate-300 - even lighter for hover */
  --color-primary-800: #e2e8f0;           /* Slate-200 - very light */

  /* Accent colors - also lighter slate */
  --color-accent-500: #94a3b8;            /* Slate-400 */
  --color-accent-600: #cbd5e1;            /* Slate-300 */

  /* Headings and labels use lighter slate */
  --color-heading: #cbd5e1;               /* Slate-300 */
  --color-label: #94a3b8;                 /* Slate-400 */
  --color-icon: #94a3b8;                  /* Slate-400 */
  --color-link: #94a3b8;                  /* Slate-400 */

  /* Success colors for dark mode */
  --color-success-50: #064e3b;            /* Dark green background */
  --color-success-100: #065f46;           /* Darker green background for icons */
  --color-success-600: #6ee7b7;           /* Light green icon */
  --color-success-800: #d1fae5;           /* Very light green text */
  --color-success-bg: #064e3b;
  --color-success-border: #047857;
  --color-success-text: #d1fae5;

  /* Warning colors for dark mode */
  --color-warning-100: #713f12;           /* Dark amber background */
  --color-warning-600: #fbbf24;           /* Light amber icon */
  --color-warning-bg: #713f12;
  --color-warning-border: #92400e;
  --color-warning-text: #fef3c7;

  /* Info colors for dark mode */
  --color-info-50: #1e3a8a;               /* Dark blue background */
  --color-info-100: #1e40af;              /* Darker blue background for icons */
  --color-info-200: #3b82f6;              /* Light blue border */
  --color-info-600: #93c5fd;              /* Light blue icon */
  --color-info-800: #dbeafe;              /* Very light blue text */
  --color-info-bg: #1e3a8a;
  --color-info-border: #1e40af;
  --color-info-text: #dbeafe;

  /* Danger/Error colors for dark mode */
  --color-danger-50: #7f1d1d;             /* Dark red background */
  --color-danger-100: #991b1b;            /* Darker red background for icons */
  --color-danger-200: #dc2626;            /* Light red border */
  --color-danger-600: #fca5a5;            /* Light red icon */
  --color-danger-800: #fee2e2;            /* Very light red text */
  --color-danger-bg: #7f1d1d;
  --color-danger-border: #991b1b;
  --color-danger-text: #fee2e2;

  /* Shadows adjusted for dark mode */
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* Dev dark mode headings - use lighter slate */
[data-theme*="dev"].dark h1,
[data-theme*="dev"].dark h2,
[data-theme*="dev"].dark h3,
[data-theme*="dev"].dark h4,
[data-theme*="dev"].dark h5,
[data-theme*="dev"].dark h6 {
  color: var(--color-heading) !important;
}

/* Dev dark mode form labels */
[data-theme*="dev"].dark label {
  color: var(--color-text-primary) !important;
}

/* Dev dark mode strong text */
[data-theme*="dev"].dark strong {
  color: var(--color-text-primary);
}

/* Dev dark mode links */
[data-theme*="dev"].dark a {
  color: var(--color-link);
}

[data-theme*="dev"].dark a:hover {
  color: var(--color-primary-700);
}

/* Dev dark mode callouts */
[data-theme*="dev"].dark .callout {
  border-color: var(--color-border);
}

/* Dev dark mode navbar brand */
[data-theme*="dev"].dark .navbar-brand {
  color: var(--color-heading) !important;
}

/* Dev dark mode text inheritance */
[data-theme*="dev"].dark p {
  color: inherit;
}

/* Dev dark mode icons */
[data-theme*="dev"].dark i,
[data-theme*="dev"].dark svg {
  color: var(--color-icon);
}

/* Dev dark mode dropdown hover */
[data-theme*="dev"].dark .dropdown-menu .dropdown-item:hover {
  background-color: var(--color-surface-secondary);
}

/* Dev dark mode sidebar */
[data-theme*="dev"].dark aside[id="drawer-navigation"] {
  background-color: #1f2937 !important; /* Gray-800 */
}

[data-theme*="dev"].dark aside[id="drawer-navigation"] a:hover {
  background-color: rgba(148, 163, 184, 0.1) !important; /* Slate with transparency */
  border-left: 4px solid #94a3b8 !important; /* Slate-400 */
}

[data-theme*="dev"].dark aside[id="drawer-navigation"] a.active,
[data-theme*="dev"].dark aside[id="drawer-navigation"] a[aria-current="page"] {
  background-color: rgba(148, 163, 184, 0.15) !important;
  border-left: 4px solid #94a3b8 !important;
}

[data-theme*="dev"].dark aside[id="drawer-navigation"] a:hover i,
[data-theme*="dev"].dark aside[id="drawer-navigation"] a.active i {
  color: #94a3b8 !important; /* Slate-400 */
}