/* Bu ürünün rengini, yarıçapını, ağırlığını ve hareket süresini seçtiği tek yer.
 *
 * Aynı koyu palet 2026-08-20'ye kadar ÜÇ dosyada birebir tekrar ediyordu:
 * landing.html'in satır içi <style>'ı (11 token), styles.css'in :root'u (20) ve
 * apps/mobile/styles.css'in :root'u (12). Bir rengi değiştirmek üç dosyaya
 * dokunmak demekti ve üçü zaten ayrışmıştı — landing `--accent-tint-text`i hiç
 * tanımlamıyordu, o yüzden orada yedi yerde metin rengi olarak `--primary`
 * kullanılmış ve 3,04:1'e kadar düşmüştü (bkz. docs/analiz/
 * 2026-08-20-tasarim-kiyaslama.md §3b). Kusur paletin değil, kopyanın kusuruydu.
 *
 * fonts.css yazı tipi için ne yapıyorsa bu dosya renk ve ölçek için onu yapıyor:
 * değer burada seçilir, her yerde `var()` ile okunur. Chrome'u renderleyen her
 * sayfa fonts.css'i zaten linkliyor; bu dosya styles.css'in en üstünden
 * `@import` ile geliyor, çünkü <head>'e yeni bir <link> koymak dört HTML
 * dosyasına birden dokunmak olurdu ve dördü aynı anda başka bir ajanda.
 *
 * apps/mobile/styles.css kendi kopyasını taşımak ZORUNDA: kabuk APK'nın içinde
 * dağıtılıyor ve bu origin'in stylesheet'ine ulaşamıyor. fonts.css'teki durumun
 * aynısı, ve orada olduğu gibi kopyanın ayrışmasını bir test tutuyor
 * (tests/brandAssets.mjs, tests/interaction.mjs).
 *
 * BURAYA SABİT RENK YAZARKEN DİKKAT: `--accent` kiracının kendi marka rengidir
 * (white-label). apps/web/app.js onu işletme kaydından eziyor ve `--accent-ink`i
 * apps/web/brandContrast.mjs ile türetiyor. Aşağıdaki `#436ad9` yalnızca
 * PLATFORM VARSAYILANIDIR; aksana bağlı hiçbir ton hex olarak yazılmaz,
 * `color-mix()` ile türetilir (gerekçesi "Aksan" bloğunda).
 */

