/* ===========================================================================
   Takyk — ortak tasarım değişkenleri (TEK KAYNAK)
   Tercüme arayüzü (/), yönetim (/yonetim) ve Vize Randevu paneli (/randevu)
   bu dosyayı /static/takyk-tokens.css adresinden yükler. Değer burada değişir,
   üç ekran birlikte değişir.

   Yön: gece mesaisindeki noter masası. Yüzeyler nötr grafit, yazı mürekkep
   beyazı; tek renk mühür mürekkebi olarak logodaki turkuaz — yalnız seçim,
   odak ve tek önemli rakam için. Gradyan, renkli gölge ve leke yok.
   Derinlik karanlıkta yüzey basamağı + ince çizgiyle, aydınlıkta küçük gölgeyle.
   =========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Aydınlık (varsayılan) ------------------------------------------- */
  --bg-deep: #f4f4f5;      /* en dış zemin: servis menüsü, sayfa kenarı */
  --bg: #fafafa;           /* sayfa */
  --surface: #ffffff;      /* kart, balon */
  --surface-2: #f4f4f5;    /* yükseltilmiş: girdi, etkin satır, ikincil düğme */
  --surface-3: #ececee;    /* üzerine gelinmiş yükseltilmiş yüzey */
  --surface-sunk: #f4f4f5; /* kart içindeki çukur alan */

  --text: #171717;
  --text-dim: #525252;
  --text-faint: #737373;

  --line: rgba(23, 23, 23, .09);
  --line-soft: rgba(23, 23, 23, .06);
  --line-strong: rgba(23, 23, 23, .16);

  --accent: #137083;
  --accent-soft: rgba(19, 112, 131, .10);
  --on-accent: #ffffff;

  /* Birincil düğme: aydınlıkta mürekkep dolgu, karanlıkta kırık beyaz */
  --primary-bg: #171717;
  --primary-bg-hover: #2a2a2a;
  --primary-text: #ffffff;

  --ok: #16a34a;
  --warn: #a16207;
  --err: #dc2626;
  --ok-bg: rgba(22, 163, 74, .09);
  --warn-bg: rgba(161, 98, 7, .09);
  --err-bg: rgba(220, 38, 38, .08);
  --info-bg: rgba(19, 112, 131, .08);

  /* Belge (kâğıt) — tercüme çıktısının küçük önizlemesi */
  --paper: #fbfaf6;
  --paper-line: rgba(23, 23, 23, .16);
  --paper-edge: rgba(23, 23, 23, .14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* --- Ölçüler (tema bağımsız) ---------------------------------------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;

  --r-sm: 6px;     /* etiket, rozet, tuş */
  --r-ctl: 8px;    /* düğme, girdi, satır */
  --r-card: 12px;  /* kart */
  --r-panel: 16px; /* panel, modal, balon */
  --r-pill: 999px; /* yalnız durum noktası ve ilerleme çizgisi */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-enter: 320ms;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}

/* --- Karanlık: sistem tercihi --------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-deep: #0f0f10;
    --bg: #141415;
    --surface: #19191b;
    --surface-2: #232325;
    --surface-3: #2b2b2e;
    --surface-sunk: #111112;

    --text: #ededed;
    --text-dim: #a1a1a6;
    --text-faint: #85858b;

    --line: rgba(237, 237, 237, .08);
    --line-soft: rgba(237, 237, 237, .05);
    --line-strong: rgba(237, 237, 237, .14);

    --accent: #5cc4cf;
    --accent-soft: rgba(92, 196, 207, .12);
    --on-accent: #0b2328;

    --primary-bg: #ededed;
    --primary-bg-hover: #ffffff;
    --primary-text: #141415;

    --ok: #4cc38a;
    --warn: #d6a650;
    --err: #e5484d;
    --ok-bg: rgba(76, 195, 138, .10);
    --warn-bg: rgba(214, 166, 80, .10);
    --err-bg: rgba(229, 72, 77, .10);
    --info-bg: rgba(92, 196, 207, .08);

    --paper: #e9e6dd;
    --paper-line: rgba(20, 20, 21, .22);
    --paper-edge: rgba(20, 20, 21, .30);

    --shadow-sm: none;
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .45);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}

/* --- Karanlık: elle seçilmiş (aynı değerler) ------------------------------ */
:root[data-theme="dark"] {
  --bg-deep: #0f0f10;
  --bg: #141415;
  --surface: #19191b;
  --surface-2: #232325;
  --surface-3: #2b2b2e;
  --surface-sunk: #111112;

  --text: #ededed;
  --text-dim: #a1a1a6;
  --text-faint: #85858b;

  --line: rgba(237, 237, 237, .08);
  --line-soft: rgba(237, 237, 237, .05);
  --line-strong: rgba(237, 237, 237, .14);

  --accent: #5cc4cf;
  --accent-soft: rgba(92, 196, 207, .12);
  --on-accent: #0b2328;

  --primary-bg: #ededed;
  --primary-bg-hover: #ffffff;
  --primary-text: #141415;

  --ok: #4cc38a;
  --warn: #d6a650;
  --err: #e5484d;
  --ok-bg: rgba(76, 195, 138, .10);
  --warn-bg: rgba(214, 166, 80, .10);
  --err-bg: rgba(229, 72, 77, .10);
  --info-bg: rgba(92, 196, 207, .08);

  --paper: #e9e6dd;
  --paper-line: rgba(20, 20, 21, .22);
  --paper-edge: rgba(20, 20, 21, .30);

  --shadow-sm: none;
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .45);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .06);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-enter: 0ms; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --- Ortak imza: durum noktası --------------------------------------------
   Canlı süreçlerin yanında duran küçük, sabit daire (yanıp sönmez).
   Kullanım: <span class="dot ok"></span>  — ok | warn | err | info | (boş = sönük) */
.dot {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--text-faint);
  vertical-align: middle;
}
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.err { background: var(--err); }
.dot.info { background: var(--accent); }