/* =============================================================================
 * GAUS — Kanonik Tasarım Token'ları  (tek kaynak / single source of truth)
 * -----------------------------------------------------------------------------
 * Faz 0. Yalnızca YENİ `--g-*` isim uzayı kullanılır; mevcut `--earth-*` / `--n-*`
 * / `.lz*` değerleriyle ÇAKIŞMAZ, bu yüzden bu dosyayı linklemek hiçbir ekranda
 * görsel değişiklik yaratmaz. Sonraki fazlarda kod tabanındaki elle yazılmış
 * (hardcoded) değerler tek tek bu token'lara taşınacak.
 *
 * GAUS marka dili: sıcak toprak + parşömen, altın vurgu, serif başlık.
 * ============================================================================= */

:root {
  /* --- Renk paleti: kahve rampası (ink → yüzey) ------------------------------ */
  --g-brown-900: #2c1810; /* en koyu — metin/ink */
  --g-brown-800: #3c2f25;
  --g-brown-700: #5a3a28;
  --g-brown-600: #6b5642;
  --g-brown-500: #8b4513; /* MARKA kahvesi (saddle brown) */
  --g-brown-400: #a0522d;
  --g-brown-300: #b0906e;

  /* Altın / vurgu rampası */
  --g-gold-500: #b8860b;
  --g-gold-400: #cd853f;
  --g-gold-300: #daa520;

  /* Parşömen / krem yüzey rampası (koyu → açık) */
  --g-cream-500: #d4c4a4;
  --g-cream-400: #e2d0b4;
  --g-cream-300: #f2e8d5;
  --g-cream-200: #f4e4bc;
  --g-cream-100: #fffdf5;

  /* --- Anlamsal (semantic) roller ------------------------------------------- */
  --g-primary:        var(--g-brown-500);
  --g-primary-hover:  var(--g-brown-400);
  --g-primary-active: var(--g-brown-700);
  --g-accent:         var(--g-gold-400);
  --g-accent-strong:  var(--g-gold-300);

  --g-ink:        var(--g-brown-900); /* birincil metin */
  --g-ink-soft:   var(--g-brown-700); /* ikincil metin */
  --g-on-primary: var(--g-cream-200); /* kahve zemin üstü metin */

  --g-surface:    var(--g-cream-200); /* panel/kart yüzeyi */
  --g-surface-2:  var(--g-cream-400); /* girinti/ikincil yüzey */
  --g-border:     var(--g-brown-500); /* standart kenar rengi */

  /* Durum renkleri — sıcak toprak paletiyle uyumlu (soğuk mavi/yeşil DEĞİL) */
  --g-success: #6b8e23; /* zeytin yeşili — onay/ekle */
  --g-danger:  #b0412a; /* tuğla kırmızısı — sil/uyarı */
  --g-warn:    #c9821f; /* amber */

  /* Örtü (scrim) */
  --g-scrim: rgba(44, 24, 16, 0.60);

  /* --- Aralık ölçeği (4/8 tabanlı) ------------------------------------------ */
  --g-sp-1: 4px;
  --g-sp-2: 8px;
  --g-sp-3: 12px;
  --g-sp-4: 16px;
  --g-sp-5: 20px;
  --g-sp-6: 24px;
  --g-sp-8: 32px;
  --g-sp-10: 40px;

  /* --- Köşe yarıçapı --------------------------------------------------------- */
  --g-r-sm: 6px;    /* butonlar, küçük kontroller */
  --g-r-md: 12px;   /* paneller, modallar */
  --g-r-lg: 16px;   /* büyük kartlar */
  --g-r-pill: 999px;
  --g-r-circle: 50%;

  /* --- Kenar kalınlığı ------------------------------------------------------- */
  --g-bd: 2px;         /* standart */
  --g-bd-strong: 3px;  /* vurgulu panel kenarı */

  /* --- Tipografi ------------------------------------------------------------- */
  --g-font-display: 'Cinzel', serif;             /* başlıklar */
  --g-font-serif:   'IM Fell English', serif;    /* gövde/serif (DİKKAT: 'Fell English' geçersizdir) */
  --g-font-ui:      system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* form/arayüz */
  --g-font-mono:    ui-monospace, 'Courier New', monospace; /* koordinat/veri */

  --g-fs-xs: 12px;
  --g-fs-sm: 14px;
  --g-fs-base: 16px;
  --g-fs-lg: 20px;
  --g-fs-xl: 24px;
  --g-fs-2xl: 32px;
  --g-fs-3xl: 48px;
  --g-fs-display: 72px;

  --g-lh-tight: 1.2;
  --g-lh-normal: 1.5;
  --g-lh-relaxed: 1.6;
  --g-ls-label: 1px; /* küçük etiket/caps harf aralığı */

  /* --- z-index ölçeği (çakışmasız katmanlar) -------------------------------- */
  --g-z-base: 1;
  --g-z-hud: 100;      /* sahne üstü HUD öğeleri */
  --g-z-panel: 900;    /* sabit paneller (infopanel vb.) */
  --g-z-topbar: 1000;  /* üst çubuk + açılır menüler tabanı */
  --g-z-dropdown: 1100;
  --g-z-overlay: 4000; /* modal arka örtüsü */
  --g-z-modal: 5000;   /* modal içeriği */
  --g-z-toast: 9000;   /* bildirimler */
  --g-z-max: 10000;    /* yükleme ekranı / en üst */

  /* --- Hareket (motion) ------------------------------------------------------ */
  --g-dur-fast: 120ms;
  --g-dur-base: 200ms;
  --g-dur-slow: 300ms;
  --g-ease-out:    cubic-bezier(0.22, 0.70, 0.30, 1);   /* giriş/çıkış — güçlü */
  --g-ease-in-out: cubic-bezier(0.40, 0.00, 0.20, 1);
  --g-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* canlı/yaylı */

  /* --- Yükselti (gölge) & cam ----------------------------------------------- */
  --g-shadow-sm: 0 2px 8px rgba(60, 47, 37, 0.18);
  --g-shadow-md: 0 8px 24px rgba(60, 47, 37, 0.28);
  --g-shadow-lg: 0 18px 48px rgba(60, 47, 37, 0.34);
  --g-blur: 16px; /* tek tip backdrop-filter bulanıklığı */
}

/* Erişilebilirlik temeli: "hareketi azalt" tercihi.
 * Token süreleri düşürülür + tüm animasyon/geçişler neredeyse anında biter.
 * (Opaklık/renk korunur; yalnızca hareket kaldırılır — erişilebilir kalıp.) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --g-dur-fast: 1ms;
    --g-dur-base: 1ms;
    --g-dur-slow: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}