:root {
  /* --- Koyu palet: ürünün bugünkü ve varsayılan teması ---------------------
   *
   * Bu blok temanın TAMAMINI tanımlıyor. Aşağıdaki iki blok yalnız açık
   * paletin üstüne yazıyor, hiçbir token'ı yarım bırakmıyorlar — bir rengin
   * TEK tanımı bir @media ya da [data-theme] bloğunun içinde durursa, o üçüncü
   * durumda (sistem koyu + zorlama yok) tanımsız kalır.
   *
   * `[data-theme="dark"]` için ayrı bir blok YOK ve bu bir eksiklik değil:
   * temel :root zaten koyu, ve açık bloğun seçicisi `:not([data-theme="dark"])`
   * taşıdığı için sistem açıkken bile ona ulaşmıyor. Üç durum böylece iki
   * blokla karşılanıyor. Bu dosyanın temeli bir gün açığa çevrilirse o zaman
   * koyu blok da yazılmak zorunda — çevirmeden önce burayı oku. */
  color-scheme: dark;

  --bg: #080b12;
  --side: #0b101b;
  --panel: #121a26;
  --panel-2: #0e1622;
  --ink: #e7edf6;
  --muted: #9aa4b2;
  --line: rgba(255, 255, 255, .14);
  --line-soft: rgba(255, 255, 255, .08);
  /* Yalnız "üzerinde" durumunda: kenar de dolguyla birlikte bir adım
     belirginleşmezse düğme hover'da yalnız zemin değiştirmiş gibi okunuyor. */
  --line-strong: rgba(255, 255, 255, .20);
  --soft: #101a33;
  --field: rgba(255, 255, 255, .05);
  --hover: rgba(255, 255, 255, .07);

  /* --- Aksan ve ondan türetilenler ---------------------------------------
   *
   * 2026-08-06'da #4f7dff'ten koyulaştırıldı: eski mavide beyaz yazı 3,68:1'di,
   * 14px metin için AA'nın altında — yani kontrast tabanının muaf tutmak
   * zorunda kalacağı tek renk platformun kendi varsayılanıydı. Aynı ton, %85
   * parlaklık; beyaz yazı 4,88:1.
   *
   * Hover ve basılı ton HEX OLARAK YAZILMIYOR. Yazılsaydı yalnız bu varsayılan
   * için doğru olurdu: kiracı `#ffffff` seçtiğinde app.js `--accent`i beyaza
   * çeviriyor, `--accent-ink` koyuya dönüyor, ve sabit yazılmış lacivert bir
   * hover o düğmeyi bir anda okunmaz yapıyor. `color-mix(in srgb, ...)`
   * kanal kanal kodlanmış sRGB değerlerini karıştırıyor — yani tarayıcının
   * boyayacağı piksel, brandContrast.mjs'in `darkenSrgb`i ile birebir aynı
   * sayı. İki taraf aynı aritmetiği yapıyor, biri CSS'te biri Node'da.
   *
   * %6,2 ve %17,7: bunlar yuvarlak sayılar değil, kanvasta ÖLÇÜLMÜŞ çiftini
   * (#3f63cc / #3757b3) tam olarak veren iki adım. Yeni bir ton uydurmak
   * yerine karar verilmiş olanı yeniden üretiyorlar.
   * Beyaz yazı: dolgu 4,88:1 · üzerinde 5,43:1 · basılı 6,61:1.
   *
   * Neden koyulaşıyor da açılmıyor: aksanı bir adım AÇTIĞIMIZDA (#4a71dd)
   * beyaz yazı 4,47:1'e düşüyor ve AA tabanının altına iniyor. Düğme
   * parlayamaz, ancak gömülebilir. */
  --accent: #436ad9;
  --accent-hover: color-mix(in srgb, var(--accent) 93.8%, #000);
  --accent-pressed: color-mix(in srgb, var(--accent) 82.3%, #000);
  /* app.js her ikisini de işletme kaydından eziyor; buradaki değerler giriş
     ekranının (renderBusiness koşmadan önce) gördüğü platform varsayılanı. */
  --accent-ink: #fff;
  /* Aksanın METİN hâli. İki katmanlı: `--accent-tint-on-dark`ı app.js kiracının
     rengine göre TÜRETİYOR (apps/web/brandContrast.mjs `accentTint`), kiracı
     yoksa hiç yazmıyor ve buradaki ölçülmüş platform tonu kalıyor — #a9c1ff,
     koyu kartta 9,79:1.
     Neden iki token: tek bir `--accent-tint-text`i JS'ten yazmak, aşağıdaki
     açık tema bloklarını `documentElement` üzerinden ezmek demekti; yani
     ölçülmüş açık değer bir kiracı renk seçtiği anda devre dışı kalıyordu.
     Şimdi CSS seçiyor, JS yalnız iki adayı bırakıyor. */
  --accent-tint-text: var(--accent-tint-on-dark, #a9c1ff);
  --accent-tint-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  /* `--accent-dark` basılı tonun eski adı. Ölçüldü: bugün onu okuyan HİÇBİR yer
     yok (`grep "var(--accent-dark)" apps/` sıfır) — takma ad yalnız, depo
     dışında kalmış bir dalın ya da yarım bir düzenlemenin sessizce kırılmaması
     için duruyor. Yeni kod `--accent-pressed` yazsın; bu satır bir sonraki
     temizlikte silinebilir. */
  --accent-dark: var(--accent-pressed);

  /* Platformun kendi mavisi. `--accent`ten AYRI bir token, çünkü o kiracıyla
     değişiyor; bu değişmiyor. Faturalandırma ve plan yüzeyleri gibi kiracı
     markasının işi olmayan yerler bunu okur. */
  --primary: #436ad9;
  --primary-dark: #3757b3;

  /* Durum renkleri. `--green` "onaylandı" demek; düğme dolgusu değil — o ayrım
     2026-08-06'da bir token'a mal oldu ve geri alınmamalı. */
  --green: #22c55e;
  --amber: #f5a623;
  --red: #ff4d6a;
  --success-ink: #22c55e;
  --success-bg: rgba(34, 197, 94, .16);
  --warning-ink: #f5a623;
  --warning-bg: rgba(245, 166, 35, .16);
  --danger-ink: #ff4d6a;
  --danger-bg: rgba(255, 77, 106, .16);
  --danger-line: rgba(255, 77, 106, .35);
  --danger-line-strong: rgba(255, 77, 106, .55);
  --danger-wash: rgba(255, 77, 106, .10);
  /* Dolgulu kırmızı YALNIZ onay penceresindeki son adımda. Tablodaki "Sil"
     dolgulu değil: dolgulu kırmızı bir sayfada altı kez geçerse hiçbiri
     uyarmıyor demektir. Beyaz yazı 6,02:1. */
  --danger-solid: #c2183a;
  /* Bu tek yüzeyin mürekkebi sabit ve olabilir: `--danger-solid` kiracının
     yazdığı bir değer değil, platformun kendi kırmızısı. Ölçüldü: 6,02:1. */
  --danger-solid-ink: #ffffff;
  --neutral-ink: #9aa4b2;
  --neutral-bg: rgba(255, 255, 255, .08);

  /* İkincil düğmenin zemini. Kartla aynı #121a26 olduğunda düğmenin kart
     üstünde hiç zemini yoktu, yalnız 1px çizgi; #1b2534 karttan ölçülebilir bir
     adım ayrı (1,13:1) ve üstündeki #e7edf6 yazı 13,11:1. */
  --surface-2: #1b2534;
  --surface-2-hover: #232f42;
  --surface-2-pressed: #2b3850;

  /* Devre dışı OPAKLIKLA DEĞİL gerçek renkle. `opacity` kenarlığı ve metni
     birlikte söndürüp altındaki zeminle karıştırıyor: aynı düğme kartın
     üstünde başka, sürgülü panelin üstünde başka bir kontrast veriyor, yani
     ölçülemez oluyor. Ölçülen: #757f90 / #171f2c = 4,09:1. Bu 4,5'in altında
     ve bilerek: WCAG 2.2 1.4.3 devre dışı bir denetimin metnini açıkça muaf
     tutuyor ("inactive user interface component"). Muafiyeti kullanan tek
     yer burası. */
  --disabled-bg: #171f2c;
  --disabled-ink: #757f90;
  --disabled-line: rgba(255, 255, 255, .10);

  /* Gölge yalnız GERÇEKTEN yüzen bir şey için: sürgülü çekmece, çekmece
     örtüsü. Koyu zeminde (#080b12) siyah gölgenin bedeli ödeniyor, karşılığı
     alınmıyor — kenarlığı olan durağan bir kart onu taşımamalı. */
  --shadow-drawer: 0 18px 40px rgba(0, 0, 0, .35);
  --shadow: var(--shadow-drawer);
}

/* --- Ölçekler: temadan bağımsız --------------------------------------------
 *
 * Renk temayla değişir, ölçek değişmez. Ayrı bir blok, çünkü aşağıdaki açık
 * tema blokları bunları tekrar etmemeli. */
:root {
  /* Yarıçap: bugün apps/web/*.css içinde 14 farklı sayısal değer vardı
     (8px on kez, 10px yedi, 999px altı, 14px beş, 7px dört, 12px dört, 9px üç,
     15px iki, ve 20/18/16/11/50%/99px birer). Karara bağlanmış 6px SIFIR kez
     geçiyordu. Üç basamak yetiyor ve üçünün üçü de bir soruya cevap veriyor:
     bu bir kontrol mü, bir kap mı, yoksa yuvarlak olması anlam taşıyan bir
     işaret mi. Dördüncü bir basamak eklemek isteyen önce hangi soruya cevap
     verdiğini yazsın. */
  --radius-control: 6px;
  --radius-container: 12px;
  --radius-round: 999px;

  /* Üç beden, kanvasta ölçüldü: satır içi 28px (tablo hücresindeki "Sil"),
     form 36px (girdi ile aynı hizaya oturması gereken düğme), sayfa birincili
     40px ("Yeni randevu"). Tek beden, tablodaki eylemi başlıktakiyle
     eşitliyordu. Kaba işaretçide üçü de 44px'e çıkıyor — WCAG 2.5.8'in tabanı
     24px ama bu kod tabanı her yerde 44 kullanıyor. */
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 40px;
  --control-touch: 44px;
  --control-pad-sm: 0 10px;
  --control-pad-md: 0 14px;
  --control-pad-lg: 0 16px;

  /* Ağırlık. Bugün 800 on dokuz, 700 yirmi altı kez geçiyor; 600 üç, 500 bir.
     Kırk beş ağıra karşı dört hafif — her şey kalın olduğu için hiçbir şey
     kalın değil, ve hiyerarşi boyla değil ağırlıkla kurulmaya çalışılıyor.
     510: Linear'ın --font-weight-medium değeri. Stripe, Linear, Vercel, Lemon
     Squeezy ve Cloudflare'in üretim CSS'inde birincil düğme 500/510; beşinin
     hiçbiri 700 değil. Değişken eksen zaten yükleniyor (wght@400..800), yani
     510 gerçekten elde edilebilir. */
  --weight-body: 400;
  --weight-medium: 510;
  --weight-heading: 600;
  --weight-display: 700;

  /* Tipografi: altı boy, hepsinin satır kutusu 8'in katı.
     Panelde h1 24px/1.2 (= 28,8px kutu) ve h2 15px/1.2 (= 18px) vardı — h2
     gövdeden KÜÇÜKTÜ, yani bölüm başlığı altındaki paragraftan küçük
     yazılıyordu, ve 24'ten 15'e tek adımda 1,6 kat düşüş vardı. Gövde ise ne
     `font-size` ne `line-height` taşıyordu: 1548 satırlık bir stil sayfasında
     okuma satır yüksekliği kararı hiç verilmemişti.
     Ölçek Fresha'nın pazarlama yüzeyinden okundu (40/48 · 32/40 · 24/32 ·
     20/28 · 16/24) ve iki uçtan biri atıldı: 40/48 bu üründe hiçbir yerde
     gerekmiyor, 12/16 ise tablo başlığı ve rozet için gerekiyor. */
  --text-2xl: 32px;   --leading-2xl: 40px;
  --text-xl: 24px;    --leading-xl: 32px;
  --text-lg: 20px;    --leading-lg: 28px;
  --text-md: 16px;    --leading-md: 24px;
  --text-sm: 14px;    --leading-sm: 20px;
  --text-xs: 12px;    --leading-xs: 16px;

  /* Hareket. Bütün apps/web ağacında üç `transition` satırı vardı ve ikisi
     hareket-azaltma iptaliydi. Özellik başına yazılıyor, `all` değil: `all`
     bir gün eklenecek `height` ya da `box-shadow`u da animasyona sokup
     kompozitörden çıkarır. Renk 150ms, basış 80ms — basış daha kısa, çünkü
     parmağın altındaki tepki geciktiğinde düğme "takılmış" gibi okunuyor.
     prefers-reduced-motion cevabı burada DEĞİL: base.css tek bir blokla her
     animasyonu ve her geçişi kapatıyor, ve oraya yeni bir satır eklemek
     gerekmesin diye orada. */
  --motion-tint: 150ms ease-out;
  --motion-press: 80ms ease-out;
  --transition-control:
    background-color var(--motion-tint),
    border-color var(--motion-tint),
    color var(--motion-tint),
    transform var(--motion-press);
}

/* --- Açık tema: sistem tercihi ---------------------------------------------
 *
 * Kullanıcı hiçbir şey seçmediyse (data-theme yok) işletim sisteminin cevabı
 * geçerli. `:not([data-theme="dark"])` şart: koyuyu ZORLAYAN biri, sistemi
 * açık olduğu için geri açığa düşmemeli.
 *
 * Ölçülen değerler docs/design/README.md ve kanvasın Palet artboard'undan.
 * Aşağıdaki blokla birebir aynı; iki kopya olmasının sebebi CSS'in bir kural
 * gövdesini iki farklı koşula bağlayamaması. Tek kopyaya inmenin yolu, ilk
 * boyamadan önce data-theme'i HER ZAMAN damgalayan bir JS kancası — o zaman bu
 * blok tamamen silinir. Kanca app.js'in işi ve bugün YOK; CSS JS'siz de doğru
 * çalışmak zorunda olduğu için blok burada duruyor. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg: #f4f6f9;
    --side: #ffffff;
    --panel: #ffffff;
    --panel-2: #f4f6f9;
    --ink: #0f1724;
    --muted: #5a6675;
    --line: rgba(15, 23, 36, .16);
    --line-soft: rgba(15, 23, 36, .09);
    --line-strong: rgba(15, 23, 36, .22);
    --soft: #e8edfa;
    --field: #f4f6f9;
    --hover: rgba(15, 23, 36, .05);

    /* Birincil düğme İKİ TEMADA AYNI: dolgu doygun olduğu için zeminden
       bağımsız, ve iki yüzeyde iki farklı birincil renk kullanıcıya aynı ürüne
       bakmadığını düşündürürdü. Değişen tek şey, aksanın METİN olarak
       kullanıldığı yer: koyuda #a9c1ff (kart üstünde 9,79:1), açıkta #3757b3
       (kart üstünde 6,61:1).
       Kiracı bir renk seçtiyse app.js `--accent-tint-on-light`ı yazıyor ve o
       değer BU YÜZEY için türetiliyor: aksan beyaz karta karşı adım adım
       koyulaşıp 4,5:1'e ulaştığı ilk tonda duruyor. Yazmadıysa aşağıdaki
       ölçülmüş değer geçerli. */
    --accent-tint-text: var(--accent-tint-on-light, #3757b3);
    --accent-tint-bg: color-mix(in srgb, var(--accent) 12%, transparent);

    --green: #14762f;
    --amber: #8a5300;
    --red: #c2183a;
    --success-ink: #14762f;
    --success-bg: #e6f6ec;
    --warning-ink: #8a5300;
    --warning-bg: #fbf0dc;
    --danger-ink: #c2183a;
    --danger-bg: #fdeaee;
    --danger-line: rgba(194, 24, 58, .30);
    --danger-line-strong: rgba(194, 24, 58, .50);
    --danger-wash: rgba(194, 24, 58, .07);
    --neutral-ink: #5a6675;
    --neutral-bg: #eceef2;

    --surface-2: #eef1f6;
    --surface-2-hover: #e4e9f0;
    --surface-2-pressed: #d6dee9;

    --disabled-bg: #f1f3f7;
    --disabled-ink: #7e8896;
    --disabled-line: rgba(15, 23, 36, .10);

    --shadow-drawer: 0 18px 40px rgba(15, 23, 36, .14);
  }
}

/* --- Açık tema: kullanıcı zorladı ------------------------------------------
 *
 * Üstteki @media bloğuyla aynı özgüllükte (0,2,0), o yüzden ONDAN SONRA
 * gelmek zorunda: sistem koyuyken açığı seçen biri bu blokla kazanıyor.
 * Değerler yukarıdakinin birebir kopyası — biri değişirse ikisi değişir. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6f9;
  --side: #ffffff;
  --panel: #ffffff;
  --panel-2: #f4f6f9;
  --ink: #0f1724;
  --muted: #5a6675;
  --line: rgba(15, 23, 36, .16);
  --line-soft: rgba(15, 23, 36, .09);
  --line-strong: rgba(15, 23, 36, .22);
  --soft: #e8edfa;
  --field: #f4f6f9;
  --hover: rgba(15, 23, 36, .05);

  --accent-tint-text: var(--accent-tint-on-light, #3757b3);
  --accent-tint-bg: color-mix(in srgb, var(--accent) 12%, transparent);

  --green: #14762f;
  --amber: #8a5300;
  --red: #c2183a;
  --success-ink: #14762f;
  --success-bg: #e6f6ec;
  --warning-ink: #8a5300;
  --warning-bg: #fbf0dc;
  --danger-ink: #c2183a;
  --danger-bg: #fdeaee;
  --danger-line: rgba(194, 24, 58, .30);
  --danger-line-strong: rgba(194, 24, 58, .50);
  --danger-wash: rgba(194, 24, 58, .07);
  --neutral-ink: #5a6675;
  --neutral-bg: #eceef2;

  --surface-2: #eef1f6;
  --surface-2-hover: #e4e9f0;
  --surface-2-pressed: #d6dee9;

  --disabled-bg: #f1f3f7;
  --disabled-ink: #7e8896;
  --disabled-line: rgba(15, 23, 36, .10);

  --shadow-drawer: 0 18px 40px rgba(15, 23, 36, .14);
}
