/**
 * NA-Kit UI — Dark Mode Styles
 * Automatically applies dark mode via prefers-color-scheme or [data-theme="dark"].
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-color-primary: #818cf8;
    --ui-color-primary-hover: #a5b4fc;
    --ui-color-secondary: #a78bfa;
    --ui-color-success: #34d399;
    --ui-color-warning: #fbbf24;
    --ui-color-danger: #f87171;
    --ui-color-info: #60a5fa;

    --ui-text-primary: #f9fafb;
    --ui-text-secondary: #d1d5db;
    --ui-text-muted: #9ca3af;
    --ui-text-placeholder: #6b7280;
    --ui-text-inverse: #111827;
    --ui-text-link: #818cf8;
    --ui-text-link-hover: #a5b4fc;

    --ui-bg-primary: #111827;
    --ui-bg-secondary: #1f2937;
    --ui-bg-tertiary: #374151;
    --ui-bg-elevated: #1f2937;
    --ui-bg-overlay: rgba(0, 0, 0, 0.7);

    --ui-border-color: #374151;
    --ui-border-color-strong: #4b5563;

    --ui-focus-ring-color: #818cf8;

    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
  }
}

/* Manual dark mode via data attribute */
[data-theme="dark"] {
  --ui-color-primary: #818cf8;
  --ui-color-primary-hover: #a5b4fc;
  --ui-color-secondary: #a78bfa;
  --ui-color-success: #34d399;
  --ui-color-warning: #fbbf24;
  --ui-color-danger: #f87171;
  --ui-color-info: #60a5fa;

  --ui-text-primary: #f9fafb;
  --ui-text-secondary: #d1d5db;
  --ui-text-muted: #9ca3af;
  --ui-text-placeholder: #6b7280;
  --ui-text-inverse: #111827;
  --ui-text-link: #818cf8;
  --ui-text-link-hover: #a5b4fc;

  --ui-bg-primary: #111827;
  --ui-bg-secondary: #1f2937;
  --ui-bg-tertiary: #374151;
  --ui-bg-elevated: #1f2937;
  --ui-bg-overlay: rgba(0, 0, 0, 0.7);

  --ui-border-color: #374151;
  --ui-border-color-strong: #4b5563;

  --ui-focus-ring-color: #818cf8;

  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}