/**
 * @file
 * Tasarım değişkenleri (design tokens).
 *
 * Temanın bütün renkleri, boşlukları ve yazı tipi ölçekleri burada tanımlıdır.
 * Renkleri değiştirmek için tek yapılması gereken bu dosyadaki değerleri
 * güncellemek; bileşen dosyalarında sabit renk kodu yoktur.
 *
 * Vurgu rengi (--kalem-accent) tema ayarından gelir ve <head> içine yazılan
 * küçük bir <style> bloğuyla ezilir (bkz. _kalem_accent_css). Buradaki
 * değerler yalnızca yedektir.
 */

:root {
  /* --- Yazı tipleri --------------------------------------------------- */
  /* Hiçbir yazı tipi dışarıdan indirilmez; işletim sisteminin kendi
     tipografisi kullanılır. Bu hem hızlıdır hem de gizlilik açısından temizdir. */
  --kalem-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --kalem-font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --kalem-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* --- Ölçek ---------------------------------------------------------- */
  --kalem-text-xs: 0.78rem;
  --kalem-text-sm: 0.875rem;
  --kalem-text-base: 1rem;
  --kalem-text-lg: 1.125rem;
  --kalem-text-xl: 1.375rem;
  --kalem-text-2xl: 1.75rem;
  --kalem-text-3xl: 2.25rem;
  --kalem-text-4xl: 2.9rem;

  --kalem-leading-tight: 1.2;
  --kalem-leading-normal: 1.6;
  --kalem-leading-relaxed: 1.75;

  /* --- Boşluk --------------------------------------------------------- */
  --kalem-space-1: 0.25rem;
  --kalem-space-2: 0.5rem;
  --kalem-space-3: 0.75rem;
  --kalem-space-4: 1rem;
  --kalem-space-5: 1.5rem;
  --kalem-space-6: 2rem;
  --kalem-space-7: 3rem;
  --kalem-space-8: 4rem;

  /* --- Köşe ve gölge -------------------------------------------------- */
  --kalem-radius-sm: 6px;
  --kalem-radius: 10px;
  --kalem-radius-lg: 16px;
  --kalem-radius-pill: 999px;

  --kalem-shadow-sm: 0 1px 2px rgb(15 23 42 / 6%), 0 1px 3px rgb(15 23 42 / 5%);
  --kalem-shadow: 0 4px 16px rgb(15 23 42 / 8%);
  --kalem-shadow-lg: 0 18px 40px rgb(15 23 42 / 12%);

  /* --- Ölçüler -------------------------------------------------------- */
  --kalem-header-height: 68px;
  --kalem-reading-measure: 68ch;

  /* --- Hareket -------------------------------------------------------- */
  --kalem-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Vurgu rengi (tema ayarı ezer) ---------------------------------- */
  --kalem-accent: #2f6feb;
  --kalem-accent-rgb: 47, 111, 235;
  --kalem-accent-hover: #285ec8;
  --kalem-accent-active: #2353b0;
  --kalem-accent-soft: #e2ebfc;
  /* Vurgu renginin metin olarak kullanılan, kontrastı ölçülerek türetilmiş
     tonu. Gerçek değerler PHP tarafında hesaplanıp <head>'e yazılır
     (bkz. _kalem_accent_css); buradakiler yalnızca yedektir. */
  --kalem-accent-text: #2a64d4;
  --kalem-accent-text-hover: #1d4695;
  --kalem-accent-fg: #ffffff;
}

/* --- Açık tema ------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --kalem-bg: #ffffff;
  --kalem-bg-subtle: #f7f8fa;
  --kalem-bg-raised: #ffffff;
  --kalem-border: #e4e7ec;
  --kalem-border-strong: #cfd4dc;
  --kalem-text: #16181d;
  --kalem-text-muted: #5b6270;
  --kalem-text-faint: #656d7a;
  --kalem-overlay: rgb(255 255 255 / 82%);
  --kalem-code-bg: #f4f5f7;
}

/* --- Koyu tema -------------------------------------------------------- */
/* Saf siyah yerine hafif mavi bir gri kullanılır; uzun okumada göz daha az
   yorulur ve metin kenarlarında parlama (halation) oluşmaz. */
[data-bs-theme="dark"] {
  --kalem-accent-text: #6393f0;
  --kalem-accent-text-hover: #8fb3f5;
  --kalem-bg: #14161a;
  --kalem-bg-subtle: #1b1e24;
  --kalem-bg-raised: #1d2026;
  --kalem-border: #2c3038;
  --kalem-border-strong: #3d424c;
  --kalem-text: #e8eaee;
  --kalem-text-muted: #a3aab6;
  --kalem-text-faint: #8b92a0;
  --kalem-overlay: rgb(20 22 26 / 84%);
  --kalem-code-bg: #22262d;

  --kalem-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --kalem-shadow: 0 4px 18px rgb(0 0 0 / 45%);
  --kalem-shadow-lg: 0 18px 44px rgb(0 0 0 / 55%);
}

/* Bootstrap'in kendi değişkenlerini temanın paletine bağlar; böylece
   card, alert, dropdown gibi hazır bileşenler de aynı renkleri kullanır. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-bg: var(--kalem-bg);
  --bs-body-color: var(--kalem-text);
  --bs-border-color: var(--kalem-border);
  --bs-secondary-color: var(--kalem-text-muted);
  --bs-tertiary-bg: var(--kalem-bg-subtle);
  --bs-body-font-family: var(--kalem-font-sans);
  --bs-border-radius: var(--kalem-radius);
  --bs-border-radius-sm: var(--kalem-radius-sm);
  --bs-border-radius-lg: var(--kalem-radius-lg);
}