/* themes.css
 * Tema CSS değişkenleri (tokenlar).
 * Tüm renkler buradan beslenir; HTML/JS içine sabit #hex YAZILMAZ.
 * 6 tema: ocean (varsayılan), dark, night, day, forest, energy.
 *
 * Tasarım dili: "Clean-Tech" — temiz beyaz/açık gri zeminler, derin lacivert
 * metin hiyerarşisi, gözü yormayan pastel/canlı vurgu renkleri.
 */

:root,
[data-theme="ocean"] {
  /* Tarayıcının kendi kontrolleri (scrollbar, date picker, select listesi) */
  color-scheme: light;

  /* Renkli zemin üzerine gelen metnin rengi.
     Açık temalarda beyaz; koyu temada okunaklılık için koyu "ink" olur. */
  --on-primary: #ffffff;
  --on-accent: #ffffff;

  /* Büyük gradient bantlar (CTA, giriş paneli, uygulama bandı).
     Koyu temada bunlar derinleşir; parlak cyan/mor duvar göz yorar. */
  --band-from: var(--primary-600);
  --band-to: var(--accent-purple);
  --on-band: #ffffff;
  --on-band-soft: rgba(255, 255, 255, 0.9);
  --band-ink: var(--primary-700); /* bant üstündeki açık butonun metni */

  /* Marka birincil rengi (cyan) */
  --primary-400: #38d6f2;
  --primary-500: #13c8ec;
  --primary-600: #0ea5c4;
  --primary-700: #0b7e96;
  --primary-soft: #e6f9fd; /* açık pastel zemin */

  /* Derin lacivert metin hiyerarşisi */
  --neutral-900: #0f172a;
  --neutral-800: #1e293b;
  --neutral-700: #334155;
  --neutral-600: #475569;
  --neutral-500: #64748b;
  --neutral-400: #94a3b8;
  --neutral-300: #cbd5e1;
  --neutral-200: #e2e8f0;
  --neutral-100: #f1f5f9;
  --neutral-50: #f8fafc;

  /* Yüzey & arka plan */
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-2: #f1f5f9;
  --color-text: #0f172a;
  --color-text-soft: #475569;
  --color-text-muted: #5a6675; /* AA: açık zeminde ≥4.5 kontrast */
  --color-border: #e2e8f0;

  /* Pastel "renkli notlar" vurgu paleti */
  --accent-purple: #8b7cf6;
  --accent-purple-soft: #efeafe;
  --accent-amber: #fbbf24;
  --accent-amber-soft: #fef5e0;
  --accent-green: #34d399;
  --accent-green-soft: #e3faf1;
  --accent-pink: #f472b6;
  --accent-pink-soft: #fdeaf4;

  /* Metin için AA-uyumlu koyu "ink" varyantları (açık zeminde okunaklı) */
  --primary-ink: #0b6478;
  --accent-green-ink: #047857;

  /* Durum renkleri */
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* Gölgeler — yumuşak, premium */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-primary: 0 8px 24px rgba(19, 200, 236, 0.28);

  /* Yarıçap */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Cam (glass) efekt */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.6);
}

