/* ============================================================================ poSell — tasarım tokenları · "Kil & Kömür" (seçildi 2026-09-06) ============================================================================ BU DOSYA HİÇBİR PİKSELİ DEĞİŞTİRMEZ. `:root` ve `[data-ps-theme]` DIŞINDA TEK BİR SEÇİCİ İÇEREMEZ — kural budur. Sebebi: bu dosyanın işi, boru hattını (yol, önbellek, mount, Docker COPY, gulp'un header.php'yi yeniden yazması) görsel hiçbir risk almadan kanıtlamak. Buraya bir bileşen kuralı sızarsa aşamanın anlamı kalmaz; ekran görüntüsü farkı SIFIR olmalı. Bileşen kuralları ayrı dosyalarda yaşar: bs3.css → uygulama (Bootstrap 3, partial/header.php) bs5.css → giriş ekranı (Bootstrap 5, login.php) base.css → Bootstrap'sız kabuklar (admin/, legal/, hata sayfaları) İKİ MOD, TEK PALET Açık varsayılandır. Koyu `[data-ps-theme="dark"]` ile AÇILIR — `prefers-color-scheme` BİLEREK KULLANILMAZ: kasiyerin işletim sistemi ayarı sabah 9'da kasayı yeniden boyayamaz. Tema ürünün kararıdır, cihazın değil. Bayrak ``'ye basılır, `.pos-skin`'e değil — bootstrap-dialog modalları, `.ui-autocomplete` menüsü ve bootstrap-select açılırları DOM'da body'ye portallanır; kapsam dar olursa koyu kasanın üstünde beyaz modal açılır. Nerede hangi mod: KOYU → satış ekranı, kontrol düzlemi paneli (gün boyu açık, hızlı çalışılır) AÇIK → arka ofis, raporlar, kayıt akışı, sözleşmeler, fatura/fiş çıktısı ========================================================================= */ :root { /* ---- yüzeyler ---- */ --ps-paper: #faf8f5; /* sayfa zemini */ --ps-surface: #ffffff; /* kart, panel */ --ps-surface-2: #f2ede7; /* ikincil yüzey, tablo başlığı */ /* ---- metin ---- */ --ps-ink: #1c1917; /* ana metin */ --ps-ink-2: #57534e; /* ikincil metin */ --ps-ink-3: #8b837c; /* sönük, yardım metni */ /* ---- çizgiler ---- */ --ps-line: #e5ded5; /* ince ayraç */ --ps-line-2: #d3c9bd; /* kenarlık, girdi çerçevesi */ /* ---- marka ---- */ --ps-brand: #9a3412; /* birincil eylem */ --ps-brand-2: #c2410c; /* hover, vurgu */ /* Marka tinti. `ok/warn/danger/info` ailesinin `-bg`'si vardı, markanınki YOKTU — dolu marka zemininin üstündeki ikon çipi türetilemiyordu. */ --ps-brand-bg: #ffedd5; /* ---- durum ---- ⚠️ --ps-warn (#b45309) marka ailesinden; uyarı şeritleri renge DEĞİL ikona ve zemine yaslanmalı, yoksa birincil eylemle karışır. */ --ps-ok: #4d7c0f; --ps-warn: #b45309; --ps-danger: #b91c1c; --ps-info: #0369a1; /* durum zeminleri — şerit ve rozetler için */ --ps-ok-bg: #ecfccb; --ps-warn-bg: #fef3c7; --ps-danger-bg: #fee2e2; --ps-info-bg: #e0f2fe; /* ---- gölge ---- */ --ps-shadow-s: 0 1px 2px rgba(28, 25, 23, .05); --ps-shadow-m: 0 1px 2px rgba(28, 25, 23, .05), 0 10px 30px -18px rgba(28, 25, 23, .32); --ps-shadow-l: 0 2px 4px rgba(28, 25, 23, .06), 0 26px 60px -28px rgba(28, 25, 23, .46); /* ---- köşe yarıçapı ---- Landing 12 farklı sabit değer kullanıyordu (5,7,9,10,11,13,14,16,18,999); beşe indirildi. */ --ps-r-1: 6px; /* rozet, etiket */ --ps-r-2: 10px; /* buton, girdi */ --ps-r-3: 14px; /* kart, panel */ --ps-r-4: 20px; /* modal, sayfa bloğu */ --ps-r-pill: 999px; /* durum rozeti, avatar */ /* ---- boşluk (4px tabanlı) ---- */ --ps-sp-1: 4px; --ps-sp-2: 8px; --ps-sp-3: 12px; --ps-sp-4: 16px; --ps-sp-5: 24px; --ps-sp-6: 32px; --ps-sp-7: 40px; /* tile kolonları arası; 32'nin üstünde adım yoktu */ /* ---- tipografi ---- Webfont DIŞARIDAN ÇEKİLMEZ (CSP + çevrimdışı kasa). Self-host edilene kadar her iki aile de sistem yığınına düşer ve hiçbir şey kırılmaz; `public/fonts/posell/` dolunca aynı token'lar gerçek fontu gösterir. Landing'in serif gövdesi (Newsreader 17,5px) BİLEREK taşınmadı: satır yüksekliğini büyütür, sepette görünen satır sayısını düşürür ve orantılı rakamları fiyat sütununu kaydırır. */ --ps-font-ui: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ps-font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ps-fs-base: 15px; --ps-fs-sm: 13px; --ps-fs-xs: 11.5px; --ps-fs-lg: 19px; --ps-fs-xl: 27px; /* ---- dokunma hedefi ---- Kasiyer ekrana bakmadan, parmak ucuyla ve acele dokunur. */ --ps-touch-min: 44px; /* mutlak alt sınır */ --ps-touch-key: 58px; /* numpad tuşu */ --ps-touch-primary: 62px; /* satışı tamamla */ /* Ana ekran tile'ının KISA kenarı. 44/58/62 tuş ölçeğiydi; tile bunların üstünde ayrı bir ölçek. 1440px altında `bs3.css` bunu 150px'e indirir — 120px mutlak taban hiçbir kırılma noktasında geçilmez. */ --ps-touch-tile: 180px; /* ---- hareket ---- Dokunmatikte basmanın karşılığı GÖRÜNMELİ; süre tek yerden gelsin diye token. bs3.css'teki `.btn` geçişi hâlâ kendi `.15s`'ini kullanıyor — bilerek dokunulmadı, o ayrı bir gerileme riski. */ --ps-motion-fast: 120ms; } [data-ps-theme="dark"] { --ps-paper: #171412; --ps-surface: #211d1a; --ps-surface-2: #2b2622; --ps-ink: #f5f0ea; --ps-ink-2: #b8afa6; --ps-ink-3: #8a8078; --ps-line: #332d28; --ps-line-2: #453d36; --ps-brand: #fb923c; --ps-brand-2: #fdba74; /* Açık moddaki opak tintin koyu karşılığı yarı saydam — diğer `-bg`'lerle aynı kurgu, altındaki yüzey tonu görünsün diye. */ --ps-brand-bg: rgba(251, 146, 60, .14); --ps-ok: #a3e635; --ps-warn: #fbbf24; --ps-danger: #f87171; --ps-info: #38bdf8; /* Koyu zeminde durum zeminleri opak değil YARI SAYDAM: altındaki yüzey tonu görünsün ki kart/panel derinliği kaybolmasın. */ --ps-ok-bg: rgba(163, 230, 53, .14); --ps-warn-bg: rgba(251, 191, 36, .14); --ps-danger-bg: rgba(248, 113, 113, .14); --ps-info-bg: rgba(56, 189, 248, .14); --ps-shadow-s: 0 1px 2px rgba(0, 0, 0, .4); --ps-shadow-m: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -18px rgba(0, 0, 0, .8); --ps-shadow-l: 0 2px 4px rgba(0, 0, 0, .45), 0 26px 60px -28px rgba(0, 0, 0, .9); }