/*
 * Tema değişkenleri — tasarım sisteminin tek ayar noktası.
 * Marka yönü (H13) gelince yalnız bu dosyadaki değerler değişir; bileşenler yalnız
 * değişken adlarını kullanır, renk ya da ölçü yazmaz.
 */

:root {
  color-scheme: light;

  /* Marka (yer tutucu; H13 ile değişecek) */
  --color-brand: #1f5f8b;
  --color-brand-strong: #164868;
  --color-brand-soft: #e3eef6;
  --color-on-brand: #ffffff;

  /* Yüzeyler ve metin */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-muted: #eef0f3;
  --color-border: #d6dae0;
  --color-text: #1c2430;
  --color-text-muted: #5b6573;
  --color-focus: #2f80c2;

  /* Durum renkleri */
  --color-success: #1e7a46;
  --color-success-soft: #e2f3e9;
  --color-warning: #8a5a00;
  --color-warning-soft: #fdf1d8;
  --color-danger: #b42318;
  --color-danger-soft: #fde5e2;
  --color-info: #1f5f8b;
  --color-info-soft: #e3eef6;

  /* Yazı */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --line-height: 1.5;
  --font-weight-strong: 600;

  /* Boşluk ölçeği */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Biçim */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 8%);
  --shadow-md: 0 4px 16px rgb(16 24 40 / 14%);

  /* Yerleşim */
  --topbar-height: 3.5rem;
  --sidebar-width: 15rem;
  --content-max-width: 80rem;
  --tap-target: 2.75rem;
}

/* Koyu tema: sistem tercihi (kullanıcı açık seçmediyse) ya da kullanıcı seçimi. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-brand: #5ea8dc;
    --color-brand-strong: #86c0e8;
    --color-brand-soft: #1a3346;
    --color-on-brand: #0d1620;
    --color-bg: #0f141a;
    --color-surface: #171d25;
    --color-surface-muted: #1f2731;
    --color-border: #2e3845;
    --color-text: #e6eaef;
    --color-text-muted: #9aa5b3;
    --color-focus: #7cc0f0;
    --color-success: #5cc98b;
    --color-success-soft: #173325;
    --color-warning: #e5b454;
    --color-warning-soft: #3a2d12;
    --color-danger: #f0776b;
    --color-danger-soft: #3d1a17;
    --color-info: #5ea8dc;
    --color-info-soft: #1a3346;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-brand: #5ea8dc;
  --color-brand-strong: #86c0e8;
  --color-brand-soft: #1a3346;
  --color-on-brand: #0d1620;
  --color-bg: #0f141a;
  --color-surface: #171d25;
  --color-surface-muted: #1f2731;
  --color-border: #2e3845;
  --color-text: #e6eaef;
  --color-text-muted: #9aa5b3;
  --color-focus: #7cc0f0;
  --color-success: #5cc98b;
  --color-success-soft: #173325;
  --color-warning: #e5b454;
  --color-warning-soft: #3a2d12;
  --color-danger: #f0776b;
  --color-danger-soft: #3d1a17;
  --color-info: #5ea8dc;
  --color-info-soft: #1a3346;
}