/* ==========================================================================
   tokens.css — ClientPoster tasarim sistemi (Modul 6)

   ⚖️ KAYNAK: sunum/assets/css/tokens.css
   Prototip Faz 0-7 sonunda SARTNAME olarak DONDURULDU; bu dosya oradan
   tasindi. Kopya olmasi bilincli: prototip artik degismiyor, urun evriliyor.
   Sapma tek yonlu ve OLCULUYOR — TasarimSistemiTestleri marka rengini,
   gradyani, AI vurgusunu ve uc font ailesini iki dosyada karsilastiriyor.

   🔴 PROJE KURALI 1: CDN yok. Bu dosya projeyle sunulur.
   ========================================================================== */

/* ==========================================================================
   tokens.css — Tasarım Belirteçleri
   MARKA YÖNÜ: "V2 · Renkli Yüzeyler"
   Space Grotesk (çatalsız, tek aile) · mor-lila gradyan · renkli kart yüzeyleri

   İki katmanlı yapı:
     Katman 1 — İlkel skalalar (temadan bağımsız, ASLA override edilmez)
     Katman 2 — Anlamsal takma adlar (koyu tema SADECE burayı değiştirir)
   ========================================================================== */

:root {
  /* ══════════ KATMAN 1: İLKEL SKALALAR ══════════ */

  /* --- Marka: mor / lila --- */
  --marka-50:  #F3F1FE;
  --marka-100: #E6E1FD;
  --marka-200: #CFC6FB;
  --marka-300: #B0A2F8;
  --marka-400: #8B78F6;
  --marka-500: #6D5BF5;   /* ana marka rengi */
  --marka-600: #5A46E0;
  --marka-700: #4736BC;
  --marka-800: #362A90;
  --lila-500:  #B95FD8;   /* gradyanın ikinci ucu */

  /* --- AI vurgusu: elektrik camgöbeği ---
     Yalnızca AI'a özgü öğelerde kullanılır: kredi/token sayacı, üretim
     durumu, model rozetleri, "AI ile üret" eylemleri. Marka morundan ayrı
     bir sinyal olması, kullanıcının "burada makine çalışıyor"u anlamasını
     sağlar. Hiçbir platform renginde yok. */
  --ai-50:   #E0FAFE;
  --ai-100:  #B8F2FB;
  --ai-400:  #2ED9F0;
  --ai-500:  #00BDD6;
  --ai-600:  #0499AE;
  --ai-700:  #07778A;

  /* --- Nötr: hafif mor-gri (saf gri değil; marka ile aynı sıcaklıkta) --- */
  --notr-0:   #FFFFFF;
  --notr-25:  #FAFAFD;
  --notr-50:  #F7F7FB;
  --notr-100: #F1F1F7;
  --notr-200: #EAEAF2;   /* çizgi */
  --notr-300: #D8D8E4;
  --notr-400: #A8ACBC;
  --notr-500: #8A8FA3;
  --notr-600: #6B7080;
  --notr-700: #45495A;
  --notr-800: #2A2D3D;
  --notr-900: #191B2A;   /* metin */

  /* --- Durum --- */
  --basari-50:  #DEF7EC;  --basari-500: #12A05F;  --basari-700: #0B7A44;
  --uyari-50:   #FDEEE0;  --uyari-500:  #E8823A;  --uyari-700:  #A85A1B;
  --hata-50:    #FDECEF;  --hata-500:   #E5384F;  --hata-700:   #B01E33;
  --bilgi-50:   #DFF3FD;  --bilgi-500:  #1C93D4;  --bilgi-700:  #0E5F8C;

  /* --- Renkli kart yüzeyleri ---
     Her istatistik kartı kendi rengini taşır. Dört aile: mor, mavi, yeşil,
     turuncu. Zemin çok açık, çip doygun, metin koyu — kontrast korunur. */
  --mor-zemin:     linear-gradient(160deg, #EDEAFE, #F6F4FF);
  --mor-cizgi:     #E0DAFC;  --mor-cip: #6D5BF5;  --mor-metin: #2E2560;  --mor-alt: #6B6480;
  --mavi-zemin:    linear-gradient(160deg, #DFF3FD, #F0FAFE);
  --mavi-cizgi:    #C9E8F8;  --mavi-cip: #1C93D4; --mavi-metin: #0E4763; --mavi-alt: #5B7386;
  --yesil-zemin:   linear-gradient(160deg, #DEF7EC, #F0FCF6);
  --yesil-cizgi:   #BFEDD8;  --yesil-cip: #12A05F; --yesil-metin: #0B4D2E; --yesil-alt: #4A7A61;
  --turuncu-zemin: linear-gradient(160deg, #FDEEE0, #FEF8F2);
  --turuncu-cizgi: #F8DCC2;  --turuncu-cip: #E8823A; --turuncu-metin: #6E3812; --turuncu-alt: #8C6247;

  /* --- Kanal renkleri: platform kimlikleri (dokunulmaz) --- */
  --kanal-linkedin:  #0A66C2;
  --kanal-instagram: #E1306C;
  --kanal-facebook:  #1877F2;
  --kanal-youtube:   #FF0000;
  --kanal-tiktok:    #111111;
  --kanal-x:         #0F1419;
  --instagram-gradyan: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);

  /* ══════════ TİPOGRAFİ ══════════
     Üç aile, hepsi çatalsız. AI ürününün "mühendislik" tonunu taşıyan yapı:
       baslik -> Space Grotesk: makinemsi, teknik, karakterli rakamlar
     🔴 TEK AİLE — KULLANICI KARARI (2026-09-04). Önceden ÜÇ aile vardı
     (Space Grotesk / Outfit / JetBrains Mono). Kullanıcı canlı üründeki
     başlık fontunu görüp "tüm fontlar bu font olmalı, her yerdeki" dedi;
     ardından sınırı da çizdi: "kalın olan yerler kalın, normal olan yerler
     normal olsun; font büyüklüğü olduğu gibi kalsın, FONT ADI değişsin".
     ⚠️ Bu yüzden bu değişiklikte tek bir font-weight ve tek bir font-size
     DEĞİŞMEDİ — yalnızca aile adı.
     ⚠️ ÜÇ TOKEN DE KORUNDU, tek token'a indirgenmedi: adları ürünün her
     yerinde kullanılıyor ve birleştirmek yüzlerce çağrı yerini değiştirmek
     olurdu; ayrıca ileride biri yeniden ayrışmak isterse tek yer değişir.
     ⚠️ mono artık EŞ GENİŞLİKLİ DEĞİL. `.mono` kuralındaki
     `font-variant-numeric: tabular-nums` BİLEREK bırakıldı: Space Grotesk
     tabular rakam taşıyorsa sayı hizası korunur, taşımıyorsa kural sessizce
     yok sayılır — kaldırmak hizayı KESİN olarak kaybettirirdi.
     fontlar.css içinde base64 gömülü (file:// kısıtı). */
  --font-baslik: 'Space Grotesk', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-govde:  'Space Grotesk', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:   'Space Grotesk', 'Cascadia Mono', Consolas, 'SF Mono', monospace;

  /* Ölçek — taban 15px */
  --ts-xs:   12px;  --lh-xs:   16px;
  --ts-sm:   13px;  --lh-sm:   18px;
  --ts-md:   15px;  --lh-md:   22px;
  --ts-lg:   17px;  --lh-lg:   24px;
  --ts-xl:   20px;  --lh-xl:   28px;
  --ts-2xl:  25px;  --lh-2xl:  32px;
  --ts-3xl:  32px;  --lh-3xl:  38px;
  --ts-4xl:  46px;  --lh-4xl:  52px;

  /* Geometrik aile büyük puntoda sıkılaştırma ister */
  --harf-sik:  -0.03em;
  --harf-orta: -0.02em;

  /* ══════════ ÖLÇÜ ══════════ */
  --b-1: 4px;   --b-2: 8px;   --b-3: 12px;  --b-4: 16px;
  --b-5: 20px;  --b-6: 24px;  --b-8: 32px;  --b-10: 40px;
  --b-12: 48px; --b-16: 64px;

  --r-sm: 6px;  --r-md: 9px;  --r-lg: 14px;  --r-xl: 18px;  --r-tam: 999px;

  --kenar-genislik: 250px;
  --ust-yukseklik: 58px;
  --icerik-maks: 1440px;
  --okuma-maks: 800px;

  --gecis-hizli: 120ms cubic-bezier(.4,0,.2,1);
  --gecis-orta: 200ms cubic-bezier(.4,0,.2,1);

  /* ══════════ KATMAN 2: ANLAMSAL TAKMA ADLAR (açık tema) ══════════ */
  --zemin:        var(--notr-50);
  --yuzey:        var(--notr-0);
  --yuzey-2:      var(--notr-25);
  --yuzey-3:      var(--notr-100);
  --cizgi:        var(--notr-200);
  --cizgi-guclu:  var(--notr-300);
  --metin:        var(--notr-900);
  --metin-2:      var(--notr-600);
  --metin-3:      var(--notr-500);
  --metin-ters:   var(--notr-0);

  --marka:        var(--marka-500);
  --marka-koyu:   var(--marka-600);
  --marka-uzeri:  #FFFFFF;
  --marka-zayif:  var(--marka-50);
  --marka-cizgi:  var(--marka-200);
  --marka-gradyan:      linear-gradient(135deg, var(--marka-500), #8B63F6);
  --marka-gradyan-genis: linear-gradient(115deg, var(--marka-500) 0%, #8B63F6 48%, var(--lila-500) 100%);

  --ai:           var(--ai-500);      --ai-zayif:     var(--ai-50);
  --ai-gradyan:   linear-gradient(135deg, var(--ai-500), var(--marka-500));

  --basari:       var(--basari-500);  --basari-zayif: var(--basari-50);
  --uyari:        var(--uyari-500);   --uyari-zayif:  var(--uyari-50);
  --hata:         var(--hata-500);    --hata-zayif:   var(--hata-50);
  --bilgi:        var(--bilgi-500);   --bilgi-zayif:  var(--bilgi-50);

  --golge-1: 0 1px 2px rgba(25,27,42,.05);
  --golge-2: 0 4px 14px -3px rgba(25,27,42,.09);
  --golge-3: 0 18px 44px -10px rgba(25,27,42,.20);
  --golge-marka: 0 6px 16px -4px rgba(109,91,245,.55);
  --odak-halka: 0 0 0 3px var(--marka-200);
}

/* ══════════ KOYU TEMA — sadece anlamsal katman değişir ══════════ */
[data-tema="koyu"] {
  --zemin:        #14141F;
  --yuzey:        #1C1C2B;
  --yuzey-2:      #232336;
  --yuzey-3:      #2C2C42;
  --cizgi:        #2E2E45;
  --cizgi-guclu:  #3D3D58;
  --metin:        #EDEDF5;
  --metin-2:      #A5A8BC;
  --metin-3:      #7A7D93;
  --metin-ters:   #191B2A;

  --marka:        var(--marka-400);
  --marka-koyu:   var(--marka-300);
  --marka-uzeri:  #16112F;
  --marka-zayif:  rgba(109,91,245,.18);
  --marka-cizgi:  rgba(109,91,245,.40);

  /* Renkli kart yüzeyleri koyu temada saydam tonlara döner */
  --mor-zemin:     linear-gradient(160deg, rgba(109,91,245,.20), rgba(109,91,245,.07));
  --mor-cizgi:     rgba(109,91,245,.34);  --mor-metin: #C9C0FC;  --mor-alt: #9A93B8;
  --mavi-zemin:    linear-gradient(160deg, rgba(28,147,212,.20), rgba(28,147,212,.07));
  --mavi-cizgi:    rgba(28,147,212,.34);  --mavi-metin: #A9DBF5; --mavi-alt: #86A5B8;
  --yesil-zemin:   linear-gradient(160deg, rgba(18,160,95,.20), rgba(18,160,95,.07));
  --yesil-cizgi:   rgba(18,160,95,.34);   --yesil-metin: #93E3BC; --yesil-alt: #7FA894;
  --turuncu-zemin: linear-gradient(160deg, rgba(232,130,58,.20), rgba(232,130,58,.07));
  --turuncu-cizgi: rgba(232,130,58,.34);  --turuncu-metin: #F5C39A; --turuncu-alt: #B79279;

  --ai:     #2ED9F0;  --ai-zayif:     rgba(46,217,240,.16);

  --basari: #34C77B;  --basari-zayif: rgba(52,199,123,.16);
  --uyari:  #F0A35C;  --uyari-zayif:  rgba(240,163,92,.16);
  --hata:   #F26A7E;  --hata-zayif:   rgba(242,106,126,.16);
  --bilgi:  #4FB3E8;  --bilgi-zayif:  rgba(79,179,232,.16);

  --golge-1: none;
  --golge-2: 0 4px 16px rgba(0,0,0,.42);
  --golge-3: 0 20px 48px rgba(0,0,0,.58);
  --golge-marka: 0 6px 18px -4px rgba(109,91,245,.5);
  --odak-halka: 0 0 0 3px rgba(139,120,246,.45);

  --kanal-tiktok: #EDEDF5;
  --kanal-x:      #EDEDF5;
}