/*
  sku.ad tasarım tokenlarının **tek doğruluk kaynağı**.

  `apps/web` ve ileride `apps/landing` bu dosyayı yükler; TypeScript eşlemi
  (`src/tokens.ts`) buradan üretilir, elle yazılmaz. İki dosyayı elle senkron
  tutmak eski kurulumda kaymanın kaynağıydı — `pnpm --filter @sku-ad/tokens
  generate` üretir, testi kaymayı yakalar.

  Açık varsayılandır. Koyu tema **seçilir, sezilmez** (DESIGN.md, Explicit Dark
  Rule): `prefers-color-scheme` sorgusu yok, yalnız `data-theme="dark"`.

  Seçici `:root[data-theme="dark"]` değil düz `[data-theme="dark"]`: böylece
  `/tasarim` vitrinindeki koyu önizleme kendi kapsayıcısına niteliği koyarak
  sayfanın tamamını çevirmeden ikinci temayı gösterebilir. Özgüllük `:root` ile
  eşit, blok sonra geldiği için kazanır.

  `@grup:` yorumları üretici için işaretçidir; silme.
*/
:root {
  color-scheme: light;

  /* @grup: renk | Zemin, yazı ve sinyal */
  --paper: #f7f6f6;
  --ink: #090909;
  --body: #49494c;
  --muted: #66686c;
  --hairline: #d6d5d4;
  --control: #83868b;
  --focus: #204cf4;
  --focus-soft: #d8d8f8;
  --focus-on-ink: #8196ff;
  --white: #fff;

  /* @grup: yuzey | Paper alanı içindeki yüzeyler */
  --sheet-back: #ecebed;
  --sheet-front: #f8f7f7;
  --tile: #fbfafa;
  /* Ürün fotoğrafı zemini: pazaryeri görselleri beyaz zemin için çekilir, iki temada da beyaz kalır. */
  --surface-photo: #fff;
  --paper-veil: rgb(247 246 246 / 96%);

  /* @grup: ink-alani | Ink alanı kendi hairline ve ikincil yazısını taşır */
  --ink-hairline: #353538;
  --ink-body: #a8a8ab;
  --ink-muted: #99999d;
  --on-ink: #b5b5b8;
  --on-ink-muted: #8c8c90;

  /* @grup: durum | Anlam renkleri: her zaman ikon veya metinle eşlenir */
  --success: #1a7a48;
  --success-foreground: #fff;
  --destructive: #c92f24;
  --destructive-foreground: #fff;
  --warning: #e6a117;
  --warning-foreground: #3d2a00;
  /*
    Uyarı **ikonu** (Status Taxonomy, Notice). `--warning` (#e6a117) Paper,
    Sheet ve Tile üzerinde ≈2:1; ikon grafik nesne olarak ≥3:1 istiyor. Koyu
    amber en kötü yüzeyde (`--sheet-back`) 3.45:1. Koyu temada `--warning`la
    aynı değer.
  */
  --warning-icon: #a87300;
  /*
    Bilgi notu bir durum değil, bir açıklama: ikonu Muted. Product Blue'ya
    bağlıydı ve One Signal kuralıyla çakışıyordu (mavi = eylem).
  */
  --info: var(--muted);
  --info-foreground: #fff;

  /*
    @grup: kanal | Satış kanalının kendi rengi: işaret, alan değil.
    Yalnız Channel Mark'ın 8 px karesinde ve aynı ölçüdeki kanal pay
    şeridinde; satır, kutu ya da metin boyamaz (turuncu zeminde beyaz metin
    AA'yı geçmiyor).
  */
  --channel-trendyol: #f27a1a;
  --channel-hepsiburada: #ff6000;
  /*
    Yemeksepeti ve Migros logolarından (Wikimedia Commons); Beymen'in
    logosu elde yok, markanın siyahı.
  */
  --channel-beymen: #090909;
  --channel-yemeksepeti: #fa0050;
  --channel-migros: #f5821f;
  /*
    Web sitesi bir pazaryeri değil, markanın kendi sitesi: kendi rengi yok,
    Body Graphite (mavi değil — One Signal). Tanınmayan pazaryeri kontrol
    gri tonunda. İkisi de yalnız Channel Mark'ın karesinde.
  */
  --channel-web: var(--body);
  --channel-other: var(--control);

  /* @grup: grafik | Kategori paleti: Product Blue ve nötr grafitler */
  --chart-1: var(--focus);
  --chart-2: var(--body);
  --chart-3: var(--focus-on-ink);
  --chart-4: var(--ink);
  --chart-5: #a9b3f0;
  --chart-6: var(--muted);

  /*
    @grup: anlam | Semantik takma adlar

    Bileşen ham renk adına değil role başvurur. Hepsi `var()` referansı olduğu
    için koyu blokta tekrarlanmazlar — "Two Modes, One Token" kuralı budur.
    `--border` böler, `--input` bir kontrolün kenarını işaretler; ikisi asla yer
    değiştirmez (DESIGN.md, Structural-vs-Control Border Rule).
  */
  --background: var(--paper);
  --foreground: var(--ink);
  --surface-card: var(--tile);
  --surface-muted: var(--sheet-back);
  --text-body: var(--body);
  --text-muted: var(--muted);
  --border: var(--hairline);
  --input: var(--control);
  --ring: var(--focus);
  --primary: var(--focus);
  --primary-foreground: var(--white);

  /*
    Durum sözlüğü (DESIGN.md, Status Taxonomy): sekiz ton, her biri tek soru.
    Product Blue yalnız `decision`da. `warning` yalnız ikonu boyar; yazı
    `attention` gibi Ink kalır. `inactive` ile `locked` aynı renkte, ikonda
    ayrılır.
  */
  --status-success: var(--success);
  --status-progress: var(--body);
  --status-decision: var(--focus);
  --status-attention: var(--ink);
  --status-warning: var(--warning-icon);
  --status-error: var(--destructive);
  --status-inactive: var(--muted);
  --status-locked: var(--muted);

  /* @grup: bosluk | Boşluk ölçeği */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /*
    @grup: yogunluk | Tablo yoğunluk katmanları (DESIGN.md, Data Table)

    Satırın dikey dolgusu. Defter satırı 16, tablo satırı 12; compact yalnız
    okunan sayısal matris içindir (hücre içi kontrol yok). Etkileşimli öğe her
    katmanda 44 px dokunma alanını korur.
  */
  --row-ledger: var(--space-md);
  --row-table: var(--space-sm);
  --row-compact: var(--space-xs);

  /*
    @grup: tipografi | Yazı yüzleri ve operasyonel ölçek

    Display yüzü belge diline göre çözülür: TR Source Sans 3, EN Kedebideri.
    Uygulamada display yalnız sayfa ve bölüm başlığındadır; sayı, etiket ve
    gövde sistem yığınıyla yazılır (DESIGN.md, Display-Only-On-Titles Rule).
    Görünür hiçbir metin 12 px altına inmez.

    İki ayrı gövde yüzü var ve karıştırılmamalı: `--font-body` kamu sitesinin
    Helvetica Neue'su (DESIGN.md, Body Font), `--font-sans` uygulamanın sistem
    yığını (DESIGN.md, Application Body Font). Yüzeyler farklı olduğu için
    biri diğerinin yedeği değil.
  */
  --font-display-face: "Kedebideri";
  --font-display: var(--font-display-face), "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --type-ui-title-size: 1.875rem;
  --type-ui-title-leading: 1;
  --type-ui-title-tracking: -0.03em;
  --type-ui-section-size: 1.5rem;
  --type-ui-section-leading: 1;
  --type-ui-section-tracking: -0.03em;
  --type-ui-metric-size: 1.5rem;
  --type-ui-metric-leading: 1.25;
  --type-ui-metric-tracking: -0.02em;
  --type-ui-body-size: 0.875rem;
  --type-ui-body-leading: 1.43;
  --type-ui-label-size: 0.75rem;
  --type-ui-label-leading: 1;
  --type-ui-label-tracking: 0.06em;
  --type-ui-microcopy-size: 0.75rem;
  --type-ui-microcopy-leading: 1.33;

  /*
    @grup: bicim | Köşe ve gölge

    Kare dünya: türev hesap yok, literal sıfır. Tek gölge Product Canvas'ın ön
    katmanına aittir; uygulama yüzeylerinde gölge yoktur.
  */
  --radius: 0px;
  --shadow-canvas: 0 12px 30px rgb(11 11 12 / 9%);

  /* @grup: hareket | Tek hareket grameri: 180 ms durum vurgusu */
  --duration-state: 180ms;
  --ease-state: cubic-bezier(0.22, 1, 0.36, 1);
}

