/* ═══════════════════════════════════════════════════════════════════════════
   Design Tokens — Çerkezköy İş İlanları
   ─────────────────────────────────────────────────────────────────────────────
   Tek-kaynaklı ölçek tokenları (spacing / typography / radius / z-index /
   motion). Renk tokenları theme.css'te yaşar (light/dark override'lı) — bu
   dosya renk TANIMLAMAZ, yalnızca tema-bağımsız ölçekleri sağlar.

   Kurallar:
   - Yeni bileşen CSS'i ölçü değerlerini buradaki tokenlardan almalı
     (örn. padding: var(--space-4); border-radius: var(--radius-md)).
   - 8pt grid: --space-* değerleri 4px taban, 8px adım üzerine kurulu.
   - z-index katmanları sabittir; ara değer gerekirse katman planı güncellenir,
     rastgele 9999 kullanılmaz.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ─── Spacing (8pt grid) ─────────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;

    /* ─── Typography scale (1.25 modüler oran, 16px taban) ──────────────── */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --text-xs:   0.75rem;   /* 12px — meta, badge */
    --text-sm:   0.875rem;  /* 14px — ikincil metin */
    --text-base: 1rem;      /* 16px — gövde (mobil min.) */
    --text-lg:   1.125rem;  /* 18px — vurgulu gövde */
    --text-xl:   1.25rem;   /* 20px — kart başlığı */
    --text-2xl:  1.5rem;    /* 24px — bölüm başlığı */
    --text-3xl:  1.875rem;  /* 30px — sayfa başlığı */
    --text-4xl:  2.25rem;   /* 36px — hero */

    --leading-tight:  1.25; /* başlıklar */
    --leading-normal: 1.5;  /* UI metni */
    --leading-loose:  1.65; /* uzun paragraf (ilan açıklaması) */

    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-heavy: 800;

    /* ─── Radius ─────────────────────────────────────────────────────────── */
    --radius-sm:   6px;   /* chip, badge */
    --radius-md:   10px;  /* input, buton */
    --radius-lg:   16px;  /* kart */
    --radius-xl:   24px;  /* modal, hero panel */
    --radius-full: 999px; /* pill */

    /* ─── Z-index katman planı ───────────────────────────────────────────── */
    --z-base:     0;
    --z-raised:   10;   /* sticky araç çubukları */
    --z-topbar:   20;   /* üst navigasyon */
    --z-dropdown: 30;   /* menü, öneri listesi */
    --z-overlay:  40;   /* backdrop */
    --z-modal:    50;   /* modal, sheet */
    --z-toast:    60;   /* bildirim */

    /* ─── Motion ─────────────────────────────────────────────────────────── */
    --duration-fast:   150ms;  /* hover/renk geçişi */
    --duration-normal: 250ms;  /* panel aç/kapa */
    --duration-slow:   400ms;  /* sayfa düzeyi geçiş */
    --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
    --ease-out-back:   cubic-bezier(0.16, 1, 0.3, 1);

    /* ─── Touch / erişilebilirlik ────────────────────────────────────────── */
    --touch-target-min: 44px;  /* WCAG 2.5.8 — dokunma hedefi tabanı */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
}