/* Copyright (c) 2026 Tayfun Şimşek. Tüm hakları saklıdır / All rights reserved.
   Purpose: copy of tasarim/tokens.css for the PWA shell (source of truth stays in tasarim/).
   Amaç: tasarim/tokens.css kopyası (kaynak tasarim/ klasöründedir); kod adı ekrandan çıkarıldı. */
/*
  SenSight · saha ürünü — tasarım belirteçleri (tokens)
  ---------------------------------------------------------------------------
  Amaç:      Her ekranın kullandığı görsel değerlerin TEK kaynağı (§30). Ekran ve
             bileşen dosyalarında ham hex ya da piksel yazılmaz; buradaki bir
             belirteç kullanılır.
  Tema:      Aydınlık :root ve [data-theme="light"]; karanlık [data-theme="dark"]
             ve sistem tercihi. Her renk iki temada AYRI çözülür.
  Aile:      --sight-red, --wordmark, --gray-* adları SenSight ailesiyle ortaktır
             (C:\reg). --brand bu ürünün kendi birincil eylem rengidir (öneri:
             "Kobalt"). --mark-* YALNIZ ürün sembolündedir (iş makinesi sarısı);
             durum rengi DEĞİLDİR — uyarı sarısıyla karıştırılmaz (QMS pirinç kuralı).
  Kural:     Anlam renkleri (--ok/--warn/--err/--idle) kişiselleştirmeye KAPALI.
             Aile kırmızısı yalnız marka vurgusudur, HATA RENGİ DEĞİLDİR.
  Kontrast:  Metin belirteçleri kendi zeminlerinde ≥ 4.5:1 (--ink-3 beyazda 4.76:1,
             --brand #4338ca beyazda 7.9:1; koyuda #a5b4fc zeminde 9:1).
*/

:root,
[data-theme="light"] {
  color-scheme: light;

  /* --- Aile (SenSight) --- */
  --sight-red: #e53935;
  --wordmark: #0D47A1;

  /* --- Slate nötrler (saf gri yok) --- */
  --gray-950: #0b1220;
  --gray-900: #0f172a;
  --gray-700: #334155;
  --gray-500: #64748b;
  --gray-400: #94a3b8;
  --gray-300: #cbd5e1;
  --gray-200: #e2e8f0;
  --gray-100: #f1f5f9;
  --gray-50:  #f8fafc;

  /* --- Ürün birincil eylem rengi (appBrandSeed önerisi: Kobalt) --- */
  --brand: #4338ca;
  --brand-strong: #3730a3;
  --brand-soft: #eef0ff;
  --brand-line: #c7cbfa;
  --on-brand: #ffffff;

  /* --- Ürün sembolü (yalnız işaret; durum rengi değil) --- */
  --mark-bg: #111827;
  --mark-ink: #f5b301;

  /* --- Zemin, yüzey, çizgi, metin --- */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e9eef4;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #64748b;
  --focus: #4338ca;

  /* --- Anlam renkleri: dört durumlu hüküm ---
     Her durum RENK + İKON + METİN taşır; renk tek başına bilgi değildir. */
  --ok: #10b981;      --ok-ink: #047857;    --ok-soft: #e9f9f2;
  --warn: #f59e0b;    --warn-ink: #a1500a;  --warn-soft: #fff6e6;
  --err: #ef4444;     --err-ink: #b91c1c;   --err-soft: #fdeeee;
  --idle: #94a3b8;    --idle-ink: #475569;  --idle-soft: #f1f5f9;
  --info-ink: #1d4ed8; --info-soft: #eaf1ff;

  /* --- Kenar şeridi / yan menü: açık temada AÇIK (Tayfun 13.10); koyu menü yalnız koyu temada.
         Kontrast ≥ 4.5:1 ölçüldü — muted #56657a beyazda 5.9, #f1f5f9'da 5.4; sight-red #c62828 beyazda 5.6 --- */
  --rail-bg: #ffffff;
  --rail-bg-2: #f1f5f9;
  --rail-ink: #0f172a;
  --rail-muted: #56657a;
  --rail-line: rgba(15, 23, 42, 0.10);
  --rail-active-bg: #eef0fe;
  --rail-active-ink: #3730a3;
  --rail-accent: #4338ca;
  --rail-sight-red: #c62828;

  /* --- Yazı --- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.25rem;    /* 36 */
  --fs-4xl: 3.25rem;    /* 52 */
  --lh-tight: 1.15;
  --lh: 1.5;
  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-mark: 780;       /* kelime işareti 750–800 */
  --track-tight: -0.02em;
  --track-caps: 0.06em;

  /* --- Boşluk (4 px tabanlı) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;  --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* --- Yarıçap --- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* --- Dokunma hedefi (§15: ≥44; eldiven/gece görevli yüzeyinde 56) --- */
  --tap: 44px;
  --tap-lg: 56px;

  /* --- Gölge --- */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.03);
  --sh-2: 0 10px 28px -12px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.05);
  --sh-3: 0 24px 60px -20px rgba(15, 23, 42, 0.30), 0 4px 12px rgba(15, 23, 42, 0.08);
  --ring: 0 0 0 3px rgba(67, 56, 202, 0.28);

  /* --- Hareket ("hareketi azalt" ayarında süreler sıfırlanır) --- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Yerleşim --- */
  --side-w: 272px;      /* masaüstü yan menü */
  --side-w-dar: 76px;   /* daraltılmış */
  --rail-w: 56px;       /* telefon/tablet kenar şeridi */
  --content-max: 1280px;
}