html[lang="tr"] {
  --font-display-face: "Source Sans 3";
}

[data-theme="dark"] {
  color-scheme: dark;

  --paper: #090909;
  --ink: #f7f6f6;
  --body: #c9c9cc;
  --muted: #a8a8ab;
  --hairline: #353538;
  --control: #636366;
  --focus: #8196ff;
  --focus-soft: #2a3170;
  --focus-on-ink: #204cf4;
  --white: #090909;

  --sheet-back: #1c1c1e;
  --sheet-front: #141416;
  --tile: #121213;
  --surface-photo: #fff;
  --paper-veil: rgb(9 9 9 / 96%);

  --ink-hairline: #d6d5d4;
  --ink-body: #49494c;
  --ink-muted: #66686c;
  --on-ink: #49494c;
  --on-ink-muted: #66686c;

  --success: #4ec98c;
  --success-foreground: #090909;
  --destructive: #ff6b5c;
  --destructive-foreground: #090909;
  --warning: #f2b84b;
  --warning-foreground: #090909;
  --warning-icon: #f2b84b;
  --info-foreground: #090909;
  --channel-trendyol: #ff8a2b;
  --channel-hepsiburada: #ff7a26;
  --channel-beymen: #f7f6f6;
  --channel-yemeksepeti: #ff2e6d;
  --channel-migros: #ff9b3d;

  --chart-2: #d6d5d4;
  --chart-5: #4d5ea8;

  --shadow-canvas: 0 12px 30px rgb(0 0 0 / 55%);
}