/**
 * CSS Theme Reset - Dark Theme (Promotor Ecosystem)
 * 
 * Unified dark theme matching PromotorOPS PWA design language.
 * Slate-900 background, brand blue accents, modern styling.
 */

/* ============================================
   ROOT LEVEL THEME
   ============================================ */

:root {
  color-scheme: dark !important;
  
  /* Core palette */
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-faint: #64748b;
  --color-background: #0f172a;
  --color-surface: #1e293b;
  --color-surface-hover: #334155;
  --color-border: #334155;
  --color-border-light: #475569;
  
  /* Brand / Primary */
  --color-primary: #2563eb;
  --color-primary-hover: #3b82f6;
  --color-primary-active: #1d4ed8;
  --color-primary-light: #60a5fa;
  --color-primary-faint: rgba(37, 99, 235, 0.15);
  
  /* Semantic colors */
  --color-secondary: #475569;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  
  /* Grayscale (slate scale) */
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  
  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  /* Font */
  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* ============================================
   HTML & BODY BASE STYLES
   ============================================ */

html {
  color-scheme: dark !important;
  background-color: var(--color-background);
}

body {
  color-scheme: dark !important;
  background-color: var(--color-background);
  color: var(--color-text);
}

/* ============================================
   FORM ELEMENTS THEME
   ============================================ */

input,
textarea,
select,
button {
  color-scheme: dark !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-faint) !important;
  opacity: 1 !important;
}

/* ============================================
   SCROLLBAR STYLING (Webkit browsers)
   ============================================ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 5px;
  border: 2px solid var(--color-background);
}

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

/* ============================================
   SELECTION STYLING
   ============================================ */

::selection {
  background-color: var(--color-primary);
  color: #ffffff;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* ============================================
   FOCUS STATES
   ============================================ */

*:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  * {
    color-scheme: light !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ============================================
   COMPONENT-SPECIFIC RESETS
   ============================================ */

dialog,
[role="dialog"],
[role="alertdialog"] {
  color-scheme: dark !important;
}

[role="menu"],
[role="listbox"],
[role="combobox"] {
  color-scheme: dark !important;
}

[role="tooltip"] {
  color-scheme: dark !important;
}

/* ============================================
   MEDIA QUERY FOR FORCED COLORS MODE
   ============================================ */

@media (forced-colors: active) {
  * {
    forced-color-adjust: auto !important;
  }
}