/* ============================================================================
   Page Chrome — layout iskeleti (body, sidebar, header) token entegrasyonu.
   Faz 3 Adım 1. tokens.css Katman B semantic değişkenlerine bağlı.

   .dark zaten tokens.css'te --bg/--border/--nav-bg vb. flip ettiği için
   tek kural hem light hem dark mode'u kapsar — dark: variant'a gerek yok.
   html.theme-transitioning zincirine otomatik girer (first-paint glitch fix).
   ============================================================================ */

html, body {
  background: var(--bg);
  color: var(--fg1);
}

/* Sidebar — kanvasla aynı zemin; ayrım sağ border'dan gelir. */
.app-sidebar {
  background: var(--bg);
  border-color: var(--border);
}

/* Header — sticky; yarı saydam nav yüzeyi + blur. */
.app-header {
  background: var(--nav-bg);
  border-color: var(--border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Auth panel (login/signup/password-reset ortak kartı) — elevated yüzey.
   shadow-sm Tailwind utility'si kartta kalır, burada box-shadow tanımlanmaz. */
.auth-card {
  background: var(--bg-elevated);
  border-color: var(--border);
}

/* Dashboard widget kartı (widget_card.html ortak sarmalayıcısı) — elevated yüzey.
   rounded-2xl Tailwind utility'si kartta kalır (refresh hx-target bağımlılığı). */
.widget-card {
  background: var(--bg-elevated);
  border-color: var(--border);
}
.widget-card h3 { color: var(--fg1); }
.widget-refresh-btn { color: var(--fg3); }
.widget-refresh-btn:hover { color: var(--fg2); }