/* ============================================================================
   T-spektral-insa / D01-onlinesirketim-ajans  —  tokenlar.css
   "IŞIKTAN İNŞA" token katmanı  ·  BUILDER 1. GEÇİŞ (iskelet)

   TEZ (yeni): tek beyaz ışın → refraksiyonla 9 spektral ipliğe ayrılır →
   iplikler bir UI öğesini KURAR. "Beyaz ışın = ham; spektrum = kurulmuş."
   Renk = inşanın ürünü AMA hero'da ilk kareden itibaren DOLU/statik görünür
   (UY1 — brief madde 0/12). Eski "renk = onaydan sonra" tezi TERK EDİLDİ.

   ZEMİN: SİYAH birincil (--zemin:#0A0A0B). Beyaz-açıklık "nefes" bölgeleri
   [data-zemin="paper"] ile bölüm-kapsamlı çevrilir (sayfa-geneli TEMA TOGGLE YOK
   — UY3). Her iki zemin EŞİT özen görür; paper bölge kendi paper-hue tedavisini taşır.

   BAĞIMLILIK (Animasyon-Plus paketi 2. geçişte): paket `tokenlar-ek.css` ile
   color-mix ara-duraklar + ek imza token'ları EKLER, bu dosyayı EZMEZ. Bu dosya
   kendi köküdür; JS/paket olmadan da tam çalışır (statik son-kare ilkesi).

   9 hue × 2 zemin AA KANITI: her --hue-n-ink #0A0A0B üzerinde, her --hue-n
   #FBFBF9 üzerinde metin olarak ≥4.5:1 (değerler yorumda; kaynak: eski palet.mjs).
   ============================================================================ */

