/* ==========================================================================
   tedarikciniz.com.tr — DESIGN TOKENS
   Tek doğruluk kaynağı. Hiçbir bileşen ham değer kullanmaz; her şey buradan.
   Yön: Rafine endüstriyel sarı-siyah. Siyah = baskın yapı, sarı = keskin vurgu.
   ========================================================================== */

:root {
  /* ----- RENK: çekirdek paleti ----------------------------------------- */
  --color-bg:            #ffffff;   /* sayfa zemini (katalog okunur kalsın) */
  --color-surface:       #f6f6f5;   /* açık nötr kart/zemin */
  --color-surface-2:     #efefed;   /* bir tık koyu nötr (hover/alt zemin) */

  --color-ink:           #16161a;   /* ana metin / yapı (siyah-antrasit) */
  --color-ink-soft:      #3f3f46;   /* ikincil metin */
  --color-ink-mute:      #71717a;   /* üçüncül / yardımcı metin */

  --color-accent:        #f5c518;   /* endüstriyel sarı — CTA / vurgu */
  --color-accent-strong: #e0b00d;   /* hover/active için bir tık koyu */
  --color-accent-soft:   #fdf3cf;   /* çok açık sarı zemin (rozet/şerit) */
  --color-on-accent:     #16161a;   /* sarı üstü metin DAİMA koyu (AA) */

  --color-border:        #e4e4e7;   /* ince çizgi/çerçeve */
  --color-border-strong: #d4d4d8;   /* daha belirgin çizgi */

  /* Koyu yüzeyler (footer, üst şerit, hero blokları) */
  --color-dark:          #16161a;
  --color-dark-2:        #1f1f24;   /* koyu yüzey üstü kart */
  --color-on-dark:       #f4f4f5;   /* koyu üstü ana metin */
  --color-on-dark-soft:  #a1a1aa;   /* koyu üstü ikincil metin */

  /* Durum renkleri (B2B: sade tut) */
  --color-success:       #15803d;
  --color-danger:        #b91c1c;

  /* Semantik atamalar */
  --color-text:          var(--color-ink);
  --color-heading:       var(--color-ink);
  --color-link:          var(--color-ink);
  --focus-ring:          0 0 0 3px rgba(245, 197, 24, 0.55);

  /* ----- TİPOGRAFİ ------------------------------------------------------ */
  /* Geometrik grotesk: Inter, sistem fallback'li (framework değil, sadece font) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Modüler ölçek (~1.20 minor third), 16px taban */
  --fs-50:  0.75rem;   /* 12 — etiket/eyebrow */
  --fs-75:  0.875rem;  /* 14 — yardımcı metin */
  --fs-100: 1rem;      /* 16 — gövde */
  --fs-200: 1.125rem;  /* 18 — büyük gövde */
  --fs-300: 1.375rem;  /* 22 — alt başlık */
  --fs-400: 1.75rem;   /* 28 — h3 */
  --fs-500: 2.25rem;   /* 36 — h2 */
  --fs-600: 3rem;      /* 48 — h1 */
  --fs-700: 3.75rem;   /* 60 — hero (geniş ekran) */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.55;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --tracking-tight:  -0.02em;  /* büyük başlıklar */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* eyebrow / uppercase etiket */

  /* ----- BOŞLUK (4px tabanlı skala) ------------------------------------ */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ----- DÜZEN ---------------------------------------------------------- */
  --container:      1400px;
  --container-wide: 1520px;
  --gutter:         var(--space-6);

  /* ----- KÖŞE YARIÇAPI -------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* ----- GÖLGE KATMANLARI (3 kademe + odak) ---------------------------- */
  --shadow-1: 0 1px 2px rgba(22, 22, 26, 0.06),
              0 1px 1px rgba(22, 22, 26, 0.04);
  --shadow-2: 0 4px 12px rgba(22, 22, 26, 0.08),
              0 2px 4px rgba(22, 22, 26, 0.05);
  --shadow-3: 0 16px 40px rgba(22, 22, 26, 0.14),
              0 6px 14px rgba(22, 22, 26, 0.08);

  /* ----- KENAR ÇİZGİSİ -------------------------------------------------- */
  --border-thin:  1px solid var(--color-border);
  --border-base:  1px solid var(--color-border-strong);

  /* ----- HAREKET: emil easing eğrileri --------------------------------- */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);     /* giriş/çıkış, güçlü */
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);    /* ekran içi hareket */
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);     /* iOS drawer eğrisi */
  --ease-color:   ease;                                /* renk/opacity geçişi */

  /* Süreler (emil: UI < 300ms) */
  --dur-press:   140ms;  /* :active geri bildirim */
  --dur-fast:    180ms;  /* hover / küçük geçiş */
  --dur-base:    220ms;  /* dropdown / kart */
  --dur-drawer:  300ms;  /* drawer giriş */
  --dur-drawer-exit: 220ms; /* drawer çıkış (asimetrik, daha hızlı) */

  /* ----- KATMAN (z-index) ---------------------------------------------- */
  --z-header:   100;
  --z-overlay:  900;
  --z-drawer:   1000;
  --z-toast:    1100;
}