/* ============================================
   MA POPOTE - Dark Mode Overrides
   Source: dribbble-COMPILED.md dark palette
   ============================================ */

[data-theme="dark"] {
  --bg-primary: #1A1714;
  --bg-surface: #2D2926;
  --bg-warm: #23201D;
  --bg-warm-alt: #2A2622;
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --bg-overlay-blur: rgba(0, 0, 0, 0.4);

  --text-primary: #F5F0E1;
  --text-secondary: #A89B8C;
  --text-tertiary: #7A6F63;
  --text-inverse: #1A1714;

  --accent-primary: #D4896A;
  --accent-primary-hover: #E09A7B;
  --accent-primary-light: rgba(212, 137, 106, 0.15);
  --accent-secondary: #CA8A04;
  --accent-secondary-hover: #E5A820;
  --accent-cta: #E5A820;
  --accent-cta-hover: #F0B830;
  --accent-cta-light: rgba(229, 168, 32, 0.15);
  --accent-success: #8B9B5C;
  --accent-success-light: rgba(139, 155, 92, 0.15);
  --accent-error: #E85D5D;
  --accent-error-light: rgba(232, 93, 93, 0.15);
  --accent-warning: #F59E0B;
  --accent-warning-light: rgba(245, 158, 11, 0.15);
  --accent-info: #60A5FA;
  --accent-info-light: rgba(96, 165, 250, 0.15);

  --border: #3D3835;
  --border-strong: #524B45;
  --border-focus: #D4896A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.35);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  color-scheme: dark;
}

/* Skeleton loading in dark mode */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, var(--border) 25%, #3D3835 50%, var(--border) 75%);
  background-size: 200% 100%;
}

/* Scrollbar dark mode */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #524B45;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #6B5E4F;
}

/* Image brightness adjustment for dark mode */
[data-theme="dark"] img:not(.no-dim) {
  filter: brightness(0.9);
}