:root {
  /* ── İki zemin — eşit özen ────────────────────────────────────────────────── */
  --ink:   #0A0A0B;   /* mürekkep / birincil zemin */
  --paper: #FBFBF9;   /* kağıt / nefes bölgesi zemini */

  /* Aktif zemin/ön plan. VARSAYILAN = SİYAH (ink). Paper bölge aşağıda çevirir. */
  --zemin:    var(--ink);
  --murekkep: var(--paper);          /* metin / ön plan */

  /* Nötr + hatlar — mürekkepten türer, iki zeminde de dokuyla tutarlı kalır. */
  --notr:       color-mix(in srgb, var(--murekkep) 62%, var(--zemin));  /* ikincil metin AA */
  --notr-silik: color-mix(in srgb, var(--murekkep) 34%, var(--zemin));  /* dekoratif stroke */
  --hatt:       color-mix(in srgb, var(--murekkep) 20%, transparent);   /* ayraç (dolgun) */
  --hatt-koyu:  color-mix(in srgb, var(--murekkep) 38%, transparent);
  --cam:        color-mix(in srgb, var(--murekkep) 10%, transparent);   /* dolgun yüzey */
  --cam-2:      color-mix(in srgb, var(--murekkep) 15%, transparent);
  /* hue-tint dolu yüzey — kart/hücre zeminleri için (hairline yerine kütle) */
  --dolu-tint:  color-mix(in srgb, var(--cz-renk, var(--murekkep)) 14%, var(--cam));

  /* ── 9 HUE — KAĞIT varyantı (aydınlık zemin, koyu/okunur; paper bölgeler) ──── */
  --hue-1: #e60003; --hue-2: #9f6401; --hue-3: #5f7b00;
  --hue-4: #04833b; --hue-5: #07816f; --hue-6: #027c8f;
  --hue-7: #006deb; --hue-8: #8c06fe; --hue-9: #d400a4;

  /* ── 9 HUE — INK varyantı (karanlık zemin, parlak/glow; birincil) ─────────── */
  --hue-1-ink: #fe3d30; --hue-2-ink: #fea408; --hue-3-ink: #c0f50b;
  --hue-4-ink: #16ff7a; --hue-5-ink: #0affdc; --hue-6-ink: #0edfff;
  --hue-7-ink: #3186fe; --hue-8-ink: #a36afe; --hue-9-ink: #fe02c5;

  /* Aktif hue köprüsü — VARSAYILAN siyah zemin → glow varyant. [data-hue] okur. */
  --a1:var(--hue-1-ink); --a2:var(--hue-2-ink); --a3:var(--hue-3-ink);
  --a4:var(--hue-4-ink); --a5:var(--hue-5-ink); --a6:var(--hue-6-ink);
  --a7:var(--hue-7-ink); --a8:var(--hue-8-ink); --a9:var(--hue-9-ink);

  /* ── Tipografi ağırlıkları — İNŞA SEMANTİĞİ (varsayılan değil) ─────────────── */
  /* Space Grotesk değişken 300..700: "ham" ışın hafif (300) → "kurulmuş" katı (700).
     [data-wght-gecis] scrub'da bu ikisi arasında canlı tween'lenir. */
  --w-ham:       300;   /* ham/ışın hâli — display'in bekleyen kenarı */
  --w-kurulmus:  700;   /* kurulmuş/oturmuş — kararlılık */
  --w-orta:      500;   /* ara — spec etiket, aktif nav */
  --w-govde:     400;   /* Inter Tight gövde */
  /* Geriye-uyum (eski hook adları — bazı paylaşılan parçalar okuyabilir) */
  --w-cozulmemis: var(--w-ham);
  --w-cozulmus:   600;

  /* ── İmza easing + süreler ────────────────────────────────────────────────── */
  --ease-cikis: cubic-bezier(0.16, 1, 0.3, 1);        /* expo-out reveal */
  --ease-mikro: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-insa:  cubic-bezier(0.32, 0.9, 0.24, 1);     /* "oturma" — iplik yuvaya kurulur */
  --sure-reveal:  620ms;   /* 400-700 bandı */
  --sure-cozulme: 620ms;   /* Animasyon-Plus paketi bu adı bekler (hareket.css transition'ları) */
  --sure-mikro:   200ms;
  --stagger:      80ms;
  --w-etiket:     500;     /* paket/mono etiket ağırlığı (geriye-uyum) */

  /* ── Ölçek: spacing (8px kök) + tipografi + düzen ─────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  --t-micro: .72rem;
  --t-lead:  clamp(1.02rem, .96rem + .5vw, 1.22rem);
  --t-h3:    clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  --t-h2:    clamp(1.7rem, 1.3rem + 2vw, 2.6rem);
  --t-h1:    clamp(2.3rem, 1.6rem + 3.6vw, 4.1rem);
  --t-mega:  clamp(3rem, 1.4rem + 8vw, 7rem);          /* oversized editoryal an */

  --wrap:   1200px;
  --wrap-dar: 760px;
  --gutter: clamp(20px, 5vw, 56px);

  /* ── Tipografi aileleri (brief madde 5) ───────────────────────────────────── */
  --font-display: "Space Grotesk", system-ui, "Segoe UI", sans-serif;
  --font-govde:   "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* ── BEYAZ-AÇIKLIK NEFES BÖLGESİ — bölüm-kapsamlı zemin çevirimi ──────────────
   UY3: sayfa toggle YOK; bu yalnızca TASARLANMIŞ nefes bölgeleri içindir.
   Zemin+ön plan+aktif hue'lar paper varyantına döner (eşit özen).
   ÖNEMLİ: türetilmiş nötr/hat/cam tokenları BURADA YENİDEN yazılmak ZORUNDA.
   Custom property'ler bildirildikleri öğede hesaplanır: :root'taki --notr, oradaki
   (siyah zemin) --murekkep ile çözülür ve çocuklara O HÂLİYLE inerse — yalnızca
   --murekkep'i çevirmek --notr/--hatt/--cam'ı çevirmez, kağıt yüzeyde açık-gri
   metin (okunmaz) bırakırdı. Aynı formüller, çevrilmiş mürekkep/zemin ile. */
[data-zemin="paper"] {
  --zemin:    var(--paper);
  --murekkep: var(--ink);
  --a1:var(--hue-1); --a2:var(--hue-2); --a3:var(--hue-3);
  --a4:var(--hue-4); --a5:var(--hue-5); --a6:var(--hue-6);
  --a7:var(--hue-7); --a8:var(--hue-8); --a9:var(--hue-9);
  --notr:       color-mix(in srgb, var(--ink) 62%, var(--paper));   /* ≈5.6:1 (AA) */
  --notr-silik: color-mix(in srgb, var(--ink) 34%, var(--paper));   /* dekoratif */
  --hatt:       color-mix(in srgb, var(--ink) 16%, transparent);
  --hatt-koyu:  color-mix(in srgb, var(--ink) 30%, transparent);
  --cam:        color-mix(in srgb, var(--ink) 6%,  transparent);
  --cam-2:      color-mix(in srgb, var(--ink) 10%, transparent);
  --dolu-tint:  color-mix(in srgb, var(--cz-renk, var(--ink)) 12%, var(--paper));
}
/* KARDEŞ HOOK: atmosfer.css'teki [data-mod="paper"] BÖLÜM-ölçekli paper nefes
   bölgesidir (zemin/blend/scrim dahil, kapsam+yaklaşım sayfalarında kullanımda) ve
   aynı token değerlerini taşır. Buradaki [data-zemin="paper"] ise ÖĞE-ölçekli
   çevirimdir (ör. /sablonlar/ kağıt kartları): yalnız tokenları çevirir, zemin/
   blend kurmaz. Değerler bilerek AYNI — birini değiştirirken diğerini de güncelle. */

/* [data-hue="n"] → aktif hue'sunu --cz-renk olarak taşır (INHERIT: kap → çocuk).
   Not: "cz" adı geriye-uyum içindir; yeni tezde bu "spektral hue köprüsü"dür. */
[data-hue="1"]{--cz-renk:var(--a1)} [data-hue="2"]{--cz-renk:var(--a2)}
[data-hue="3"]{--cz-renk:var(--a3)} [data-hue="4"]{--cz-renk:var(--a4)}
[data-hue="5"]{--cz-renk:var(--a5)} [data-hue="6"]{--cz-renk:var(--a6)}
[data-hue="7"]{--cz-renk:var(--a7)} [data-hue="8"]{--cz-renk:var(--a8)}
[data-hue="9"]{--cz-renk:var(--a9)}