@mesgflow/ui-kit 0.6.0

package/tokens/color.css

@@ -0,0 +1,693 @@
+/*
+ * mesgflow — renk token'ları: ham rampalar, rol katmanı (light/dark takas),
+ * seçim rengi. Dark mode class tabanlı (`.dark`) — bkz. kök `tokens.css`
+ * doc yorumu, kurulum notları orada.
+ *
+ * `@custom-variant dark` BURADA — bu dosya `tokens.css`'in ilk import'u,
+ * `dark:` varyantı geri kalan token dosyalarında (motion/elevation) da
+ * kullanılmadan önce tanımlanmış olması gerekiyor.
+ *
+ * `.light` — koyu bir sayfanın İÇİNDE açık bir ada (veya tersi: açık sayfada
+ * `.dark` koyu bir hero bölümü) kurmak için. Rol katmanının `:root` bloğu
+ * `.light`'a da uygulanır; `dark:` varyantı `.dark .light` altında
+ * DEVRE DIŞI kalır. Tek seviye iç içe geçme desteklenir (koyu → açık ada);
+ * daha derin zincirler (koyu → açık → koyu) desteklenmez.
+ */
+@custom-variant dark (&:where(.dark, .dark *):not(:where(.dark .light, .dark .light *)));
+
+/* Cam yüzeyler (core/recipes.ts glassSurface, dialog/toast) bu varyantla düz yüzeye düşer — bkz. "Cam yüzeyler" dokümanı. */
+@custom-variant reduced-transparency (@media (prefers-reduced-transparency: reduce));
+
+@theme static {
+  /*
+   * ─────────────────────────────────────────────────────────────────────
+   * RENK — HAM RAMPALAR (11 basamak) — HEPSİ elle taşınan hex
+   * ─────────────────────────────────────────────────────────────────────
+   * 2026-09 "Deep Emerald & Slate v2": kullanıcının verdiği bir light+dark
+   * tasarım spesifikasyonundaki hex'ler ÇAPA alınıp aradaki basamaklar OKLCH
+   * uzayında interpolasyonla dolduruldu (L/C/H ayrı ayrı lerp — ton geçişleri
+   * pürüzsüz, hiçbir basamakta L monotonikliği bozulmuyor). success/warning/
+   * danger/info/help artık primary'nin kroma bütçesine elle akort edilmiş
+   * DEĞİL — spec'in kendi (Tailwind-stok-benzeri) hex'lerine sadık.
+   *
+   * Eski "deep-fill/bright-fill" rampa TÜRÜ ayrımı KALKTI — her rampada
+   * basamak SAYISININ anlamı artık sabit ve tekdüze (rol katmanına bkz.):
+   *   100 = spec'in "Background Tint" çapası (rozet/tonal işaretin altında
+   *         yatan referans — doğrudan bir rol token'ı değil, gösterim/
+   *         interpolasyon çapası).
+   *   400 = spec'in DARK "Hex"i — dark modda metin/ikon VE dolu blok.
+   *   600 = spec'in LIGHT "Hex"i — light modda ikon/kenarlık, tonal işaretin
+   *         alfa-karışım çapası, ve (danger/help/success/warning için) dolu
+   *         blok.
+   *   700 = light METİN (success/warning/info — 600 beyaz zeminde/dolu blok
+   *         üstünde AA'yı geçmiyor) ve/veya hover basamağı.
+   *   800 = spec'in "Text" değeri — tonal işaretin (tint) üstündeki metin.
+   * `check:contrast` (scripts/check-contrast.mjs) bu roller üstünden AA'yı
+   * doğrular; script `color.css`'in KENDİSİNİ okur, drift riski yok.
+   *
+   * Success hue kararı (2026-09 premium turu, kullanıcı onayıyla): spec'in
+   * zümrüt success'i (~163°) dark modda primary-400 ile BİREBİR aynı hex'ti
+   * (`#10b981`) — birincil CTA ile "başarılı" rozeti ayırt edilemiyordu. Rampa
+   * OKLCH'de her basamağın L ve C'si KORUNARAK hue ~163° → 148°'e (zümrütten
+   * yeşile) döndürüldü: aynı algısal ağırlık, ayrı bir anlam rengi. Primary
+   * (~163-174°) zümrüt/teal'de kalır.
+   *
+   * `@theme static`: kullanılmayan basamaklar da `:root`'a yazılsın —
+   * showcase'in Renkler sayfası `--color-<ramp>-<basamak>` adını runtime'da
+   * `getComputedStyle` ile okuyor, Tailwind'in kaynak tarayıcısı böyle bir
+   * kullanımı GÖREMEZ (sadece gerçek utility class'larını arar).
+   */
+
+  /*
+   * Primary — "Deep Emerald". 50-300/800-950 önceki turdan (hue ~174°)
+   * korunur; 400/500/700 spec'in dark/dark-hover/light-hover hex'lerine
+   * (`#10b981`/`#059669`/`#0a4335`) çekildi. 600 = `#004d40` (metin/ikon/
+   * kenarlık "accent" rolü VE checkbox/radio `accent-color`'ı — DEĞİŞMEDİ).
+   * 900 = `#062c22` — artık LIGHT modun dolu blok basamağı (`--mf-accent-fill`,
+   * kullanıcı kararı: spec'in "Forest Emerald" CTA'sı). 2026-09 ilk turda
+   * Deep Jade'den (hue ~155°) geçilmişti; bu v2 tur aynı ailede kalıp sadece
+   * 400/500/700'ü spec'e taşıdı.
+   */
+  --color-primary-50: #eef9f5;
+  --color-primary-100: #d9f2ea;
+  --color-primary-200: #b4e6d6;
+  --color-primary-300: #81d0ba;
+  --color-primary-400: #10b981;
+  --color-primary-500: #059669;
+  --color-primary-600: #004d40;
+  --color-primary-700: #0a4335;
+  --color-primary-800: #05362b;
+  --color-primary-900: #062c22;
+  --color-primary-950: #061d17;
+
+  /*
+   * Nötr — "Emerald Slate": her basamak marka hue'sunda (~170°), kroma
+   * ≤0.02 — algılanabilir bir "yeşil" DEĞİL, markayla aynı sıcaklıkta bir
+   * slate (kural ilk turda KULLANICI KARARIYLA "nötrler asla yeşile kaymaz"
+   * ilkesinin yerine geçti). v2 turda 200/300 ve koyu merdiven (700-975)
+   * spec'in "Porselen" (light) ve "Dumanlı Zümrüt-Siyah" (dark) hedeflerine
+   * yeniden ayarlandı — dark canvas artık `#0b1311`, kart `#121e1b`,
+   * kenarlık `#233530` (spec'in kendi hex'leri, sadece marka hue'suna göre
+   * küçük bir kroma düzeltmesiyle). `check:contrast` nötr metin çiftlerini
+   * doğrular.
+   */
+  --color-neutral-50: #f6f8f7;
+  --color-neutral-100: #f4f6f5;
+  --color-neutral-200: #e8ecea;
+  --color-neutral-300: #d8e0dc;
+  --color-neutral-400: #b4bfbb;
+  --color-neutral-500: #86948f;
+  --color-neutral-600: #5e6d67;
+  --color-neutral-700: #40504b;
+  --color-neutral-800: #233530;
+  --color-neutral-850: #192723;
+  --color-neutral-900: #121e1b;
+  --color-neutral-950: #0b1311;
+  --color-neutral-975: #070e0c;
+
+  /* Success — yeşil (hue 148°), spec'in zümrüt rampasının L/C'si korunarak döndürüldü — bkz. üstteki doktrin notu. */
+  --color-success-50: #eefcef;
+  --color-success-100: #d9f9dc;
+  --color-success-200: #b5ebbc;
+  --color-success-300: #91dd9c;
+  --color-success-400: #68cf7b;
+  --color-success-500: #52b666;
+  --color-success-600: #419351;
+  --color-success-700: #357642;
+  --color-success-800: #2b5d34;
+  --color-success-900: #1d4725;
+  --color-success-950: #123218;
+
+  /* Warning — spec'in amber'i. */
+  --color-warning-50: #fffae6;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #f8da94;
+  --color-warning-300: #f6be5f;
+  --color-warning-400: #f59e0b;
+  --color-warning-500: #e78a05;
+  --color-warning-600: #d97706;
+  /*
+   * 700 spec'in `#B45309`si YERİNE elle bir tık koyulaştırıldı (`#a64b08`) —
+   * `#B45309` nötr-200 (`surface-alt`) üstünde 4.21:1 ölçüldü (AA altı,
+   * `check:contrast` bu yüzeyi de tarıyor); `#a64b08` 4.5:1+ geçiyor.
+   */
+  --color-warning-700: #a64b08;
+  --color-warning-800: #92400e;
+  --color-warning-900: #762e00;
+  --color-warning-950: #572101;
+
+  /* Danger — spec'in "Muted Ruby/Yakut"ı. */
+  --color-danger-50: #fef5f5;
+  --color-danger-100: #fde8e8;
+  --color-danger-200: #f8c2c1;
+  --color-danger-300: #f09b9a;
+  /*
+   * 400 spec'in `#E57373`si YERİNE elle bir tık koyulaştırıldı (`#e87878`) —
+   * dark modda overlay/surface-alt üstündeki %12 tint karışımında metin
+   * rengi olarak kullanılınca 4.42:1 ölçüldü (AA altı); `#e87878` geçiyor.
+   */
+  --color-danger-400: #e87878;
+  --color-danger-500: #d65453;
+  --color-danger-600: #c53030;
+  --color-danger-700: #b02626;
+  --color-danger-800: #9b1c1c;
+  --color-danger-900: #7c080d;
+  --color-danger-950: #5a0407;
+
+  /* Info — spec'in "Buz Mavisi/Slate Blue"si. */
+  --color-info-50: #f1f9ff;
+  --color-info-100: #e0f2fe;
+  --color-info-200: #b2e1fe;
+  --color-info-300: #7ecffc;
+  --color-info-400: #38bdf8;
+  --color-info-500: #20a0e0;
+  --color-info-600: #0284c7;
+  --color-info-700: #0369a1;
+  --color-info-800: #075985;
+  --color-info-900: #00446a;
+  --color-info-950: #00304c;
+
+  /*
+   * Help — YENİ rampa, spec'in "Ametist Moru" (AI önerileri/onboarding/
+   * yardım tooltip'leri). `MfTone`'a `help` üyesi olarak eklendi (bkz.
+   * core/types.ts).
+   */
+  --color-help-50: #f7f5ff;
+  --color-help-100: #ede9fe;
+  --color-help-200: #d5cafe;
+  --color-help-300: #bdabfd;
+  --color-help-400: #a78bfa;
+  /*
+   * 500 spec'te yok (interpolasyon ara basamağıydı) — mürekkep metinle
+   * (`#04110d`) 4.48:1 ölçüldüğü için elle bir tık açıldı (`#9370f2`).
+   */
+  --color-help-500: #9370f2;
+  --color-help-600: #6d28d9;
+  --color-help-700: #6424c7;
+  --color-help-800: #5b21b6;
+  --color-help-900: #460b93;
+  --color-help-950: #31046b;
+
+  /*
+   * ─────────────────────────────────────────────────────────────────────
+   * GERİYE DÖNÜK UYUMLULUK — eski marka/semantic token ismi.
+   * `--color-*-dark`/`--color-dark-*` "dark: ikizi" ailesi Faz 1d'de
+   * KALDIRILDI (bu depoda hiçbir tüketicisi yoktu, bkz. plan — BREAKING,
+   * 0.2.0): rol katmanı (`--mf-*`, aşağıda) zaten AYNI amaca hizmet ediyor
+   * ve `dark:` ikizi YAZDIRMIYOR, bu takma adlar sadece kafa karıştıran bir
+   * ikinci yol sunuyordu.
+   */
+  --color-primary: var(--color-primary-600);
+}
+
+/*
+ * ───────────────────────────────────────────────────────────────────────
+ * ROL KATMANI — runtime'da MODA GÖRE TAKAS OLAN token'lar
+ * ───────────────────────────────────────────────────────────────────────
+ * `@theme inline`, değeri derleme zamanında sabitlemek yerine var(--mf-*)
+ * referansı olarak bırakır — aşağıdaki :root/.dark bloklarında TEK bir CSS
+ * custom property değişimiyle bütün utility'ler (bg-surface, text-fg, ...)
+ * doğru moda geçer. Template'lerde `bg-X dark:bg-X-dark` İKİLİSİ tamamen
+ * gereksizleşir — `bg-surface` iki modda da doğru sonucu verir.
+ *
+ * success/warning/danger/info/help RAMPALARI yukarıdaki `@theme` bloğunda
+ * (elle hex) — burada SADECE moda göre takas olan rol token'ları.
+ *
+ * Her semantik ton (success/warning/danger/info/help) BEŞLİ bir rol seti
+ * taşır — v2'nin ana yeniliği, eski "bileşen doğrudan `bg-X-600 dark:bg-X-900`
+ * yazar" deseninin yerine geçti:
+ *   `--mf-X`            metin/ikon/kenarlık rolü (Button outlined/text, Link, Spinner, Timeline)
+ *   `--mf-X-fill`        dolu blok zemini (filled Button, vb.)
+ *   `--mf-X-fill-hover`  dolu blok hover zemini
+ *   `--mf-X-fill-fg`     dolu blok ÜSTÜNDEKİ metin (moda göre beyaz/mürekkep değişir)
+ *   `--mf-X-tint`        tonal işaret zemini (badge/chip/alert/seçili satır/aktif nav) —
+ *                        `color-mix()` ile rampanın kendi basamağının %12 alfası, MOD-TAKASLI çapa
+ *                        (light 600 / dark 400 — spec'in "Soft Tinting" tekniği)
+ *   `--mf-X-tint-fg`     tonal işaret ÜSTÜNDEKİ metin
+ */
+@theme inline {
+  --color-help: var(--mf-help);
+  --color-success: var(--mf-success);
+  --color-warning: var(--mf-warning);
+  --color-danger: var(--mf-danger);
+  --color-info: var(--mf-info);
+
+  /* Yüzey merdiveni */
+  --color-canvas: var(--mf-canvas);
+  --color-surface: var(--mf-surface);
+  --color-surface-alt: var(--mf-surface-alt);
+  --color-chrome: var(--mf-chrome);
+  --color-surface-sunken: var(--mf-surface-sunken);
+  --color-surface-active: var(--mf-surface-active);
+  --color-overlay: var(--mf-overlay);
+  /* Ters yüzey — koyu-üstünde-açık (light) / açık-üstünde-koyu (dark), tooltip gibi "her zaman zıt" yüzeyler için. Artık literal spec değerleri (primary-900 DEĞİL). */
+  --color-surface-inverse: var(--mf-surface-inverse);
+  /* Cam yüzey — Dialog/Sheet/Drawer/Toast paneli + showcase sabit üst çubuğu; bkz. core/recipes.ts glassSurface. */
+  --color-glass: var(--mf-glass);
+
+  /* Kenarlık — `line` eski/yaygın isim, `border` ile AYNI anlamı taşıyor */
+  --color-line: var(--color-border);
+  --color-border-subtle: var(--mf-border-subtle);
+  --color-border: var(--mf-border);
+  --color-border-strong: var(--mf-border-strong);
+  /* İnce çizgi (border-first depth) — kapsayıcılar (card/table/toolbar) gölge YERİNE bunu kullanır, alfa tabanlı: her zeminde çalışır. */
+  --color-hairline: var(--mf-hairline);
+
+  /*
+   * Durum katmanı (state layer) — hover/pressed/selected için ZEMİNDEN
+   * BAĞIMSIZ alfa örtüler: `bg-state-hover` renkli, görsel veya cam bir
+   * yüzeyin üstünde de doğru koyulaşır/açılır (opak `bg-surface-alt`
+   * yalnızca kendi zemininde doğru görünür). Metin rengi `fg` tabanlı.
+   */
+  --color-state-hover: var(--mf-state-hover);
+  --color-state-pressed: var(--mf-state-pressed);
+  --color-state-selected: var(--mf-state-selected);
+
+  /*
+   * ─────────────────────────────────────────────────────────────────────
+   * GRAFİK — üç iş, üç skala (dataviz metodu; değerler rol bloklarında,
+   * iki mod AYRI SEÇİLMİŞ basamaklar — otomatik ters çevirme DEĞİL):
+   *   chart-1..8   KATEGORİK (kimlik) — SABİT sırayla atanır, ASLA döngüye
+   *                girmez; 9. seri "Diğer"e (`chart-other`) katlanır.
+   *   chart-seq-1..5  SIRALI (büyüklük) — tek hue (zümrüt), açık→koyu;
+   *                dark'ta çapa ters (düşük değer zemine yakın koyu).
+   *   chart-div-1..5  IRAKSAK (kutup) — turuncu ↔ nötr gri ↔ mavi.
+   * Durum (iyi/uyarı/kritik) için AYRI grafik rengi YOK — kitin success/
+   * warning/danger rolleri kullanılır, HER ZAMAN ikon+etiketle.
+   * Grafik renkleri METİN için KULLANILMAZ — etiket/değer/lejant metni fg/
+   * fg-muted taşır, renkli işaret (nokta/çizgi) yanında durur.
+   */
+  --color-chart-1: var(--mf-chart-1);
+  --color-chart-2: var(--mf-chart-2);
+  --color-chart-3: var(--mf-chart-3);
+  --color-chart-4: var(--mf-chart-4);
+  --color-chart-5: var(--mf-chart-5);
+  --color-chart-6: var(--mf-chart-6);
+  --color-chart-7: var(--mf-chart-7);
+  --color-chart-8: var(--mf-chart-8);
+  --color-chart-other: var(--mf-chart-other);
+  --color-chart-seq-1: var(--mf-chart-seq-1);
+  --color-chart-seq-2: var(--mf-chart-seq-2);
+  --color-chart-seq-3: var(--mf-chart-seq-3);
+  --color-chart-seq-4: var(--mf-chart-seq-4);
+  --color-chart-seq-5: var(--mf-chart-seq-5);
+  --color-chart-div-1: var(--mf-chart-div-1);
+  --color-chart-div-2: var(--mf-chart-div-2);
+  --color-chart-div-3: var(--mf-chart-div-3);
+  --color-chart-div-4: var(--mf-chart-div-4);
+  --color-chart-div-5: var(--mf-chart-div-5);
+
+  /* Metin */
+  --color-fg: var(--mf-fg);
+  --color-fg-muted: var(--mf-fg-muted);
+  --color-fg-subtle: var(--mf-fg-subtle);
+  --color-fg-on-accent: var(--mf-fg-on-accent);
+  --color-fg-inverse: var(--mf-fg-inverse);
+  /* Geriye dönük takma adlar — artık kendi X-fill-fg rolüne işaret ediyor (aşağıya bkz.), yeni kod bunları KULLANMAZ. */
+  --color-fg-on-success: var(--mf-fg-on-success);
+  --color-fg-on-warning: var(--mf-fg-on-warning);
+
+  /* Marka rolü (metin/kenarlık/ikon bağlamında) */
+  --color-accent: var(--mf-accent);
+  --color-accent-strong: var(--mf-accent-strong);
+  --color-focus-ring: var(--mf-focus-ring);
+  /*
+   * Dolu blok rolü — LIGHT'ta artık primary-900 (`#062c22`, spec'in "Forest
+   * Emerald" CTA'sı — kullanıcı kararı), DARK'ta primary-400 (`#10b981`,
+   * spec'in canlı zümrüt CTA'sı) + `--mf-fg-on-accent` DARK'ta mürekkep
+   * (beyaz metin `#10B981` üstünde 2.54:1, AA altı — kullanıcı kararı: canlı
+   * blok + koyu metin tercih edildi). `applyMfTheme({accent})` bu üç satırı
+   * da yazar (bkz. theming/apply.ts) — tüketici aksanının HER İKİ yarısı da
+   * ayrı ayrı `fgOnAccent()` ile hesaplanır.
+   */
+  --color-accent-fill: var(--mf-accent-fill);
+  --color-accent-fill-hover: var(--mf-accent-fill-hover);
+  /* Primary'nin KENDİ tonal işareti (Progress/Dropzone track, seçili satır/hücre vb.) — X-tint ile aynı desen. */
+  --color-primary-tint: var(--mf-primary-tint);
+  --color-primary-tint-fg: var(--mf-primary-tint-fg);
+
+  /* "Secondary" (spec) — nötr dolu buton/rozet zemini, `bg-surface-alt`'tan AYRI: spec'in kendi hex'leri, moda göre takas olur. */
+  --color-neutral-fill: var(--mf-neutral-fill);
+  --color-neutral-fill-hover: var(--mf-neutral-fill-hover);
+  --color-neutral-fill-fg: var(--mf-neutral-fill-fg);
+
+  /* Semantik beşli — success/warning/danger/info/help ortak deseni (üstteki doktrin yorumuna bkz.). */
+  --color-success-fill: var(--mf-success-fill);
+  --color-success-fill-hover: var(--mf-success-fill-hover);
+  --color-success-fill-fg: var(--mf-success-fill-fg);
+  --color-success-tint: var(--mf-success-tint);
+  --color-success-tint-fg: var(--mf-success-tint-fg);
+
+  --color-warning-fill: var(--mf-warning-fill);
+  --color-warning-fill-hover: var(--mf-warning-fill-hover);
+  --color-warning-fill-fg: var(--mf-warning-fill-fg);
+  --color-warning-tint: var(--mf-warning-tint);
+  --color-warning-tint-fg: var(--mf-warning-tint-fg);
+
+  --color-danger-fill: var(--mf-danger-fill);
+  --color-danger-fill-hover: var(--mf-danger-fill-hover);
+  --color-danger-fill-fg: var(--mf-danger-fill-fg);
+  --color-danger-tint: var(--mf-danger-tint);
+  --color-danger-tint-fg: var(--mf-danger-tint-fg);
+
+  --color-info-fill: var(--mf-info-fill);
+  --color-info-fill-hover: var(--mf-info-fill-hover);
+  --color-info-fill-fg: var(--mf-info-fill-fg);
+  --color-info-tint: var(--mf-info-tint);
+  --color-info-tint-fg: var(--mf-info-tint-fg);
+
+  --color-help-fill: var(--mf-help-fill);
+  --color-help-fill-hover: var(--mf-help-fill-hover);
+  --color-help-fill-fg: var(--mf-help-fill-fg);
+  --color-help-tint: var(--mf-help-tint);
+  --color-help-tint-fg: var(--mf-help-tint-fg);
+}
+
+@layer base {
+  /*
+   * `.light` — koyu sayfa içindeki açık ada (bkz. dosya başındaki
+   * `@custom-variant dark` notu). Ada kendi zeminini/metnini almak için
+   * `bg-canvas text-fg` (veya `bg-surface`) class'ını da taşımalı — değişkenler
+   * yeniden tanımlanır ama `body`'nin zemini adaya kendiliğinden inmez.
+   */
+  :root,
+  .light {
+    /*
+     * Native form kontrolleri (checkbox/radio/date input) ve scrollbar bu
+     * ipucu olmadan dark modda bile tarayıcının varsayılan (genelde beyaz/
+     * açık) chrome'unu çiziyordu — `accent-color` (Checkbox'ta zaten
+     * kullanılıyor) rengi belirler ama `color-scheme` alttaki tüm native UI
+     * kromunu moda uyduran asıl mekanizma.
+     */
+    color-scheme: light;
+
+    /* Native scrollbar (Firefox/Chromium standart özellikleri) — ince + rol token'ıyla tema-uyumlu, sistem varsayılanı yerine. */
+    scrollbar-width: thin;
+    scrollbar-color: var(--mf-border-strong) transparent;
+
+    --mf-canvas: var(--color-neutral-100);
+    --mf-surface: #ffffff;
+    --mf-surface-alt: var(--color-neutral-200);
+    --mf-chrome: #ffffff;
+    --mf-surface-sunken: var(--color-neutral-50);
+    --mf-surface-active: var(--color-neutral-300);
+    --mf-overlay: #ffffff;
+    /* Ters yüzey (tooltip vb.) — spec'in "Contrast/Inverse" çifti, literal. */
+    --mf-surface-inverse: #04110d;
+    /* Mikro glassmorphism — dialog/sheet/drawer/toast paneli + sabit üst çubuk; %82 opak beyaz, backdrop-blur ile birlikte kullanılır (bkz. core/recipes.ts glassSurface). */
+    --mf-glass: rgba(255, 255, 255, 0.82);
+
+    --mf-border-subtle: var(--color-neutral-200);
+    --mf-border: var(--color-neutral-300);
+    --mf-border-strong: var(--color-neutral-400);
+    /* Border-first depth — alfa marka-tonlu çizgi, gölge YERİNE kapsayıcı kenarlığı (bkz. elevation.css doktrin notu). rgba(11,61,36,.16) beyaz üstünde TAM spec'in `#D8E0DC`sine karışır. */
+    --mf-hairline: rgba(11, 61, 36, 0.16);
+
+    /* Durum katmanı — `--mf-fg` (#0a1c17) tabanlı alfa örtüler. */
+    --mf-state-hover: rgba(10, 28, 23, 0.05);
+    --mf-state-pressed: rgba(10, 28, 23, 0.09);
+    --mf-state-selected: rgba(10, 28, 23, 0.07);
+
+    /* Spec literalleri (Porselen zemin üstünde "mat baskı" hissi — nötr-600/900 basamağı yerine elle). */
+    --mf-fg: #0a1c17;
+    --mf-fg-muted: #4a5d56;
+    --mf-fg-subtle: var(--color-neutral-500);
+    --mf-fg-on-accent: #ffffff;
+    --mf-fg-inverse: #f8fafc;
+
+    --mf-accent: var(--color-primary-600);
+    --mf-accent-strong: var(--color-primary-700);
+    --mf-focus-ring: var(--color-primary-600);
+    /* Dolu blok — LIGHT'ta 900 (`#062c22`, beyaz metinle 15:1) — kullanıcı kararı, bkz. rol katmanı doktrin yorumu. Hover 700. */
+    --mf-accent-fill: var(--color-primary-900);
+    --mf-accent-fill-hover: var(--color-primary-700);
+    /* Primary'nin kendi tonal işareti — X-tint ile aynı `color-mix` deseni, çapa LIGHT'ta 600. */
+    --mf-primary-tint: color-mix(in srgb, var(--color-primary-600) 12%, transparent);
+    --mf-primary-tint-fg: var(--color-primary-800);
+
+    /* "Secondary" — spec'in kendi hex'leri (nötr rampadan BAĞIMSIZ, `bg-surface-alt`'la karıştırılmaz). */
+    --mf-neutral-fill: #e2e8e5;
+    --mf-neutral-fill-hover: #d1dcd7;
+    --mf-neutral-fill-fg: #1c2825;
+
+    /*
+     * Semantik metin/ikon rolü — success/warning/info 700 (600 beyaz/dolu
+     * blok üstünde AA'yı geçmiyor), danger/help 600 (spec'in Hex'i doğrudan
+     * yeterli).
+     */
+    --mf-success: var(--color-success-700);
+    --mf-warning: var(--color-warning-700);
+    --mf-danger: var(--color-danger-600);
+    --mf-info: var(--color-info-700);
+    --mf-help: var(--color-help-600);
+
+    /*
+     * Dolu blok beşlisi — danger/help/info "her zaman koyu/doygun blok +
+     * beyaz metin" (deep-fill mirası); success/warning "doğal olarak açık
+     * yaşayan" blok + HER ZAMAN mürekkep metin (bright-fill mirası, ama artık
+     * ayrı bir "tür" değil, sadece bu üç token'ın farklı değeri).
+     */
+    --mf-success-fill: var(--color-success-600);
+    --mf-success-fill-hover: var(--color-success-500);
+    --mf-success-fill-fg: #04110d;
+
+    --mf-warning-fill: var(--color-warning-600);
+    --mf-warning-fill-hover: var(--color-warning-500);
+    --mf-warning-fill-fg: #04110d;
+
+    --mf-danger-fill: var(--color-danger-600);
+    --mf-danger-fill-hover: var(--color-danger-700);
+    --mf-danger-fill-fg: #ffffff;
+
+    /* info 600 hem dolu blok hem metin olarak AA'yı geçmiyor (4.1:1) — fill de 700'e taşındı. */
+    --mf-info-fill: var(--color-info-700);
+    --mf-info-fill-hover: var(--color-info-800);
+    --mf-info-fill-fg: #ffffff;
+
+    --mf-help-fill: var(--color-help-600);
+    --mf-help-fill-hover: var(--color-help-700);
+    --mf-help-fill-fg: #ffffff;
+
+    /*
+     * Tonal işaret ("Soft Tinting", spec) — rampanın kendi LIGHT çapası
+     * (600) üstünde %12 alfa `color-mix`, metin rampanın 800 basamağı.
+     * Opaklık burada BİLİNÇLİ (eski "düz basamak çifti, opaklık DEĞİL"
+     * kuralının tersine çevrilmesi) — spec'in tekniği zaten budur, ve
+     * `color-mix` her zeminde (surface/canvas/overlay/surface-alt) ayrı ayrı
+     * karışıp `check:contrast`'ta dördü de doğrulanıyor.
+     */
+    --mf-success-tint: color-mix(in srgb, var(--color-success-600) 12%, transparent);
+    --mf-success-tint-fg: var(--color-success-800);
+    --mf-warning-tint: color-mix(in srgb, var(--color-warning-600) 12%, transparent);
+    --mf-warning-tint-fg: var(--color-warning-800);
+    --mf-danger-tint: color-mix(in srgb, var(--color-danger-600) 12%, transparent);
+    --mf-danger-tint-fg: var(--color-danger-800);
+    --mf-info-tint: color-mix(in srgb, var(--color-info-600) 12%, transparent);
+    --mf-info-tint-fg: var(--color-info-800);
+    --mf-help-tint: color-mix(in srgb, var(--color-help-600) 12%, transparent);
+    --mf-help-tint-fg: var(--color-help-800);
+
+    /* Geriye dönük takma adlar — yeni kod `success-fill-fg`/`warning-fill-fg` kullanır. */
+    --mf-fg-on-success: var(--mf-success-fill-fg);
+    --mf-fg-on-warning: var(--mf-warning-fill-fg);
+
+    /*
+     * Grafik — kategorik 8 slot (emerald · blue · orange · violet · lime ·
+     * sky · amber · pink). Sıra CVD güvenlik mekanizmasıdır, DEĞİŞTİRMEYİN:
+     * dataviz `validate_palette.js` ile #fff yüzeye karşı doğrulandı — bant
+     * L 0.43–0.77, kroma ≥0.10, en kötü KOMŞU CVD ΔE 13.8 (hedef ≥8), normal
+     * görüş ΔE 17.8 (taban ≥15), 8/8 ≥3:1. İlk 3 slot tüm-çiftler (saçılım/
+     * küçük çoklular) testini de geçer (ΔE 8.1) — o formlarda en fazla 3 seri.
+     * Slot değerleri ARAMAYLA seçildi (9 aday aileden, geçen 632 sıralama
+     * arasından en yüksek komşu ayrımı) — elle "güzelleştirmeyin", yeniden
+     * doğrulayın. Tema motoru `roles.light['chart-N']` ile ezebilir.
+     */
+    --mf-chart-1: #078968;
+    --mf-chart-2: #3370c7;
+    --mf-chart-3: #c85c2e;
+    --mf-chart-4: #7a53b4;
+    --mf-chart-5: #6f8d2a;
+    --mf-chart-6: #068db6;
+    --mf-chart-7: #b87501;
+    --mf-chart-8: #bb4e7f;
+    /* "Diğer" — 9. ve sonraki seriler buraya katlanır. Renksiz olduğu için geri planda okunur; 500 canvas üstünde 2.91:1 kalıyordu, 600 ≥3:1. */
+    --mf-chart-other: var(--color-neutral-600);
+    /* Sıralı — zümrüt, açık→koyu; 2-5 ordinal kullanımda da (≥2:1) geçer, 1 "sıfıra yakın" olarak zemine çekilebilir. */
+    --mf-chart-seq-1: #bfe9d8;
+    --mf-chart-seq-2: #75c4a6;
+    --mf-chart-seq-3: #2fa984;
+    --mf-chart-seq-4: #068262;
+    --mf-chart-seq-5: #035b44;
+    /* Iraksak — 1-2 turuncu kol, 3 nötr orta nokta (renk YOK), 4-5 mavi kol. */
+    --mf-chart-div-1: #ac430e;
+    --mf-chart-div-2: #dda189;
+    --mf-chart-div-3: var(--color-neutral-200);
+    --mf-chart-div-4: #96b3de;
+    --mf-chart-div-5: #2460b7;
+  }
+
+  /*
+   * Dark modda "chrome en koyu, içerik daha açık" kuralı (975 → 950 → 900
+   * → 850, dört gerçek kademe). Gölgeler neredeyse kısılıyor — derinlik
+   * artık kademe FARKINDAN geliyor, ışıktan değil.
+   */
+  .dark {
+    color-scheme: dark;
+
+    --mf-canvas: var(--color-neutral-950);
+    --mf-surface: var(--color-neutral-900);
+    --mf-surface-alt: var(--color-neutral-850);
+    --mf-chrome: var(--color-neutral-975);
+    --mf-surface-sunken: var(--color-neutral-950);
+    --mf-surface-active: var(--color-neutral-800);
+    --mf-overlay: var(--color-neutral-850);
+    --mf-surface-inverse: #f8fafc;
+    /* Retinted — yeni surface-900 (`#121e1b`) tabanlı %78 opak zümrüt-siyah. */
+    --mf-glass: rgba(18, 30, 27, 0.78);
+
+    --mf-border-subtle: var(--color-neutral-900);
+    --mf-border: var(--color-neutral-800);
+    --mf-border-strong: var(--color-neutral-700);
+    /* rgba(103,145,132,.2) yeni surface-900 (`#121e1b`) üstünde TAM spec'in `#233530`sine karışır. */
+    --mf-hairline: rgba(103, 145, 132, 0.2);
+
+    /* Durum katmanı — `--mf-fg` (#ecf3f0) tabanlı; koyu zeminde aynı algısal ağırlık için alfa bir tık yüksek. */
+    --mf-state-hover: rgba(236, 243, 240, 0.06);
+    --mf-state-pressed: rgba(236, 243, 240, 0.11);
+    --mf-state-selected: rgba(236, 243, 240, 0.08);
+
+    --mf-fg: #ecf3f0;
+    --mf-fg-muted: #8a9e97;
+    /*
+     * neutral-500 (light'takiyle aynı basamak) koyu zeminde fazla parlak/
+     * okunaklı kalıyordu — placeholder gibi "en düşük vurgulu" metnin dark
+     * modda görsel ağırlığı korunsun diye bir basamak koyulaştırıldı.
+     */
+    --mf-fg-subtle: var(--color-neutral-600);
+    /* Dolu blok DARK'ta beyaz DEĞİL mürekkep (`#04110D`) — primary-400 (`#10B981`) üstünde beyaz sadece 2.54:1 (AA altı), kullanıcı kararı. */
+    --mf-fg-on-accent: #04110d;
+    --mf-fg-inverse: #04110d;
+
+    --mf-accent: var(--color-primary-400);
+    --mf-accent-strong: var(--color-primary-300);
+    --mf-focus-ring: var(--color-primary-400);
+    /* Dolu blok — DARK'ta primary-400 (`#10b981`, spec'in canlı zümrüt CTA'sı), hover 500. */
+    --mf-accent-fill: var(--color-primary-400);
+    --mf-accent-fill-hover: var(--color-primary-500);
+    /* Tint çapası DARK'ta 400 (mod-takaslı — spec'in dark Hex'i). */
+    --mf-primary-tint: color-mix(in srgb, var(--color-primary-400) 12%, transparent);
+    --mf-primary-tint-fg: var(--color-primary-400);
+
+    --mf-neutral-fill: #526660;
+    --mf-neutral-fill-hover: #637b74;
+    --mf-neutral-fill-fg: #ffffff;
+
+    /* Dark'ta beş rampa da AYNI basamakta metin/ikon: 400. */
+    --mf-success: var(--color-success-400);
+    --mf-warning: var(--color-warning-400);
+    --mf-danger: var(--color-danger-400);
+    --mf-info: var(--color-info-400);
+    --mf-help: var(--color-help-400);
+
+    /*
+     * Dolu blok beşlisi DARK'ta hepsi AYNI desende: 400 zemin + 500 hover +
+     * mürekkep metin — spec'in beş rengi de (`#10B981`/`#34D399`/`#F59E0B`/
+     * `#E57373`/`#38BDF8`/`#A78BFA`) beyaz metinle AA'yı geçmiyor (1.9–3.0:1).
+     */
+    --mf-success-fill: var(--color-success-400);
+    --mf-success-fill-hover: var(--color-success-500);
+    --mf-success-fill-fg: #04110d;
+
+    --mf-warning-fill: var(--color-warning-400);
+    --mf-warning-fill-hover: var(--color-warning-500);
+    --mf-warning-fill-fg: #04110d;
+
+    --mf-danger-fill: var(--color-danger-400);
+    --mf-danger-fill-hover: var(--color-danger-500);
+    --mf-danger-fill-fg: #04110d;
+
+    --mf-info-fill: var(--color-info-400);
+    --mf-info-fill-hover: var(--color-info-500);
+    --mf-info-fill-fg: #04110d;
+
+    --mf-help-fill: var(--color-help-400);
+    --mf-help-fill-hover: var(--color-help-500);
+    --mf-help-fill-fg: #04110d;
+
+    /* Tonal işaret DARK'ta çapa 400 (spec'in dark Hex'i), metin de 400 (zeminle aynı basamak — "Parlak mat metin" spec tarifi). */
+    --mf-success-tint: color-mix(in srgb, var(--color-success-400) 12%, transparent);
+    --mf-success-tint-fg: var(--color-success-400);
+    --mf-warning-tint: color-mix(in srgb, var(--color-warning-400) 12%, transparent);
+    --mf-warning-tint-fg: var(--color-warning-400);
+    --mf-danger-tint: color-mix(in srgb, var(--color-danger-400) 12%, transparent);
+    --mf-danger-tint-fg: var(--color-danger-400);
+    --mf-info-tint: color-mix(in srgb, var(--color-info-400) 12%, transparent);
+    --mf-info-tint-fg: var(--color-info-400);
+    --mf-help-tint: color-mix(in srgb, var(--color-help-400) 12%, transparent);
+    --mf-help-tint-fg: var(--color-help-400);
+
+    --mf-fg-on-success: var(--mf-success-fill-fg);
+    --mf-fg-on-warning: var(--mf-warning-fill-fg);
+
+    /* Grafik — AYNI 8 hue, koyu yüzey (#121e1b) için ayrı seçilmiş basamaklar: bant L 0.48–0.67, komşu CVD ΔE 13.6, normal 17.6, 8/8 ≥3:1, ilk 3 tüm-çiftler ΔE 9.3. */
+    --mf-chart-1: #15ab83;
+    --mf-chart-2: #4e8ce6;
+    --mf-chart-3: #dc6e41;
+    --mf-chart-4: #9b74d9;
+    --mf-chart-5: #80a03e;
+    --mf-chart-6: #24a0cc;
+    --mf-chart-7: #c8800d;
+    --mf-chart-8: #d76797;
+    --mf-chart-other: var(--color-neutral-600);
+    /* Sıralı — dark'ta çapa ters: düşük değer zemine yakın koyu, yüksek değer parlak. */
+    --mf-chart-seq-1: #0f4232;
+    --mf-chart-seq-2: #04654c;
+    --mf-chart-seq-3: #078968;
+    --mf-chart-seq-4: #37b08a;
+    --mf-chart-seq-5: #81d1b3;
+    --mf-chart-div-1: #dc6e41;
+    --mf-chart-div-2: #7d4833;
+    --mf-chart-div-3: #2b3d38;
+    --mf-chart-div-4: #3f597f;
+    --mf-chart-div-5: #5992e7;
+  }
+
+  /*
+   * Marka rengiyle tutarlı metin seçimi (varsayılan mavi tarayıcı vurgusu
+   * yerine) — düz rampa basamağı (badge/avatar/ray ile aynı "kalıcı tonal
+   * işaret" dili, opaklık DEĞİL): seçim her zeminde garantili kontrastlı.
+   */
+  ::selection {
+    background-color: var(--color-primary-200);
+    color: var(--color-primary-950);
+  }
+
+  .dark ::selection {
+    background-color: var(--color-primary-800);
+    color: var(--color-primary-50);
+  }
+
+  .dark .light ::selection {
+    background-color: var(--color-primary-200);
+    color: var(--color-primary-950);
+  }
+
+  /*
+   * Geniş gam (Display P3) — zümrüt, sRGB'nin en çok kırptığı renk ailesi.
+   * P3 ekranlarda markanın canlı basamakları (dark modun dolu bloğu/metni ve
+   * glow) AYNI OKLCH açıklığında, daha yüksek kromayla çizilir. L sabit
+   * tutulduğu için kontrast korunur; hesap sRGB hex'lerinin kontrastıyla
+   * karşılaştırılarak doğrulandı: mürekkep üstünde 7.59→7.75, 5.11→5.21,
+   * 9.90→10.16 (artış, düşüş yok). Kroma, P3 gam sınırının %85'inde tutuldu.
+   * `check:contrast` sRGB hex'lerini doğrular — bu blok yalnızca
+   * kontrastı ARTIRAN bir üst katman. `applyMfTheme({accent})` inline style
+   * yazdığı için tüketici markası bu bloğu her zaman ezer.
+   */
+  @media (color-gamut: p3) {
+    :root {
+      --color-primary-400: oklch(69.6% 0.198 162.5);
+      --color-primary-500: oklch(59.6% 0.169 163.2);
+      --color-success-400: oklch(77.2% 0.23 148);
+    }
+  }
+}