/* ==================================================
   TEMA DEĞİŞKENLERİ — theme-variables.css (v5.0.1)
   Tarih: 2026-04-18
   Özet:
   - L1-L10 katman sistemi
   - Dark ve Light Mode desteği
   - Bootstrap değişken köprüsü eklendi
   - Light mode selector html[data-theme="light"] olarak düzeltildi
================================================== */

/* ==============================================
   KARANLIK MOD (Varsayılan)
   ============================================== */
:root {
  /* 1) Marka / Sidebar (Dark Mode) */
  --theme-primary: #3e2e10;
  --sidebar-bg: var(--theme-primary);
  --sidebar-bg-alt: #2e220c;
  --sidebar-text: #f1ce7a;
  --sidebar-accent: #b29655;
  --sidebar-accent-hover: #c2ac78;
  --scroll-thumb-hover: #7b5b20;
  --logo-bg: #ff8100;

  /* 2) Koyu Palet Referansları (L1–L10) */
  --surface-bg-dark-1: #0d0d0d; /* L1 (Page) */
  --surface-bg-dark-2: #181818; /* L2 (Surface) */
  --panel-bg-dark: #202020; /* L3 (Panel) */
  --surface-bg-dark-3: #252525; /* L4 (Card) */
  --field-bg-dark: #2a2a2a; /* L5 (Field) */
  --surface-bg-dark-5: #313131; /* L6 (Sub-card) */
  --surface-bg-dark-6: #353535; /* L7 (Sub-field) */
  --surface-bg-dark-7: #3a3a3a; /* L8 (Divider) */
  --surface-bg-dark-8: #404040; /* L9 (Hover Elevation) */
  --surface-bg-dark-9: #474747; /* L10 (Micro-surface) */

  /* 3) Koyu Mod Metin & Aksesuar */
  --text-primary-dark: #e0e0e0;
  --text-secondary-dark: #a0a0a0;
  --accent-light-dark: #d8b66a;

  /* 4) Açık Palet Referansları (L1–L10) */
  --theme-primary-light: #4f3f1a;
  --sidebar-bg-light: #fdfaf5;
  --sidebar-bg-alt-light: #f5ede6;
  --sidebar-text-light: #4a3c2b;
  --sidebar-accent-light: #a9813b;
  --sidebar-accent-hover-light: #b4934e;
  --scroll-thumb-hover-light: #c9b075;
  --logo-bg-light: #ff9f2e;

  /*
     * 🎨 DÜZELTİLMİŞ AÇIK MOD PALETİ
     * L1 (Page) -> L10 (Micro-surface)
     */
  --surface-bg-light-1: #ffffff; /* L1 (Page) */
  --surface-bg-light-2: #f9f6f2; /* L2 (Surface) */
  --panel-bg-light: #f2ebe3; /* L3 (Panel) */
  --surface-bg-light-3: #e8e1d9; /* L4 (Card) */
  --field-bg-light: #e0d8cd; /* L5 (Field) */
  --surface-bg-light-5: #d9cfc2; /* L6 (Sub-card) */
  --surface-bg-light-6: #d1c6b8; /* L7 (Sub-field) */
  --surface-bg-light-7: #c8b79f; /* L8 (Divider) */
  --surface-bg-light-8: #b7a183; /* L9 (Hover Elevation) */
  --surface-bg-light-9: #a99274; /* L10 (Micro-surface) */

  /* 5) Açık Mod Metin & Aksesuar */
  --text-primary-light: #2e2e2e;
  --text-secondary-light: #5a5a5a;
  --accent-dark-light: #735e2f;

  /* 6) Global Gölgeler (Dark) */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.36);

  /* 7) Global Tipografi & Spacing */
  --font-family-base: "Poppins", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: clamp(0.95rem, 0.4vw + 0.9rem, 1rem);
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
  --font-size-xxl: clamp(1.5rem, 1.6vw + 1.1rem, 1.8rem);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  --line-height-text: 1.7;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 2.5rem;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 16px;
  --border-radius-pill: 50px;
  --transition-duration-fast: 0.15s;
  --transition-duration-base: 0.2s;
  --transition-duration-slow: 0.3s;
  --transition-timing-function: ease;
  --container-max-width: 1200px;
  --navbar-height: 56px;

  /* 8) KATMAN HARİTASI (DARK MODE) */
  --page-bg: var(--surface-bg-dark-1); /* L1 */
  --surface-bg: var(--surface-bg-dark-2); /* L2 */
  --panel-bg: var(--panel-bg-dark); /* L3 */
  --card-bg: var(--surface-bg-dark-3); /* L4 */
  --field-bg: var(--field-bg-dark); /* L5 */
  --sub-card-bg: var(--surface-bg-dark-5); /* L6 */
  --sub-field-bg: var(--surface-bg-dark-6); /* L7 */
  --divider-bg: var(--surface-bg-dark-7); /* L8 */
  --hover-elevation-bg: var(--surface-bg-dark-8); /* L9 */
  --micro-surface-bg: var(--surface-bg-dark-9); /* L10 */

  /* Input eşlemesi */
  --input-bg: var(--field-bg);

  /* Kenarlıklar (Dark) */
  --border-color: #2a2a2a;
  --field-border-color: #323232;
  --divider-color: var(--divider-bg);
  --border-subtle: var(--micro-surface-bg);

  /* Eski alias'lar */
  --surface-bg-1: var(--page-bg);
  --surface-bg-2: var(--surface-bg);
  --surface-bg-3: var(--card-bg);
  --border-color-light: var(--border-color);

  /* Metin & İkonlar (Dark) */
  --text-on-accent: #000000;
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-placeholder: var(--text-secondary-dark);
  --accent-color: var(--accent-light-dark);
  --accent-color-hover: var(--sidebar-accent-hover);
  --accent-color-translucent: rgba(216, 182, 106, 0.2);
  --icon-color-dark: var(--text-secondary-dark);
  --icon-color: var(--icon-color-dark);

  /* Bootstrap variable bridge */
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-body-bg: var(--page-bg);
  --bs-card-color: var(--text-primary);
  --bs-card-bg: var(--card-bg);
  --bs-border-color: var(--border-color);

  /* Focus & Scrollbar */
  --focus-ring-color: rgba(216, 182, 106, 0.28);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --scrollbar-track-bg: var(--input-bg);
  --scrollbar-thumb-color: var(--accent-color);
  --scrollbar-thumb-hover-color: var(--sidebar-accent-hover);

  /* 9) Durum (Status) Renkleri - Koyu Mod */
  --status-completed: #22c55e;
  --status-completed-bg: rgba(34, 197, 94, 0.14);
  --status-completed-border: rgba(34, 197, 94, 0.32);
  --status-completed-border-selected: rgba(34, 197, 94, 0.36);

  --status-watching: #7c5cff;
  --status-watching-bg: rgba(124, 92, 255, 0.14);
  --status-watching-border: rgba(124, 92, 255, 0.32);
  --status-watching-border-selected: rgba(124, 92, 255, 0.36);

  --status-on_hold: #f59e0b;
  --status-on_hold-bg: rgba(245, 158, 11, 0.14);
  --status-on_hold-border: rgba(245, 158, 11, 0.32);
  --status-on_hold-border-selected: rgba(245, 158, 11, 0.36);

  --status-dropped: #ef4444;
  --status-dropped-bg: rgba(239, 68, 68, 0.14);
  --status-dropped-border: rgba(239, 68, 68, 0.32);
  --status-dropped-border-selected: rgba(239, 68, 68, 0.36);

  --status-plan_to_watch: #06b6d4;
  --status-plan_to_watch-bg: rgba(6, 182, 212, 0.14);
  --status-plan_to_watch-border: rgba(6, 182, 212, 0.32);
  --status-plan_to_watch-border-selected: rgba(6, 182, 212, 0.36);

  /* Chart */
  --chart-grid-color: rgba(255, 255, 255, 0.08);
  --chart-text-color: var(--text-secondary);

  color-scheme: dark;
}

