/* Tasarım token'ları. Renk, tipografi, boşluk ve biçim tek yerde.
   Değiştirmek istediğin her görsel sabit burada; bileşen CSS'lerinde
   ham değer yazma. */
:root {
  /* Renk. Gerekçe ve okunabilirlik oranları:
     docs/superpowers/specs/2026-09-16-gorsel-kimlik-design.md §1 */
  --brand: #80b435;      /* süsleme, çerçeve, ikon — üzerine metin YAZILMAZ (beyazla 2,6:1) */
  --brand-deep: #4f7b1c; /* düğme ve şerit zemini — beyaz metinle 5,08:1 */
  --brand-ink: #2e4a12;  /* başlık ve gezinme metni */
  --tint: #f1f7e8;       /* hero bandı, kutular, özet kartı, alt bilgi */
  --tint-2: #f6f9f1;     /* arama kutusu, ikincil zemin */
  --accent: #c0561f;     /* fiyat, vurgulu kelime — beyazda 4,58:1; --tint üzerinde yalnız 24px+ */
  --honey: #f4a52a;      /* yalnız küçük etiket zemini */
  --honey-ink: #3a2400;
  --on-brand: #ffffff;   /* --brand-deep ve --accent zeminler üzerindeki metin */

  --ink: #1c2a12;
  --ink-soft: #4a5a3a;
  --line: #dfeccb;
  --surface: #ffffff;
  --danger: #c0392b;
  --danger-soft: #fdecea;

  /* Gölge */
  --shadow-card: 0 4px 0 var(--tint);
  --shadow-btn: 0 3px 0 var(--brand-ink);
  --shadow-lift: 0 10px 30px rgba(46, 74, 18, .18);
  --shadow-tag: 0 3px 0 rgba(58, 36, 0, .25);
  /* Çekmece ve lightbox arkasındaki örtü — siyah yerine koyu yeşil ton. */
  --overlay-soft: rgba(28, 42, 18, .45);
  --overlay-strong: rgba(28, 42, 18, .78);

  /* Doku ve süsleme. Görsel dosyası yok, bayt maliyeti sıfır. */
  --texture-dots: radial-gradient(rgba(79, 123, 28, .12) 1px, transparent 1px);
  --texture-dots-size: 7px 7px;
  --ornament-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2380b435' d='M20 4C10 4 4 10 4 20c6-1 10-4 12-8-3 2-6 3-9 3 5-2 9-6 13-11z'/%3E%3C/svg%3E");

  /* Tipografi — sistem font yığını, sıfır ağ isteği */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Başlık fontu siteden servis ediliyor (base.css @font-face). Google
     Fonts'tan çekilmiyor: ziyaretçi IP'si üçüncü tarafa gitmez. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.5625rem; /* 25px */
  --text-2xl: 1.9375rem;/* 31px */
  --text-3xl: 2.4375rem;/* 39px */

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

  /* Biçim */
  --radius-card: 16px;
  --radius-input: 10px;
  --radius-pill: 999px;
  --radius-btn: var(--radius-pill);

  --container: 1200px;
  --gutter: var(--space-4);

  /* Dokunma hedefi asgarisi */
  --tap: 44px;
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-5); }
}

/* Masaüstü tipografi basamağı. Mobil ölçek (16/20/25/31/39px) geniş
   ekranda küçük ve düz duruyor; her satır aynı ~1.25 oranını koruyarak
   büyütülüyor (taban ~18px, en büyük başlık ~44px — --text-3xl bu adım
   için tanımlanmıştı ama şimdiye kadar hiçbir yerde kullanılmıyordu).
   Yalnız boyut token'ları değişiyor; her kural zaten bunları tükettiği
   için tüm site tek yerden büyümüş oluyor. */
@media (min-width: 1024px) {
  :root {
    --text-base: 1.125rem;    /* 18px */
    --text-lg: 1.4063rem;     /* ~22.5px */
    --text-xl: 1.7578rem;     /* ~28px */
    --text-2xl: 2.1973rem;    /* ~35px */
    --text-3xl: 2.7466rem;    /* ~44px */
  }
}

/* Geniş ekranda konteyner genişliği. 1200px sabiti 1920px'te her
   kenarda ~360px boş bırakıyor; adım mütevazı tutuluyor, satır ölçüsü
   (okunabilirlik) hâlâ önemli — kenardan kenara değil. */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
}

/* Ürün ızgarası 1680px'te 4'ten 5 sütuna geçiyor (bkz. components.css);
   konteyner aynı noktada bir basamak daha büyümezse beşinci sütun kartları
   dört sütunluk hâlden fark edilir biçimde küçültür. 1640px, 1680px'te
   4 sütunla üretilen ~306px kart genişliğini 5 sütunla da koruyacak
   şekilde hesaplandı — pencere büyürken kart boyutu bu basamakta da
   sabit kalıyor. */
@media (min-width: 1680px) {
  :root { --container: 1640px; }
}