/*!
 * ---------------------------------------------------------------------------
 *                   _   _             _ _ _ _ _        _
 *                  | | | |           | (_|_|_) |      | |
 *   _ __ ___  _   _| |_| |_   _    __| |_ _ _| |_ __ _| |
 *  | '_ ` _ \| | | | __| | | | |  / _` | | | | __/ _` | |
 *  | | | | | | |_| | |_| | |_| | | (_| | | | | || (_| | |
 *  |_| |_| |_|\__,_|\__|_|\__,_|  \__,_|_| |_|\__\__,_|_|
 *                                       _/ |
 *                                      |__/
 *   MUTLU DİJİTAL — Samet Mutlu — +05422419932 — mutludijital.com.tr
 * ---------------------------------------------------------------------------
 *  tokens.css — Özerler Lojistik tasarım sistemi / değişken katmanı
 *  Bu dosya tüm renk, tipografi, boşluk ve hareket kararlarının tek kaynağıdır.
 *  Bileşenlerde sabit (hard-coded) değer kullanılmaz; sadece bu değişkenler.
 * ---------------------------------------------------------------------------
 */

:root {
  /* =====================================================================
     1. RENK — Mürekkep (nötr) skalası
     Sektör: lojistik / ağır taşımacılık. Palet "asfalt + kağıt" dengesi
     üzerine kuruludur: koyu grafit zemin, sıcak kırık beyaz yüzey.
     ===================================================================== */
  --ink-50:  #f7f8fa;
  --ink-100: #eef1f6;
  --ink-200: #dce2ec;
  --ink-300: #c1cad8;
  --ink-400: #93a0b3;
  --ink-500: #6b7789;
  --ink-600: #4e596b;
  --ink-700: #364152;
  --ink-800: #222b39;
  --ink-900: #141b26;
  --ink-950: #0a0f17;

  /* Yüzeyler */
  --surface:        #ffffff;
  --surface-sunken: var(--ink-50);
  --surface-alt:    var(--ink-100);
  --surface-deep:   var(--ink-950);
  --surface-deep-2: var(--ink-900);

  /* Metin */
  --text-strong:  var(--ink-900);   /* başlıklar            */
  --text:         var(--ink-600);   /* gövde metni  6.99:1  */
  --text-muted:   var(--ink-500);   /* ikincil      4.50:1  */
  --text-faint:   var(--ink-400);   /* yalnız büyük punto   */
  --text-onDark:        #e8ecf3;    /* koyu zeminde gövde   */
  --text-onDark-muted:  #a9b4c6;    /* koyu zeminde ikincil */
  --text-onDark-faint:  #7d8899;

  /* =====================================================================
     2. RENK — Signal (vurgu)
     Trafik sinyali kırmızısı: sektörün "dur/izin/fren" diliyle örtüşür.
     Açık zeminde metin/ikon için --signal-600 (5.7:1) kullanılır.
     Koyu zeminde metin için --signal-300 (7.4:1) kullanılır.
     ===================================================================== */
  --signal-50:  #fdf2f2;
  --signal-100: #fbe3e4;
  --signal-200: #f7c9cb;
  --signal-300: #f08e92;  /* koyu zeminde metin  */
  --signal-400: #e2525a;
  --signal-500: #c81e28;  /* ana vurgu           */
  --signal-600: #a8161f;  /* hover / açık zeminde metin */
  --signal-700: #84111a;
  --signal-800: #5e0c13;

  /* =====================================================================
     3. RENK — Durum
     ===================================================================== */
  --ok-50:   #e9f6f0;
  --ok-500:  #1b8a5f;
  --ok-600:  #157a55;
  --warn-50: #fff6e6;
  --warn-600:#8a5a00;
  --info-50: #eaf2fa;
  --info-600:#17548c;

  /* =====================================================================
     4. TİPOGRAFİ
     2 aile: Archivo (display, endüstriyel grotesk) + Source Sans 3 (metin).
     Toplam 4 ağırlık: Archivo 700/800 + Source Sans 3 400/600.
     Genel amaçlı font (Arial/Roboto/Inter) kullanılmaz.
     ===================================================================== */
  --font-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Akışkan ölçek — oran ~1.25, min ile max arası clamp() */
  --fs-100: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --fs-200: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-300: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fs-400: clamp(1.125rem, 1.05rem + 0.34vw, 1.25rem);
  --fs-500: clamp(1.3125rem, 1.2rem + 0.55vw, 1.625rem);
  --fs-600: clamp(1.5625rem, 1.33rem + 1.05vw, 2.125rem);
  --fs-700: clamp(1.875rem, 1.5rem + 1.85vw, 2.75rem);
  --fs-800: clamp(2.25rem, 1.7rem + 2.75vw, 3.75rem);
  --fs-900: clamp(2.75rem, 1.9rem + 4.2vw, 5rem);

  --lh-display: 1.04;
  --lh-heading: 1.16;
  --lh-sub:     1.32;
  --lh-body:    1.65;

  --tr-tighter: -0.035em;
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-eyebrow: 0.14em;

  /* =====================================================================
     5. BOŞLUK — 8pt tabanlı ölçek
     ===================================================================== */
  --sp-1:  0.25rem;  /*   4 */
  --sp-2:  0.5rem;   /*   8 */
  --sp-3:  0.75rem;  /*  12 */
  --sp-4:  1rem;     /*  16 */
  --sp-5:  1.5rem;   /*  24 */
  --sp-6:  2rem;     /*  32 */
  --sp-7:  3rem;     /*  48 */
  --sp-8:  4rem;     /*  64 */
  --sp-9:  6rem;     /*  96 */
  --sp-10: 8rem;     /* 128 */
  --sp-11: 10rem;    /* 160 */

  /* Bölüm dikey ritmi — mobil 48-64 / tablet 72-96 / masaüstü 96-160 */
  --section-pad: var(--sp-7);
  --section-pad-lg: var(--sp-9);

  /* =====================================================================
     6. KÖŞE YARICAPI — 16px üstü yalnızca pill/avatar
     ===================================================================== */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-pill: 999px;

  /* =====================================================================
     7. YERLEŞİM
     ===================================================================== */
  --shell-max: 1320px;
  --shell-pad: clamp(1.25rem, 4vw, 2.5rem);
  --prose-max: 68ch;

  --header-h:    4.25rem;   /*  68px */
  --topbar-h:    2.25rem;   /*  36px */
  --sticky-off:  calc(var(--header-h) + var(--sp-5));

  /* =====================================================================
     8. HAREKET
     ===================================================================== */
  --dur-micro:  160ms;   /* mikro etkileşim   120-200 */
  --dur-ui:     240ms;   /* UI geçişi         200-300 */
  --dur-enter:  560ms;   /* giriş animasyonu  400-700 */
  --dur-page:   720ms;   /* sayfa geçişi      500-900 */

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  /* =====================================================================
     9. GÖLGE — ölçülü, katmanlı; abartılı drop-shadow yok
     ===================================================================== */
  --sh-1: 0 1px 2px rgba(10, 15, 23, 0.06), 0 1px 3px rgba(10, 15, 23, 0.05);
  --sh-2: 0 4px 12px -2px rgba(10, 15, 23, 0.08), 0 2px 6px -2px rgba(10, 15, 23, 0.05);
  --sh-3: 0 14px 34px -10px rgba(10, 15, 23, 0.16), 0 4px 12px -6px rgba(10, 15, 23, 0.08);
  --sh-4: 0 32px 64px -24px rgba(10, 15, 23, 0.30);

  /* =====================================================================
     10. KATMAN
     ===================================================================== */
  --z-base:    1;
  --z-sticky:  40;
  --z-header:  60;
  --z-overlay: 70;
  --z-widget:  80;
  --z-cookie:  90;
}