/* ==============================================
     AÇIK MOD
     ============================================== */
html[data-theme="light"] {
  /* 1) Marka / Sidebar (Light Mode) */
  --theme-primary: var(--theme-primary-light);
  --sidebar-bg: var(--sidebar-bg-light);
  --sidebar-bg-alt: var(--sidebar-bg-alt-light);
  --sidebar-text: var(--sidebar-text-light);
  --sidebar-accent: var(--sidebar-accent-light);
  --sidebar-accent-hover: var(--sidebar-accent-hover-light);
  --scroll-thumb-hover: var(--scroll-thumb-hover-light);
  --logo-bg: var(--logo-bg-light);

  /* 2) Gölgeler (Light) */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);

  /* 3) KATMAN HARİTASI (LIGHT MODE) */
  --page-bg: var(--surface-bg-light-1); /* L1 */
  --surface-bg: var(--surface-bg-light-2); /* L2 */
  --panel-bg: var(--panel-bg-light); /* L3 */
  --card-bg: var(--surface-bg-light-3); /* L4 */
  --field-bg: var(--field-bg-light); /* L5 */
  --sub-card-bg: var(--surface-bg-light-5); /* L6 */
  --sub-field-bg: var(--surface-bg-light-6); /* L7 */
  --divider-bg: var(--surface-bg-light-7); /* L8 */
  --hover-elevation-bg: var(--surface-bg-light-8); /* L9 */
  --micro-surface-bg: var(--surface-bg-light-9); /* L10 */

  /* Input eşlemesi */
  --input-bg: var(--field-bg);

  /* Kenarlıklar (Light) */
  --border-color: #dfd6cb;
  --field-border-color: #d6ccbf;
  --divider-color: var(--divider-bg);
  --border-subtle: var(--micro-surface-bg);

  /* Eski alias'lar */
  --surface-bg-1: var(--page-bg);
  --surface-bg-2: var(--surface-bg);
  --surface-bg-3: var(--card-bg);
  --border-color-light: var(--border-color);

  /* Metin & İkonlar (Light) */
  --text-on-accent: #000000;
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-placeholder: var(--text-secondary-light);
  --accent-color: var(--sidebar-accent-light);
  --accent-color-hover: var(--sidebar-accent-hover-light);
  --accent-color-translucent: rgba(169, 129, 59, 0.25);
  --icon-color-light: var(--text-secondary-light);
  --icon-color: var(--icon-color-light);

  /* Bootstrap variable bridge */
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-body-bg: var(--page-bg);
  --bs-card-color: var(--text-primary);
  --bs-card-bg: var(--card-bg);
  --bs-border-color: var(--border-color);

  /* Focus & Scrollbar */
  --focus-ring-color: rgba(169, 129, 59, 0.25);
  --scrollbar-track-bg: var(--input-bg);
  --scrollbar-thumb-color: var(--accent-color);
  --scrollbar-thumb-hover-color: var(--sidebar-accent-hover-light);

  /* 4) Durum (Status) Renkleri - Açık Mod */
  --status-completed: #22c55e;
  --status-completed-bg: rgba(34, 197, 94, 0.14);
  --status-completed-border: rgba(34, 197, 94, 0.32);
  --status-completed-border-selected: rgba(34, 197, 94, 0.36);

  --status-watching: #7c5cff;
  --status-watching-bg: rgba(124, 92, 255, 0.14);
  --status-watching-border: rgba(124, 92, 255, 0.32);
  --status-watching-border-selected: rgba(124, 92, 255, 0.36);

  --status-on_hold: #f59e0b;
  --status-on_hold-bg: rgba(245, 158, 11, 0.14);
  --status-on_hold-border: rgba(245, 158, 11, 0.32);
  --status-on_hold-border-selected: rgba(245, 158, 11, 0.36);

  --status-dropped: #ef4444;
  --status-dropped-bg: rgba(239, 68, 68, 0.14);
  --status-dropped-border: rgba(239, 68, 68, 0.32);
  --status-dropped-border-selected: rgba(239, 68, 68, 0.36);

  --status-plan_to_watch: #06b6d4;
  --status-plan_to_watch-bg: rgba(6, 182, 212, 0.14);
  --status-plan_to_watch-border: rgba(6, 182, 212, 0.32);
  --status-plan_to_watch-border-selected: rgba(6, 182, 212, 0.36);

  /* Chart */
  --chart-grid-color: rgba(0, 0, 0, 0.28);
  --chart-text-color: var(--text-secondary);

  color-scheme: light;
}

/* ==============================================
     GLOBAL UX
     ============================================== */
html,
body {
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

:where(button, [role="button"], a, input, textarea, select):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: none;
}