/*
  RoosterAI tasarım token'ları: sohbet ve yönetim paneli aynı değerleri paylaşır.
  Bileşen stilleri ham renk/ölçü yazmaz, bu dosyadaki adları kullanır; tema ve vurgu
  değişimi yalnızca burada yapılır. Kontrast sınırları test/tokens.test.js ile korunur.
*/

/* Temadan bağımsız ölçüler: yazı, boşluk, köşe, hareket, katman. */
:root {
  --font-display: ui-rounded, 'SF Pro Rounded', Nunito, 'Varela Round', Inter, ui-sans-serif, system-ui, sans-serif;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 12.5px;
  --text-sm: 14px;
  --text-md: 15px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 40px;
  --text-hero: 56px;

  /* Boşluk 4 px ızgarasında: adın sonundaki sayı ×4 px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  --r-control: 8px;
  --r-card: 12px;
  --r-panel: 16px;
  --r-pill: 999px;
  /* Eski adlar: sohbet ekranları değişmesin diye değerleri aynen korunur. Yeni ekranlar yukarıdaki kademeleri kullanır. */
  --r-sm: 10px;
  --r-md: var(--r-panel);
  --r-lg: 24px;

  --dur-fast: 150ms;
  --dur: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Eski gölge adları, temaya göre değişen yükselti kademelerine bağlı. */
  --shadow-1: var(--elev-1);
  --shadow-2: var(--elev-2);

  --z-side: 20;
  --z-menu: 30;
  --z-voice: 50;
  --z-toast: 60;
}

/* Açık tema varsayılandır; "sistem" teması açık işletim sisteminde de bunu kullanır. */
:root,
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #fbfaff;
  --surface: #ffffff;
  --side: #f3f1fb;
  /* Girdi ve kod alanı gibi içeri gömülü yüzey: sayfa zemininden bir kademe koyu. */
  --sunken: #f1eff9;
  --ink: #1d1b3a;
  --ink-2: #5a5778;
  /* Yalnızca ikincil/büyük metin ve ipucu için (zeminde ≥ 3:1); gövde metninde kullanılmaz. */
  --ink-3: #7a7798;
  --line: #e3e0f1;
  --hover: #ece9f8;
  --bubble: #efecfc;
  --code: #f5f3fd;
  --accent: #6a4df4;
  --accent-ink: #5a3de0;
  --accent-soft: #e9e5ff;
  --on-accent: #ffffff;
  --danger: #c0362c;
  /* Durum renkleri: koyu ton yazı, açık ton zemin (≥ 4.5:1). Anlam yalnızca renge bırakılmaz, ikon + etiket de gerekir. */
  --good: #0f6b3c;
  --good-soft: #e3f6ea;
  --warning: #7a4e00;
  --warning-soft: #fff3d6;
  --serious: #a23c0a;
  --serious-soft: #ffe9dc;
  --critical: #b3261e;
  --critical-soft: #fde8e6;
  --cyan: #06b6d4;
  --gold: #f5a524;
  --rooster: #d7263d;
  --elev-1: 0 1px 2px rgba(29, 27, 58, 0.06);
  --elev-2: 0 10px 30px rgba(29, 27, 58, 0.1), 0 2px 6px rgba(29, 27, 58, 0.06);
  --elev-3: 0 24px 60px rgba(29, 27, 58, 0.18), 0 4px 12px rgba(29, 27, 58, 0.08);
}

/* Koyu değerler iki yerde tanımlı: açıkça seçilen tema ve "sistem" + koyu tercih (test ikisinin aynı kalmasını sağlar). */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0e0d18;
  --surface: #17162b;
  --side: #12111f;
  --sunken: #0a0a14;
  --ink: #ecebfa;
  --ink-2: #a9a6c8;
  --ink-3: #8683ab;
  --line: #2a2845;
  --hover: #1f1d38;
  --bubble: #221f3d;
  --code: #1a1832;
  --accent: #8d79ff;
  --accent-ink: #b3a6ff;
  --accent-soft: #2a2455;
  --on-accent: #14102b;
  --danger: #ff8a80;
  /* Koyu temada tersi: açık ton yazı, koyu ton zemin. */
  --good: #5fd68e;
  --good-soft: #10301f;
  --warning: #f5c04a;
  --warning-soft: #33280a;
  --serious: #ff9c66;
  --serious-soft: #38200f;
  --critical: #ff8a80;
  --critical-soft: #3d1614;
  --cyan: #22d3ee;
  --gold: #ffbe3d;
  --rooster: #ff5a6e;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 14px 34px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --elev-3: 0 28px 70px rgba(0, 0, 0, 0.62), 0 4px 12px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme='system'] {
    color-scheme: dark;
    --bg: #0e0d18;
    --surface: #17162b;
    --side: #12111f;
    --sunken: #0a0a14;
    --ink: #ecebfa;
    --ink-2: #a9a6c8;
    --ink-3: #8683ab;
    --line: #2a2845;
    --hover: #1f1d38;
    --bubble: #221f3d;
    --code: #1a1832;
    --accent: #8d79ff;
    --accent-ink: #b3a6ff;
    --accent-soft: #2a2455;
    --on-accent: #14102b;
    --danger: #ff8a80;
    --good: #5fd68e;
    --good-soft: #10301f;
    --warning: #f5c04a;
    --warning-soft: #33280a;
    --serious: #ff9c66;
    --serious-soft: #38200f;
    --critical: #ff8a80;
    --critical-soft: #3d1614;
    --cyan: #22d3ee;
    --gold: #ffbe3d;
    --rooster: #ff5a6e;
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --elev-2: 0 14px 34px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
    --elev-3: 0 28px 70px rgba(0, 0, 0, 0.62), 0 4px 12px rgba(0, 0, 0, 0.45);
  }
}

/* Vurgu rengi seçeneği: varsayılan mor, isteğe bağlı Rooster kırmızısı (Ayarlar > Vurgu rengi). */
:root[data-accent='rooster'] {
  --accent: #db2f37;
  --accent-ink: #b81f27;
  --accent-soft: #ffe8e8;
  --on-accent: #ffffff;
}
:root[data-theme='dark'][data-accent='rooster'] {
  --accent: #ff6670;
  --accent-ink: #ff9aa1;
  --accent-soft: #3a1c26;
  --on-accent: #2a0a10;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme='system'][data-accent='rooster'] {
    --accent: #ff6670;
    --accent-ink: #ff9aa1;
    --accent-soft: #3a1c26;
    --on-accent: #2a0a10;
  }
}