/* ===================== KARANLIK TEMA ===================== */
[data-theme="dark"] {
  color-scheme: dark;

  --sight-red: #ff8a80;
  --wordmark: #e2e8f0;

  --brand: #a5b4fc;
  --brand-strong: #c7d2fe;
  --brand-soft: #1b1d45;
  --brand-line: #3b3f8f;
  --on-brand: #12143a;
  --mark-bg: #1f2937;

  --bg: #0a111d;
  --surface: #101a2b;
  --surface-2: #162238;
  --surface-3: #1c2a44;
  --line: #22324c;
  --line-strong: #31445f;
  --ink: #e8eef6;
  --ink-2: #c3cedb;
  --ink-3: #94a3b8;
  --focus: #a5b4fc;

  --ok-ink: #34d399;   --ok-soft: #0b2a22;
  --warn-ink: #fbbf24; --warn-soft: #2b2008;
  --err-ink: #f87171;  --err-soft: #2d1215;
  --idle-ink: #a3b1c4; --idle-soft: #172236;
  --info-ink: #93b4ff; --info-soft: #14213d;

  --rail-bg: #070e1a;
  --rail-bg-2: #111d31;
  --rail-ink: #e2e8f0;
  --rail-muted: #94a3b8;
  --rail-line: rgba(226, 232, 240, 0.10);
  --rail-active-bg: #26265c;
  --rail-active-ink: #ffffff;
  --rail-accent: #a5b4fc;
  --rail-sight-red: #ff8a80;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sh-2: 0 12px 30px -12px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.30);
  --sh-3: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  --ring: 0 0 0 3px rgba(165, 180, 252, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sight-red: #ff8a80; --wordmark: #e2e8f0;
    --brand: #a5b4fc; --brand-strong: #c7d2fe; --brand-soft: #1b1d45; --brand-line: #3b3f8f; --on-brand: #12143a; --mark-bg: #1f2937;
    --bg: #0a111d; --surface: #101a2b; --surface-2: #162238; --surface-3: #1c2a44;
    --line: #22324c; --line-strong: #31445f; --ink: #e8eef6; --ink-2: #c3cedb; --ink-3: #94a3b8; --focus: #a5b4fc;
    --ok-ink: #34d399; --ok-soft: #0b2a22; --warn-ink: #fbbf24; --warn-soft: #2b2008;
    --err-ink: #f87171; --err-soft: #2d1215; --idle-ink: #a3b1c4; --idle-soft: #172236;
    --info-ink: #93b4ff; --info-soft: #14213d;
    --rail-bg: #070e1a; --rail-bg-2: #111d31; --rail-active-bg: #26265c;
    --rail-ink: #e2e8f0; --rail-muted: #94a3b8; --rail-line: rgba(226, 232, 240, 0.10);
    --rail-active-ink: #ffffff; --rail-accent: #a5b4fc; --rail-sight-red: #ff8a80;
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --sh-2: 0 12px 30px -12px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.30);
    --sh-3: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
    --ring: 0 0 0 3px rgba(165, 180, 252, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}