/* =====================================================================
   TASARIM SİSTEMİ - DEĞİŞKENLER (Design Tokens)
   =====================================================================
   Bu proje bir TOPTAN / PROMOSYON ÇANTA İMALATÇISI sitesidir.
   Renk ve tipografi seçimleri rastgele değil, doğrudan bu konudan
   ilham alınarak belirlenmiştir:

     - Lacivert (ink)  : Ham kanvas/denim kumaşının koyu tonu,
                         aynı zamanda kurumsal güven duygusu verir.
     - Çelik grisi (bg): Bir imalathanenin/atölyenin temiz, teknik
                         zemin rengi - "boutique" değil "üretim" hissi.
     - Pas turuncusu   : Çantalardaki metal aksesuar (toka, rivet)
       (accent)          rengi; harekete geçirici "Teklif Al" butonları
                         için kullanılır, SADECE aksiyon noktalarında.
     - Pirinç/altın     : Kaliteli donanım (fermuar, toka) rengi;
       (brass)           "öne çıkan" rozetlerinde kullanılır.

   İmza öge: Ürün kartlarındaki "kesik çizgi" (dikiş payı) çerçevesi
   ve teknik/mono fontla yazılmış SKU-stok etiketi.
   ===================================================================== */

:root {
  /* ---- Renkler ---- */
  --ink:        #122238;
  --ink-2:      #0B1626;
  --ink-soft:   #3A4A63;

  --bg:         #F1F2F4;
  --bg-alt:     #E7E9EC;
  --surface:    #FFFFFF;

  --accent:       #D6541F;
  --accent-deep:  #A6410F;
  --accent-soft:  #FCE6DA;

  --brass:      #B8933D;
  --brass-soft: #F3EBD8;

  --text:        #1A2330;
  --text-muted:  #606B7A;
  --text-invert: #F4F5F7;

  --border:      #DCDFE3;
  --border-dark: rgba(255,255,255,0.14);

  --success:      #2F7D53;
  --success-soft: #E4F3EA;
  --danger:       #B23A34;
  --danger-soft:  #FBE7E5;

  /* ---- Tipografi ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.375rem;  /* 22px */
  --fs-xl:   1.75rem;   /* 28px */
  --fs-2xl:  2.25rem;   /* 36px */
  --fs-3xl:  3rem;      /* 48px */

  /* ---- Boşluk Skalası (4px temel birim) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 6rem;

  /* ---- Köşe Yuvarlatma ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ---- Gölgeler ---- */
  --shadow-sm: 0 1px 2px rgba(18, 34, 56, 0.06), 0 1px 1px rgba(18, 34, 56, 0.04);
  --shadow-md: 0 6px 16px rgba(18, 34, 56, 0.08), 0 2px 4px rgba(18, 34, 56, 0.04);
  --shadow-lg: 0 16px 40px rgba(18, 34, 56, 0.14);

  /* ---- Kapsayıcı Genişlikleri ---- */
  --container-max: 1240px;
  --container-pad: var(--sp-5);

  /* ---- Geçiş (transition) süresi ---- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* Kırılım noktaları (media query'lerde doğrudan kullanılır, referans amaçlıdır):
   mobil     : 0 - 599px   (temel/varsayılan stiller)
   tablet    : 600 - 959px
   masaüstü  : 960px ve üzeri
   geniş     : 1200px ve üzeri
*/