/* ============================================
   TEKUK PLAT - Theme Styles
   Light, Dark, Blue, Green
   ============================================ */

/* Default: Light theme (warm) */
[data-theme="light"],
:root {
  --color-bg: #f5f5f0;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #5a5a5a;
  --color-accent: #c45c26;
  --color-accent-hover: #a34a1e;
  --color-border: #e0e0dc;
  --color-header-bg: rgba(255, 255, 255, 0.92);
  --color-shadow: rgba(0, 0, 0, 0.08);
}

/* Dark theme */
[data-theme="dark"] {
  --color-bg: #1a1a1c;
  --color-surface: #252528;
  --color-text: #f0f0ed;
  --color-text-muted: #a0a0a0;
  --color-accent: #e07d4a;
  --color-accent-hover: #f08f5c;
  --color-border: #3a3a3e;
  --color-header-bg: rgba(37, 37, 40, 0.92);
  --color-shadow: rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .slider-overlay {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

[data-theme="dark"] .slider-dot,
[data-theme="dark"] .slider-btn {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Blue / Industrial theme */
[data-theme="blue"] {
  --color-bg: #e8eef4;
  --color-surface: #ffffff;
  --color-text: #0f2847;
  --color-text-muted: #4a6a8a;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-border: #c5d4e4;
  --color-header-bg: rgba(255, 255, 255, 0.92);
  --color-shadow: rgba(37, 99, 235, 0.12);
}

/* Green / Natural theme */
[data-theme="green"] {
  --color-bg: #f0f5f0;
  --color-surface: #ffffff;
  --color-text: #1a2e1a;
  --color-text-muted: #4a6a4a;
  --color-accent: #16a34a;
  --color-accent-hover: #15803d;
  --color-border: #c5ddc5;
  --color-header-bg: rgba(255, 255, 255, 0.92);
  --color-shadow: rgba(22, 163, 74, 0.12);
}

/* Apply theme to body so CSS variables cascade */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}