/* ═══════════════════════════════════════════════════════════════
   KARANLIK (dark) — nötr grafit, marka cyan'ı korunur.
   Uzun çalışma seansında göz yormaması için:
   · Saf siyah (#000) değil grafit zemin — halo/parlama azalır.
   · Saf beyaz (#fff) değil kırık beyaz metin — kontrast 14:1, halation yok.
   · Vurgu renkleri koyu zeminde bir tık desatüre — titreşim yapmaz.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  /* Marka cyan'ı korunur, koyu zeminde okunacak kadar açılır */
  --primary-400: #7ce6fb;
  --primary-500: #2ed3f5;
  --primary-600: #13c8ec;
  --primary-700: #0ea5c4;
  --primary-soft: #0d2b34;

  /* Parlak cyan üstüne beyaz okunmaz (1.9:1) → koyu ink kullanılır (9.2:1) */
  --on-primary: #04222b;
  --on-accent: #032218;

  /* Bantlar: derin teal → derin indigo. Beyaz metin okunur, ekran parlamaz. */
  --band-from: #0d4d5f;
  --band-to: #363061;
  --on-band: #eef4f7;
  --on-band-soft: rgba(238, 244, 247, 0.82);
  --band-ink: #0d3b4a;

  /* Ters çevrilmiş nötr skala (hafif mavi-gri grafit) */
  --neutral-900: #e9edf3;
  --neutral-800: #dce2ea;
  --neutral-700: #c4ccd8;
  --neutral-600: #a6b0bf;
  --neutral-500: #8a95a4;
  --neutral-400: #6a7484;
  --neutral-300: #4b5462;
  --neutral-200: #333b47;
  --neutral-100: #232932;
  --neutral-50: #191e26;

  --color-background: #12161c;
  --color-surface: #191e26;
  --color-surface-2: #212832;
  --color-text: #e9edf3;
  --color-text-soft: #b5becb;
  --color-text-muted: #949fad; /* AA: yüzey üzerinde 6.2 kontrast */
  --color-border: #2a323d;

  --accent-purple: #a99bf5;
  --accent-purple-soft: #241f3a;
  --accent-amber: #ecb75f;
  --accent-amber-soft: #2f2614;
  --accent-green: #45d69e;
  --accent-green-soft: #102e26;
  --accent-pink: #ef8ab6;
  --accent-pink-soft: #33202b;

  /* Koyu temada ink açık tondur (koyu yumuşak zeminde okunaklı) */
  --primary-ink: #6fdcf5;
  --accent-green-ink: #5fe0ae;

  --color-success: #45d69e;
  --color-error: #f47c7c;
  --color-warning: #ecb75f;
  --color-info: #6fa8f5;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-primary: 0 8px 24px rgba(46, 211, 245, 0.18); /* hafif ışıma, göz yormaz */

  --glass-bg: rgba(19, 23, 30, 0.78);
  --glass-border: rgba(255, 255, 255, 0.07);
}

