/* ============================================================================
   Dinootomasyon — Tasarım token'ları
   Tek gerçek kaynak. Renk, tipografi, boşluk, kenar, gölge, hareket.

   Yön: "atölye" — mürekkep + bakır.
   Landing koyu (pazarlama yüzü), panel aydınlık (günlük çalışma yüzeyi).
   Aynı bakır her ikisinde de vurgu; yalnızca zemin değişir.

   Kontrast notu: bakırın üç tonu var ve karıştırılmamalı.
     --copper       dekoratif/kenar/ikon  (kağıt üstünde 3.6:1 — metin için YETERSİZ)
     --copper-ink   metin ve bağlantı     (5.6:1 — AA)
     --copper-solid buton zemini + beyaz  (5.6:1 — AA)
   ========================================================================== */

:root {
  /* ---- Zeminler (aydınlık / panel) ------------------------------------- */
  --paper: #faf8f4;          /* sayfa zemini */
  --surface: #ffffff;        /* kart, tablo, modal */
  --surface-sunk: #f4f1ea;   /* girinti: kod bloğu, adres kutusu, input grubu */
  --surface-hover: #f7f4ee;

  /* ---- Mürekkep -------------------------------------------------------- */
  --ink: #15121a;            /* birincil metin, başlık */
  --ink-2: #4a4453;          /* gövde metni */
  --ink-3: #7d7688;          /* ikincil, etiket, yardım metni */
  --ink-4: #a49dad;          /* placeholder, devre dışı */

  /* ---- Çizgiler -------------------------------------------------------- */
  --line: rgba(21, 18, 26, 0.10);
  --line-strong: rgba(21, 18, 26, 0.18);

  /* ---- Bakır (vurgu) --------------------------------------------------- */
  --copper: #b0763a;
  --copper-ink: #8a5a26;
  --copper-solid: #8f5d2a;
  --copper-hover: #764a1f;
  --copper-wash: rgba(176, 118, 58, 0.10);
  --copper-wash-2: rgba(176, 118, 58, 0.18);

  /* ---- Anlamsal durumlar ----------------------------------------------- */
  /* Renk bilgi taşır, dekorasyon yapmaz. Normal durum nötr; renk yalnızca
     dikkat gerektiren istisna için. */
  --ok: #3f7d5c;
  --ok-wash: rgba(63, 125, 92, 0.10);
  --warn: #8a6410;
  --warn-wash: rgba(138, 100, 16, 0.11);
  --danger: #a8322f;
  --danger-wash: rgba(168, 50, 47, 0.09);
  --info: #2f6180;
  --info-wash: rgba(47, 97, 128, 0.10);

  /* ---- Tipografi ------------------------------------------------------- */
  /* Başlık: Plus Jakarta Sans. Geometrik ama sakin — Syne'ın geniş, kendine
     has formları panelde kurumsal durmuyordu. Gövde: Manrope, nötr ve
     ekranda yoğun veri için okunaklı. İkisi de tam Türkçe diakritik taşır. */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Ölçek — 1.200 (minör üçlü), gövde 15px tabanlı */
  --text-2xs: 0.6875rem;  /* 11px — rozet, tablo üst bilgi */
  --text-xs: 0.75rem;     /* 12px — yardım metni */
  --text-sm: 0.8125rem;   /* 13px — ikincil, tablo hücresi */
  --text-base: 0.9375rem; /* 15px — gövde */
  --text-md: 1.0625rem;   /* 17px — kart başlığı */
  --text-lg: 1.25rem;     /* 20px — bölüm başlığı */
  --text-xl: 1.5rem;      /* 24px — sayfa başlığı */
  --text-2xl: 2rem;       /* 32px — istatistik değeri */
  --text-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.07em;

  /* ---- Boşluk — 4px tabanlı ------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* ---- Kenar yuvarlaklığı ---------------------------------------------- */
  /* Atölye yönü ölçülü: hap şeklinde buton yok, o jenerik SaaS imzası. */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-full: 999px;   /* yalnızca avatar ve durum noktası */

  /* ---- Gölge — sıcak tonlu, çok ölçülü --------------------------------- */
  --shadow-1: 0 1px 2px rgba(21, 18, 26, 0.04);
  --shadow-2: 0 2px 8px rgba(21, 18, 26, 0.06);
  --shadow-3: 0 12px 32px rgba(21, 18, 26, 0.10);
  --shadow-4: 0 24px 60px rgba(21, 18, 26, 0.16);

  /* ---- Hareket --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---- Katmanlar ------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-nav: 40;
  --z-sidebar: 60;
  --z-overlay: 100;
  --z-modal: 110;
  --z-toast: 200;

  /* ---- Ölçü ------------------------------------------------------------ */
  --sidebar-w: 248px;
  --shell: min(1120px, calc(100% - 2.5rem));
  --measure: 68ch;   /* okunabilir satır uzunluğu üst sınırı */

  /* ---- Odak halkası ---------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--copper);
}

/* ============================================================================
   Koyu yüzey — landing ve koyu bölümler.
   Aynı token adları; yalnızca değerler ters çevrilir, böylece bileşenler
   iki zeminde de değişmeden çalışır.
   ========================================================================== */
.on-dark,
.theme-dark {
  --paper: #0c0e12;
  --surface: #161a22;
  --surface-sunk: #10131a;
  --surface-hover: #1c212b;

  --ink: #f3eee6;
  --ink-2: #d5cec3;
  --ink-3: #a39c91;
  --ink-4: #6f6a63;

  --line: rgba(243, 238, 230, 0.12);
  --line-strong: rgba(243, 238, 230, 0.22);

  /* Koyu zeminde bakır açılır — aynı boya, farklı ışık */
  --copper: #c9894a;
  --copper-ink: #e0a86a;
  --copper-solid: #c9894a;
  --copper-hover: #e0a86a;
  --copper-wash: rgba(201, 137, 74, 0.14);
  --copper-wash-2: rgba(201, 137, 74, 0.24);

  --ok: #7cb89a;
  --ok-wash: rgba(124, 184, 154, 0.14);
  --warn: #d9b25f;
  --warn-wash: rgba(217, 178, 95, 0.14);
  --danger: #e08a86;
  --danger-wash: rgba(224, 138, 134, 0.14);
  --info: #86b3cd;
  --info-wash: rgba(134, 179, 205, 0.14);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 2px 10px rgba(0, 0, 0, 0.36);
  --shadow-3: 0 14px 36px rgba(0, 0, 0, 0.46);
  --shadow-4: 0 28px 64px rgba(0, 0, 0, 0.56);

  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--copper-ink);
}

/* ============================================================================
   Hareket duyarlılığı — tek yerden, tüm uygulama için.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}