/**
 * ========================================
 * FLOW THEME - DARK MODE TOKENS
 * ========================================
 *
 * Dark mode renk değişkenleri ve semantic token'lar.
 * Bu dosya tüm dark mode stillerinin temelini oluşturur.
 */

/* ============================================
   DARK MODE - SEMANTIC TOKENS
   ============================================ */

[data-theme="dark"] {
  /* Surface (Arka Plan) Renkleri */
  --color-surface-primary: #0f172a;
  --color-surface-secondary: #1e293b;
  --color-surface-tertiary: #334155;
  --color-surface-elevated: #1e293b;

  /* Text Renkleri */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  /* Border Renkleri */
  --color-border-default: #334155;
  --color-border-strong: #475569;
  --color-border-muted: #1e293b;

  /* Gray Scale Override */
  --color-white: #0f172a;
  --color-black: #f8fafc;
  --color-gray-50: #1e293b;
  --color-gray-100: #334155;
  --color-gray-200: #475569;
  --color-gray-300: #64748b;
  --color-gray-400: #94a3b8;
  --color-gray-500: #cbd5e1;
  --color-gray-600: #e2e8f0;
  --color-gray-700: #f1f5f9;
  --color-gray-800: #f8fafc;
  --color-gray-900: #ffffff;

  /* Overlay Renkleri */
  --color-overlay-light: rgba(255, 255, 255, 0.1);
  --color-overlay-medium: rgba(255, 255, 255, 0.2);
  --color-overlay-dark: rgba(0, 0, 0, 0.5);
  --color-overlay-white: rgba(15, 23, 42, 0.9);

  /* Shadow Override */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

  /* Theme Color - Dark Mode Override */
  /* Koyu arka planda tema renginin açık versiyonu kullanılır */
  --te-color-text: var(--te-accent-color, #ffc107);
}

/* ============================================
   DARK MODE - BASE STYLES
   ============================================ */

[data-theme="dark"] {
  background-color: var(--color-surface-primary);
  color: var(--color-text-primary);
}

[data-theme="dark"] body {
  background-color: var(--color-surface-primary);
  color: var(--color-text-primary);
}

[data-theme="dark"] main {
  background-color: var(--color-surface-primary);
}

/* ============================================
   DARK MODE - LINKS
   ============================================ */

[data-theme="dark"] a {
  color: var(--color-text-primary);
}

[data-theme="dark"] a:hover {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .text-dark {
  color: var(--color-text-primary) !important;
}

/* ============================================
   DARK MODE - THEME COLOR CLASSES
   ============================================ */

/* text-te-color - koyu arka planda accent rengi kullan */
[data-theme="dark"] .text-te-color {
  color: var(--te-color-text) !important;
}

[data-theme="dark"] a.text-te-color:hover,
[data-theme="dark"] a.text-te-color:focus {
  color: var(--color-text-primary) !important;
}

/* bg-te-color - arka plan renginde metin beyaz kalmalı */
[data-theme="dark"] .bg-te-color {
  background-color: var(--te-color) !important;
  color: #fff !important;
}

/* border-te-color */
[data-theme="dark"] .border-te-color {
  border-color: var(--te-color) !important;
}

/* btn-te-color - butonlar tema rengini korur */
[data-theme="dark"] .btn-te-color {
  background-color: var(--te-color) !important;
  border-color: var(--te-color) !important;
  color: #fff !important;
}

[data-theme="dark"] .btn-te-color:hover,
[data-theme="dark"] .btn-te-color:focus {
  background-color: var(--te-hover-color) !important;
  border-color: var(--te-hover-color) !important;
  color: #fff !important;
}

/* btn-outline-te-color */
[data-theme="dark"] .btn-outline-te-color {
  color: var(--te-color-text) !important;
  border-color: var(--te-color) !important;
  background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-te-color:hover,
[data-theme="dark"] .btn-outline-te-color:focus {
  background-color: var(--te-color) !important;
  border-color: var(--te-color) !important;
  color: #fff !important;
}

/* badge-te-color */
[data-theme="dark"] .badge-te-color {
  background-color: var(--te-color) !important;
  color: #fff !important;
}

[data-theme="dark"] .text-muted {
  color: var(--color-text-muted) !important;
}

/* ============================================
   DARK MODE - ICON TOGGLE
   ============================================ */

/* Default: Moon icon (light mode) */
.dark-mode-icon::before {
  content: "\f186"; /* fa-moon */
}

/* Dark mode: Sun icon */
[data-theme="dark"] .dark-mode-icon::before {
  content: "\f185"; /* fa-sun */
}