[data-theme="night"] {
  color-scheme: dark;

  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-soft: #1e1b4b;

  --neutral-900: #f8fafc;
  --neutral-800: #f1f5f9;
  --neutral-700: #e2e8f0;
  --neutral-600: #cbd5e1;
  --neutral-500: #94a3b8;
  --neutral-400: #64748b;
  --neutral-300: #475569;
  --neutral-200: #334155;
  --neutral-100: #1e293b;
  --neutral-50: #0f172a;

  --color-background: #0b1120;
  --color-surface: #131c31;
  --color-surface-2: #1c273f;
  --color-text: #f8fafc;
  --color-text-soft: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-border: #283449;

  --accent-purple: #a78bfa;
  --accent-purple-soft: #2a2150;
  --accent-amber: #fcd34d;
  --accent-amber-soft: #3a2f15;
  --accent-green: #34d399;
  --accent-green-soft: #103a2c;
  --accent-pink: #f472b6;
  --accent-pink-soft: #3a1f30;

  /* Koyu temada ink açık ton olur (koyu yumuşak zeminde okunaklı) */
  --primary-ink: #a5b4fc;
  --accent-green-ink: #6ee7b7;

  --color-success: #34d399;
  --color-error: #f87171;
  --color-warning: #fbbf24;
  --color-info: #60a5fa;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-primary: 0 8px 24px rgba(99, 102, 241, 0.4);

  --glass-bg: rgba(19, 28, 49, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
}

[data-theme="day"] {
  color-scheme: light;

  --primary-400: #fbbf24;
  --primary-500: #f59e0b;
  --primary-600: #d97706;
  --primary-700: #b45309;
  --primary-soft: #fef3da;

  --neutral-900: #1c1917;
  --neutral-800: #292524;
  --neutral-700: #44403c;
  --neutral-600: #57534e;
  --neutral-500: #78716c;
  --neutral-400: #a8a29e;
  --neutral-300: #d6d3d1;
  --neutral-200: #e7e5e4;
  --neutral-100: #f5f5f4;
  --neutral-50: #fafaf9;

  --color-background: #fffbf5;
  --color-surface: #ffffff;
  --color-surface-2: #fdf6ec;
  --color-text: #1c1917;
  --color-text-soft: #57534e;
  --color-text-muted: #6b645c; /* AA: warm açık zeminde ≥4.5 */
  --color-border: #ede4d3;

  --accent-purple: #8b7cf6;
  --accent-purple-soft: #efeafe;
  --accent-amber: #f59e0b;
  --accent-amber-soft: #fef5e0;
  --accent-green: #10b981;
  --accent-green-soft: #e3faf1;
  --accent-pink: #f472b6;
  --accent-pink-soft: #fdeaf4;

  --primary-ink: #b45309;
  --accent-green-ink: #047857;

  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  --shadow-sm: 0 1px 2px rgba(120, 80, 20, 0.05);
  --shadow-md: 0 4px 16px rgba(120, 80, 20, 0.08);
  --shadow-lg: 0 12px 32px rgba(120, 80, 20, 0.1);
  --shadow-xl: 0 24px 64px rgba(120, 80, 20, 0.14);
  --shadow-primary: 0 8px 24px rgba(245, 158, 11, 0.3);

  --glass-bg: rgba(255, 251, 245, 0.75);
  --glass-border: rgba(255, 255, 255, 0.6);
}

[data-theme="forest"] {
  color-scheme: light;

  --primary-400: #34d399;
  --primary-500: #10b981;
  --primary-600: #059669;
  --primary-700: #047857;
  --primary-soft: #e3faf1;

  --neutral-900: #0f172a;
  --neutral-800: #1e293b;
  --neutral-700: #334155;
  --neutral-600: #475569;
  --neutral-500: #64748b;
  --neutral-400: #94a3b8;
  --neutral-300: #cbd5e1;
  --neutral-200: #e2e8f0;
  --neutral-100: #f1f5f9;
  --neutral-50: #f8fafc;

  --color-background: #f5faf7;
  --color-surface: #ffffff;
  --color-surface-2: #ecf6f0;
  --color-text: #0f291f;
  --color-text-soft: #3f5a4e;
  --color-text-muted: #4f6a5e; /* AA: yeşil açık zeminde ≥4.5 */
  --color-border: #d8eadf;

  --accent-purple: #8b7cf6;
  --accent-purple-soft: #efeafe;
  --accent-amber: #fbbf24;
  --accent-amber-soft: #fef5e0;
  --accent-green: #10b981;
  --accent-green-soft: #e3faf1;
  --accent-pink: #f472b6;
  --accent-pink-soft: #fdeaf4;

  --primary-ink: #047857;
  --accent-green-ink: #047857;

  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  --shadow-sm: 0 1px 2px rgba(15, 41, 31, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 41, 31, 0.07);
  --shadow-lg: 0 12px 32px rgba(15, 41, 31, 0.1);
  --shadow-xl: 0 24px 64px rgba(15, 41, 31, 0.14);
  --shadow-primary: 0 8px 24px rgba(16, 185, 129, 0.3);

  --glass-bg: rgba(245, 250, 247, 0.75);
  --glass-border: rgba(255, 255, 255, 0.6);
}

[data-theme="energy"] {
  color-scheme: light;

  --primary-400: #f87171;
  --primary-500: #ef4444;
  --primary-600: #dc2626;
  --primary-700: #b91c1c;
  --primary-soft: #fdeaea;

  --neutral-900: #0f172a;
  --neutral-800: #1e293b;
  --neutral-700: #334155;
  --neutral-600: #475569;
  --neutral-500: #64748b;
  --neutral-400: #94a3b8;
  --neutral-300: #cbd5e1;
  --neutral-200: #e2e8f0;
  --neutral-100: #f1f5f9;
  --neutral-50: #f8fafc;

  --color-background: #fdf8f8;
  --color-surface: #ffffff;
  --color-surface-2: #fbeeee;
  --color-text: #1a0f0f;
  --color-text-soft: #5a4747;
  --color-text-muted: #6a5b5b; /* AA: warm açık zeminde ≥4.5 */
  --color-border: #f0dede;

  --accent-purple: #8b7cf6;
  --accent-purple-soft: #efeafe;
  --accent-amber: #fbbf24;
  --accent-amber-soft: #fef5e0;
  --accent-green: #10b981;
  --accent-green-soft: #e3faf1;
  --accent-pink: #f472b6;
  --accent-pink-soft: #fdeaf4;

  --primary-ink: #b91c1c;
  --accent-green-ink: #047857;

  --color-success: #10b981;
  --color-error: #dc2626;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  --shadow-sm: 0 1px 2px rgba(60, 15, 15, 0.05);
  --shadow-md: 0 4px 16px rgba(60, 15, 15, 0.07);
  --shadow-lg: 0 12px 32px rgba(60, 15, 15, 0.1);
  --shadow-xl: 0 24px 64px rgba(60, 15, 15, 0.14);
  --shadow-primary: 0 8px 24px rgba(239, 68, 68, 0.3);

  --glass-bg: rgba(253, 248, 248, 0.75);
  --glass-border: rgba(255, 255, 255, 0.6);
}