/* =====================================================================
 * tokens.css — TASARIM DEĞİŞKENLERİ
 * ---------------------------------------------------------------------
 * Tüm renk, tipografi, spacing, radius, gölge ve motion değerlerini
 * tek bir kaynaktan yönetir. Bir bileşende doğrudan onaltılık/px
 * değeri yazmak yerine bu değişkenler kullanılır.
 *
 * İçerik haritası:
 *   - Renk paleti (canvas, ink, sage, gold, earth, durum renkleri)
 *   - Tipografi ölçeği (serif başlıklar, sans gövde, mono meta)
 *   - Spacing ritmi (4px tabanlı)
 *   - Radius ailesi (4-12px arası, sade)
 *   - Gölge hiyerarşisi
 *   - Motion: süre, easing
 * ===================================================================== */

:root {
  /* ------------------------------------------------------------------
   * 1. RENK PALETİ
   * Kırık beyaz ana yüzey, antrasit metin, adaçayı ve mat altın
   * vurgu. Toprak kahve destekleyici; koyu antrasit sadece footer ve
   * belirli bölümler için ayrılmıştır.
   * ------------------------------------------------------------------ */
  --canvas:           #F8F6F1;   /* Ana arka plan — kırık beyaz */
  --canvas-alt:       #EEE9DF;   /* Alternatif yüzey — açık taş/bej */
  --canvas-deep:      #E6E0D2;   /* Biraz daha koyu bölüm zeminleri */
  --surface:          #FFFFFF;   /* Kart / panel yüzeyi */
  --surface-translucent: rgba(255, 255, 255, 0.72);

  --ink:              #292B29;   /* Birincil metin — antrasit */
  --ink-secondary:    #4A4B47;   /* İkincil metin */
  --ink-tertiary:     #73726C;   /* Üçüncül metin / metadata */
  --ink-inverse:      #F8F6F1;   /* Koyu yüzeylerde metin */

  --sage:             #747F70;   /* İkincil — adaçayı yeşili */
  --sage-soft:        #A4AC9C;   /* Açılmış adaçayı */
  --gold:             #B49B73;   /* Vurgu — mat altın */
  --gold-soft:        #D2BE99;   /* Açılmış altın */
  --earth:            #67574A;   /* Destekleyici — toprak kahve */

  --line-strong:      rgba(41, 43, 41, 0.32);
  --line:             rgba(41, 43, 41, 0.18);
  --line-soft:        rgba(41, 43, 41, 0.08);

  --state-success:    #5B7553;
  --state-warning:    #B8862D;
  --state-danger:     #8B3A2E;

  /* Koyu yüzeyler (yalnızca footer ve vurgu bölümleri) */
  --dark-0:           #1B1D1B;
  --dark-1:           #262826;
  --dark-2:           #303231;

  /* ------------------------------------------------------------------
   * 2. TİPOGRAFİ
   * Serif: zarif, editoryal başlıklar için (EB Garamond benzeri).
   * Sans:  modern, uzun metin için (Inter).
   * Mono:  teknik metadata, DOI, ISBN, kod parçaları için.
   *
   * Değişken font kullanılmaz; ağırlıklar elle seçilir.
   * ------------------------------------------------------------------ */
  --font-serif:  "EB Garamond", "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:   "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tipografik ölçek (desktop) */
  --fs-micro:    0.6875rem;  /* 11px — meta etiket, eyebrow */
  --fs-xs:       0.75rem;    /* 12px — caption, breadcrumb */
  --fs-sm:       0.875rem;   /* 14px — UI secondary */
  --fs-base:     1rem;       /* 16px — body */
  --fs-md:       1.125rem;   /* 18px — prominent body */
  --fs-lg:       1.375rem;   /* 22px — alt başlık */
  --fs-xl:       1.75rem;    /* 28px — bölüm başlığı */
  --fs-2xl:      2.25rem;    /* 36px — sayfa başlığı */
  --fs-3xl:      3rem;       /* 48px — büyük başlık */
  --fs-4xl:      3.75rem;    /* 60px — hero başlık */
  --fs-5xl:      5rem;       /* 80px — manifest başlık */

  /* Satır yükseklikleri */
  --lh-display:  1.02;
  --lh-heading:  1.12;
  --lh-tight:    1.28;
  --lh-body:     1.6;
  --lh-loose:    1.75;

  /* Harf aralığı */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em; /* Üst etiketler için (UPPERCASE) */

  /* Font ağırlıkları (aşırı kalından kaçınma) */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ------------------------------------------------------------------
   * 3. SPACING RİTMİ
   * 4px tabanlı, 8'in katları tercih edilir. Bölümler arası ritim
   * mekanik py-24 şablonundan kaçınmak için bilinçli değişir.
   * ------------------------------------------------------------------ */
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-7:   2rem;      /* 32 */
  --space-8:   2.5rem;    /* 40 */
  --space-9:   3rem;      /* 48 */
  --space-10:  4rem;      /* 64 */
  --space-11:  5rem;      /* 80 */
  --space-12:  6rem;      /* 96 */
  --space-13:  8rem;      /* 128 */
  --space-14:  10rem;     /* 160 */

  /* Konteyner genişlikleri (içeriğe göre seçilir) */
  --w-prose:    44rem;     /* 704 — uzun okuma metni */
  --w-form:     30rem;     /* 480 — form */
  --w-app:      64rem;     /* 1024 — uygulama içeriği */
  --w-wide:     80rem;     /* 1280 — geniş içerik */
  --w-full:     90rem;     /* 1440 — en geniş */

  /* ------------------------------------------------------------------
   * 4. KÖŞE YUMUŞATMA
   * Çoğu yüzeyde 6–10px. Pill sadece gerçek etiketler için. Tüm
   * kartları aynı büyük yarıçapa zorlamak yerine hiyerarşiye göre
   * değişir.
   * ------------------------------------------------------------------ */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-pill: 9999px;

  /* ------------------------------------------------------------------
   * 5. GÖLGE HİYERARŞİSİ
   * Yüzeyler çoğunlukla sadece ince ayraç + ton farkıyla ayrılır.
   * Ağır gölge yalnızca yüzen katman (lightbox, popover) için.
   * ------------------------------------------------------------------ */
  --shadow-hairline: 0 1px 0 rgba(41, 43, 41, 0.05);
  --shadow-1:    0 1px 2px rgba(41, 43, 41, 0.06);
  --shadow-2:    0 2px 4px rgba(41, 43, 41, 0.06), 0 1px 2px rgba(41, 43, 41, 0.04);
  --shadow-3:    0 6px 14px rgba(41, 43, 41, 0.08), 0 2px 4px rgba(41, 43, 41, 0.05);
  --shadow-4:    0 18px 40px rgba(20, 20, 19, 0.14), 0 4px 10px rgba(20, 20, 19, 0.06);
  --shadow-focus: 0 0 0 3px rgba(180, 155, 115, 0.35);

  /* ------------------------------------------------------------------
   * 6. MOTION
   * Yumuşak, fiziksel, kısıtlı animasyon. prefers-reduced-motion
   * motion.css içinde sıfırlanır.
   * ------------------------------------------------------------------ */
  --dur-instant:  90ms;
  --dur-fast:     150ms;
  --dur-base:     220ms;
  --dur-medium:   320ms;
  --dur-slow:     480ms;
  --dur-narrative: 720ms;

  --ease-out-soft:  cubic-bezier(0.16, 1, 0.3, 1);     /* giriş */
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);        /* standart */
  --ease-in-soft:   cubic-bezier(0.4, 0, 1, 1);        /* çıkış */
  --ease-spring:    cubic-bezier(0.34, 1.36, 0.64, 1); /* dikkatli yay */

  --stagger: 60ms;   /* liste/sıralı öğeler için gecikme adımı */

  /* ------------------------------------------------------------------
   * 7. Z-INDEKS
   * ------------------------------------------------------------------ */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 900;
  --z-modal:   1000;
}

/* Koyu bölümler için otomatik kontrast (örn. footer) */
.be-dark,
.is-dark {
  --ink:           #F2EFE6;
  --ink-secondary: #C9C5B7;
  --ink-tertiary:  #8E8B7E;
  --line-strong:   rgba(242, 239, 230, 0.32);
  --line:          rgba(242, 239, 230, 0.18);
  --line-soft:     rgba(242, 239, 230, 0.08);
}