/* Lucida B2B Admin — tema token'ları. TEK renk kaynağı. * * index.html (tek-kurum SPA) ve orgs.html (çok-org listesi) ikisi de bunu yükler. * Önceden her ikisinin kendi :root kopyası vardı ve sessizce sapmışlardı; dark modu * iki yerde tanımlamamak için burada birleştiler. Sapan değerler PR'da tek tek listeli. * * ÜÇ DURUM: * :root → açık (varsayılan) * @media(dark) :root:not([data-theme=light]) → OS koyu + kullanıcı açığı seçmemiş * :root[data-theme=dark] → kullanıcı koyuyu seçmiş (OS ne derse desin) * Toggle yazar; index.html'in 'indeki satır-içi script bunu ilk * boyamadan ÖNCE uygular (FOUC yok — boot loader'ın kendisi de token'la boyanıyor). * * İKİ SINIF RENK — ayrım dark mode'un doğru çalışmasının şartı: * 1. TEMAYLA DÖNENLER — yüzey, metin, kenar, yumuşak rozet. Zemin koyulaşır, mürekkep açılır. * 2. KİMLİK RENKLERİ — dolu düğme/çip dolguları (--*-solid) ve koyu kroma (--sidebar*, * --chrome-*). Bunlar İKİ TEMADA DA AYNI kalır: üzerlerindeki beyaz metin (--on-dark) * her iki temada geçerli olsun diye. --accent (bağlantı/ikon metni) döner, * --accent-solid (düğme dolgusu) dönmez — ikisini karıştırmak beyaz-üstüne-açık-indigo * üretir ve kontrastı 2.6:1'e düşürür. */ :root { color-scheme: light; /* yüzeyler + metin */ --bg:#f5f6f9; --card:#ffffff; --card-2:#fbfcfe; --boot-bg:#f7f8fb; --boot-line:#e4e7f0; --ink:#0f131c; --ink-2:#39404e; --muted:#4b5563; --faint:#6b7280; --line:#e7e9f0; --line-2:#eef0f5; --track:#edeef5; --line-hover:#c4c8e0; --line-hover-2:#c3c9d6; --hover-soft:#fcfcfd; --hover-soft-2:#fbfbfd; --sel:#e9ebff; --scroll:#cdd1dd; --scroll-hover:#b4b9c8; --top-bg:rgba(255,255,255,.78); --overlay:rgba(13,16,32,.5); --lock-veil:rgba(247,248,252,.66); --fade-out:rgba(255,255,255,0); --scroll-shade:rgba(15,19,28,.16); --scroll-shade-0:rgba(15,19,28,0); /* marka — metin rengi (döner) vs dolgu (dönmez) */ --accent:#4446ff; --accent-600:#191dd4; --accent-solid:#4446ff; --accent-solid-2:#5c5eff; --accent-soft:#eeeeff; --accent-line:#d7d8f8; --accent-line-2:#c6c7ea; --sel-bg:rgba(68,70,255,.18); --btn-glow:rgba(68,70,255,.45); --btn-glow-hover:rgba(68,70,255,.55); --accent-glow:rgba(68,70,255,.5); --nav-glow:rgba(68,70,255,.6); --teal:#0ea5a4; --teal-solid:#0ea5a4; /* durum — yumuşak rozet çifti (döner) + dolu çip dolgusu (dönmez) */ --good:#15a34a; --good-soft:#e7f6ec; --good-soft-2:#e8f6ee; --good-ink:#157347; --good-solid:#157347; --info:#2456c9; --info-soft:#e8f0fe; --info-solid:#2456c9; --warn:#d97706; --warn-soft:#fdf4e7; --warn-ink:#9a6212; --warn-solid:#b4791a; --bad:#dc2626; --bad-soft:#fdecec; --bad-soft-2:#fbecec; --bad-ink:#a85252; --bad-solid:#a85252; --bad-line:#f3c9c9; --err-ink:#b42318; --neutral-ink:#5b6472; --neutral-solid:#5b6472; /* sıcak uyarı bileşenleri (mockbar / attn) */ --mock-bg:#fffaf0; --mock-line:#f1e4c4; --mock-ink:#9a7b22; --attn-bg:#fffdf8; --attn-line:#ecd9b0; --stale-line:#c98a1a; /* koyu kroma — sidebar / topbar. HER İKİ TEMADA AYNI. */ --sidebar:#0b0e1a; --sidebar-2:#12162b; --sidebar-3:#151a31; --chrome-ink:#cdd0dd; --chrome-ink-2:#a7adc4; --chrome-faint:#7e84a8; --chrome-faint-2:#5d647f; --chrome-btn-ink:#d7dae6; --chrome-badge:#9fb0ff; --side-line:rgba(148,163,184,.08); --side-hover:rgba(148,163,184,.09); --side-pill:rgba(148,163,184,.07); --side-pill-line:rgba(148,163,184,.1); --side-badge-bg:rgba(148,163,184,.16); --on-dark:#ffffff; /* Müşterinin YÜKLEDİĞİ logo plakası. Kurumsal logolar ezici çoğunlukla şeffaf zeminli koyu mürekkeptir; plaka temayla koyulaşırsa logo görünmez olur (1.04:1 ölçüldü). --accent-solid gibi KİMLİK rengi: koyu blokta YENİDEN TANIMLANMAZ. */ --logo-plate:#ffffff; --on-dark-veil:rgba(255,255,255,.22); --on-dark-hair:rgba(255,255,255,.12); --on-dark-line:rgba(255,255,255,.16); --on-dark-line-hover:rgba(255,255,255,.28); --on-dark-fill:rgba(255,255,255,.04); --on-dark-fill-hover:rgba(255,255,255,.1); --on-dark-fill-2:rgba(255,255,255,.07); --on-dark-fill-3:rgba(255,255,255,.06); --on-solid-veil:rgba(0,0,0,.2); /* grafik (canvas — CSS okuyamaz, app.js readTheme() ile buradan alır) */ --chart-grid:#eef0f5; --chart-tick:#5b6472; --chart-label:#5b6472; --chart-muted:#9aa0b4; /* tick #8b90a0 beyazda 3.18:1 idi */ --chart-good:#16a34a; --chart-violet:#8b5cf6; --cefr-1:#e2e4ee; --cefr-2:#c7cbe8; --cefr-3:#818cf8; --chart-fill-1:rgba(68,70,255,.08); --chart-fill-2:rgba(68,70,255,.10); --chart-fill-3:rgba(68,70,255,.18); --tooltip-bg:rgba(15,19,28,.94); --chart-grid-2:#e6e8ef; --seg-empty:#dfe2ec; --chart-violet-2:#9333ea; /* Sonuç notları METİN taşır (beyaz kart üstünde). Eski değerler koyu temadan birebir taşınmıştı ve açıkta 2.15–2.78:1 idi; -ink düzeyine çekildi: ok 5.87, err 6.57, warn 5.02 (beyaz). */ --note-ok:#157347; --note-err:#b42318; --note-warn:#b45309; --note-warn-ink:#b45309; /* Etkinlik rozetleri: beyaz metin taşıyan dolu haplar. Kimlik rengi — temayla DÖNMEZ, çünkü dönseler açılır ve üstlerindeki beyaz metin okunmaz olur. DİKKAT: bu üçü zaten açık modda da AA'nın altında (beyaz/#16a34a = 3.0:1); korunuyorlar çünkü değiştirmek görünür bir tasarım kararıdır, "dark mode iyi" demek değil. */ /* ROZET ZEMİNLERİ BEYAZ METİN İÇİN SEÇİLDİ. Eskiden yeşil 3.30:1, turuncu 3.19:1 veriyordu — 11.5px beyaz yazı için AA eşiği 4.5:1. Ölçüldü ve bir ton koyulaştırıldı: yeşil 5.02:1, turuncu 5.02:1. Gri zaten 4.83:1 ile geçiyordu, dokunulmadı. */ --ev-live:#15803d; --ev-scheduled:#b45309; --ev-ended:#6b7280; /* Next kabuğu (login / şifre değiştir). Dashboard SPA'sı ile AYNI zemini ve kartını kullanır; yalnız form alanı, birincil düğme ve iki not kutusu kendine ait. */ --field-line:#d0d5dd; --bulk-line:#3a4060; /* toplu-seçim çubuğundaki hayalet düğme kenarı (koyu kroma üstü) */ --spinner-track:rgba(255,255,255,.25); --btn-blue:#2f6fed; --note-ok-bg:#ecfdf3; --note-ok-line:#abefc6; --note-ok-text:#067647; --note-info-bg:#eff8ff; --note-info-line:#b2ddff; --note-info-text:#175cd3; --shadow-card:0 1px 3px rgba(16,24,40,.06),0 12px 32px rgba(16,24,40,.08); /* geometri + gölge (renk dışı, temayla değişmez) */ /* BOŞLUK ÖLÇEĞİ — 29 ham değerden türetildi, komşular birleşti (4px tabanlı). */ --s-1:2px; --s-2:3px; --s-3:4px; --s-4:6px; --s-5:8px; --s-6:10px; --s-7:12px; --s-8:14px; --s-9:16px; --s-10:20px; --s-11:24px; --s-12:28px; --s-13:32px; --s-14:44px; --s-15:56px; --s-16:72px; --r-2xs:3px; --r-xs:6px; --r-sm:9px; --r:12px; --r-lg:16px; --r-pill:999px; /* ── TİPOGRAFİ ──────────────────────────────────────────────────────────── Tek kaynak. Önceden 3 dosyada 4 ayrı bildirim vardı ve hepsi yığında 'Inter' adını taşıyordu — ama Inter HİÇBİR YERDE YÜKLENMİYOR (@font-face yok, webfont linki yok, public/ altında dosya yok, üstelik CSP font-src 'self' data: dışarıdan çekmeye izin vermiyor). Yani o ad ölüydü ve her tarayıcı sistem arayüz fontuna düşüyordu. Yığında bırakıldı: ileride SELF-HOST edilirse (font-src 'self' korunarak) tek satır değişiklikle devreye girer. Bunlar tema-bağımsız: koyu blokta YENİDEN TANIMLANMAZ. */ --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* Ölçek: panelde 8 ayrı ham px değeri dolaşıyordu (12.5 ×22, 13 ×16, 12 ×13, 11.5 ×11, 11 ×8, 14 ×6, 13.5 ×6, 9.5 ×2). İsimlendirildi; ham değerler kademeli olarak buraya taşınacak. */ --fs-2xs:9.5px; --fs-xs:10.5px; --fs-sm:11.5px; --fs-base:12.5px; --fs-md:13.5px; --fs-lg:14px; --fs-xl:16px; --fs-2xl:18px; --fs-3xl:20px; --fs-4xl:24px; --fs-5xl:30px; --shade:rgba(16,24,40,.18); --shade-2:rgba(16,24,40,.2); --shadow-xs:0 1px 2px rgba(16,24,40,.05); --shadow-sm:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04); --shadow:0 1px 3px rgba(16,24,40,.05),0 10px 26px -12px rgba(16,24,40,.14); --shadow-md:0 4px 12px -2px rgba(16,24,40,.10),0 14px 34px -10px rgba(16,24,40,.16); --shadow-lg:0 28px 64px -16px rgba(16,24,40,.36); --ring:0 0 0 3px rgba(68,70,255,.18); } /* --- KOYU PALET --------------------------------------------------------- * Açık modda ayrım TON karşıtlığından geliyor: koyu ray, açık sayfa. Koyu modda * bu kaybolur, ayrım YÜKSEKLİĞE geçer: ray < sayfa < kart < kart-2 basamakları * artı saç teli kenarlar. Bu yüzden koyu palet açık paletin aynası DEĞİL — * --sidebar neredeyse yerinde durur, hareket eden geri kalan her şeydir. * * --ink kasıtlı olarak saf beyaz değil: koyu zeminde 18:1 halation üretir. * Test bu yüzden "koyu >= açık" değil, "koyu >= min(açık, AA)" arıyor. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg:#0f1320; --card:#161b2a; --card-2:#1b2131; --boot-bg:#0f1320; --boot-line:#262d3f; --ink:#e6e9f2; --ink-2:#b9c0d0; --muted:#9aa3b8; --faint:#848c9e; --line:#262d3f; --line-2:#1f2534; --track:#242b3c; --line-hover:#39415a; --line-hover-2:#39415a; --hover-soft:#1b2131; --hover-soft-2:#1b2131; --sel:#232a48; --scroll:#333b52; --scroll-hover:#454e69; --top-bg:rgba(15,19,32,.78); --overlay:rgba(0,0,0,.62); --lock-veil:rgba(15,19,32,.7); --fade-out:rgba(22,27,42,0); --scroll-shade:rgba(0,0,0,.42); --scroll-shade-0:rgba(0,0,0,0); --accent:#9394ff; --accent-soft:#1c2044; --accent-line:#333a68; --accent-line-2:#333a68; --sel-bg:rgba(129,140,248,.28); --teal:#2dd4bf; --good:#4ade80; --good-soft:#12301f; --good-soft-2:#12301f; --good-ink:#7ee2a8; --info:#93b4ff; --info-soft:#182545; --warn:#fbbf24; --warn-soft:#2e2415; --warn-ink:#f0c674; --bad:#f87171; --bad-soft:#2d1618; --bad-soft-2:#2d1618; --bad-ink:#f2a0a0; --bad-line:#4d2a2c; --err-ink:#ff9c92; --neutral-ink:#aeb6c6; --mock-bg:#211d12; --mock-line:#453820; --mock-ink:#e2c583; --attn-bg:#1d1a12; --attn-line:#453820; --stale-line:#d99b2a; --chart-grid:#262d3f; --chart-tick:#8b93a8; --chart-label:#aeb6c6; --chart-muted:#6e7689; --chart-good:#4ade80; --chart-violet:#a78bfa; --cefr-1:#2a3145; --cefr-2:#414a6e; --cefr-3:#818cf8; --chart-fill-1:rgba(129,140,248,.14); --chart-fill-2:rgba(129,140,248,.16); --chart-fill-3:rgba(129,140,248,.24); --tooltip-bg:rgba(0,0,0,.92); --chart-grid-2:#2a3145; --seg-empty:#2a3145; --chart-violet-2:#c084fc; --note-ok:#4ade80; --note-err:#f87171; --note-warn:#f0c674; --note-warn-ink:#f0b756; --field-line:#39415a; --note-ok-bg:#12301f; --note-ok-line:#1e4a33; --note-ok-text:#7ee2a8; --note-info-bg:#182545; --note-info-line:#27406e; --note-info-text:#93b4ff; --shadow-card:0 1px 3px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.55); --shade:rgba(0,0,0,.5); --shade-2:rgba(0,0,0,.55); --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 3px rgba(0,0,0,.4),0 10px 26px -12px rgba(0,0,0,.6); --shadow-md:0 4px 12px -2px rgba(0,0,0,.5),0 14px 34px -10px rgba(0,0,0,.6); --shadow-lg:0 28px 64px -16px rgba(0,0,0,.72); --ring:0 0 0 3px rgba(129,140,248,.32); } } /* YAZDIRMA: koyu palet BİLEREK screen ile sınırlı. Kâğıtta/PDF'te :root'un açık * değerleri geçerli kalır — aksi hâlde Ctrl+P neredeyse boş bir siyah sayfa üretir * (ölçülen 1.21:1) ve mürekkep yakar. Bu yüzden aşağıdaki blok da @media screen içinde. */ @media screen { /* Kullanıcı koyuyu açıkça seçti — OS açık modda olsa bile. Yukarıdaki blokla aynı * değerler; @media içindeki seçici OS koyu değilken eşleşmediği için tekrar gerekiyor. * İKİSİ BİREBİR AYNI OLMAK ZORUNDA — spa-theme.test.js bunu karşılaştırıyor. */ :root[data-theme="dark"] { color-scheme: dark; --bg:#0f1320; --card:#161b2a; --card-2:#1b2131; --boot-bg:#0f1320; --boot-line:#262d3f; --ink:#e6e9f2; --ink-2:#b9c0d0; --muted:#9aa3b8; --faint:#848c9e; --line:#262d3f; --line-2:#1f2534; --track:#242b3c; --line-hover:#39415a; --line-hover-2:#39415a; --hover-soft:#1b2131; --hover-soft-2:#1b2131; --sel:#232a48; --scroll:#333b52; --scroll-hover:#454e69; --top-bg:rgba(15,19,32,.78); --overlay:rgba(0,0,0,.62); --lock-veil:rgba(15,19,32,.7); --fade-out:rgba(22,27,42,0); --scroll-shade:rgba(0,0,0,.42); --scroll-shade-0:rgba(0,0,0,0); --accent:#9394ff; --accent-soft:#1c2044; --accent-line:#333a68; --accent-line-2:#333a68; --sel-bg:rgba(129,140,248,.28); --teal:#2dd4bf; --good:#4ade80; --good-soft:#12301f; --good-soft-2:#12301f; --good-ink:#7ee2a8; --info:#93b4ff; --info-soft:#182545; --warn:#fbbf24; --warn-soft:#2e2415; --warn-ink:#f0c674; --bad:#f87171; --bad-soft:#2d1618; --bad-soft-2:#2d1618; --bad-ink:#f2a0a0; --bad-line:#4d2a2c; --err-ink:#ff9c92; --neutral-ink:#aeb6c6; --mock-bg:#211d12; --mock-line:#453820; --mock-ink:#e2c583; --attn-bg:#1d1a12; --attn-line:#453820; --stale-line:#d99b2a; --chart-grid:#262d3f; --chart-tick:#8b93a8; --chart-label:#aeb6c6; --chart-muted:#6e7689; --chart-good:#4ade80; --chart-violet:#a78bfa; --cefr-1:#2a3145; --cefr-2:#414a6e; --cefr-3:#818cf8; --chart-fill-1:rgba(129,140,248,.14); --chart-fill-2:rgba(129,140,248,.16); --chart-fill-3:rgba(129,140,248,.24); --tooltip-bg:rgba(0,0,0,.92); --chart-grid-2:#2a3145; --seg-empty:#2a3145; --chart-violet-2:#c084fc; --note-ok:#4ade80; --note-err:#f87171; --note-warn:#f0c674; --note-warn-ink:#f0b756; --field-line:#39415a; --note-ok-bg:#12301f; --note-ok-line:#1e4a33; --note-ok-text:#7ee2a8; --note-info-bg:#182545; --note-info-line:#27406e; --note-info-text:#93b4ff; --shadow-card:0 1px 3px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.55); --shade:rgba(0,0,0,.5); --shade-2:rgba(0,0,0,.55); --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 3px rgba(0,0,0,.4),0 10px 26px -12px rgba(0,0,0,.6); --shadow-md:0 4px 12px -2px rgba(0,0,0,.5),0 14px 34px -10px rgba(0,0,0,.6); --shadow-lg:0 28px 64px -16px rgba(0,0,0,.72); --ring:0 0 0 3px rgba(129,140,248,.32); } }