/* =====================================================================
   TASARIM BELİRTEÇLERİ (design tokens) — "Akış" tasarım sistemi
   Tüm renk, boşluk, yarıçap, gölge ve tipografi değerleri buradan gelir.
   Bileşen CSS'inde ham renk/px yazılmaz; yalnızca var(--…) kullanılır.
   ===================================================================== */
:root {
  color-scheme: dark;
  /* yüzeyler */
  --bg: #151515; --panel: #1c1c1c; --panel2: #252525; --raise: #2e2e2e;
  --line: #363636; --grid: #2a2a2a;
  /* metin */
  --ink: #ededed; --muted: #a8a8a8;
  /* marka: akış turkuazı + kehribar (XP) + menekşe (ileri/boss) */
  --accent: #38d6c4; --accent-d: #21a698; --accent-soft: #12312e; --onaccent: #04201c;
  --violet: #a78bfa; --violet-soft: #26204a;
  --amber: #f6b73c; --amber-soft: #3a2e12;
  /* anlamsal */
  --ok: #5ed38a; --ok-soft: #14301f; --warn: #f6b73c; --warn-soft: #3a2e12;
  --bad: #ff7b7b; --bad-soft: #3d1c1c; --info: #6ea8ff; --info-soft: #14243d;
  /* grafik serileri (Okabe–Ito esinli; renk körlüğüne dayanıklı) */
  --c1: #f59e42; --c2: #56b4e9; --c3: #3fd18a; --c4: #cc79a7; --c5: #f0e442; --c6: #a78bfa;
  /* ünite renkleri */
  --u0: #38d6c4; --u1: #56b4e9; --u2: #a78bfa; --u3: #f59e42; --u4: #f6b73c;
  /* tipografi */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --math: "STIX Two Text", "Cambria Math", "Times New Roman", serif;
  --fs: 100%;
  /* 4 px ızgarası */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  /* yarıçap, gölge, hareket */
  --r1: 8px; --r2: 12px; --r3: 18px; --rp: 999px;
  --sh1: 0 1px 2px rgba(0,0,0,.35); --sh2: 0 8px 24px rgba(0,0,0,.35);
  --ease: cubic-bezier(.2,.7,.2,1); --t1: .15s; --t2: .3s;
  --top: 56px; --rail: 92px; --tab: 64px; --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6f8; --panel: #ffffff; --panel2: #eef0f3; --raise: #e4e8ee;
  --line: #cdd3dc; --grid: #e4e8ee;
  --ink: #15202b; --muted: #4d5b6b;
  --accent: #006e62; --accent-d: #005a50; --accent-soft: #d6efeb; --onaccent: #ffffff;
  --violet: #5b3fc4; --violet-soft: #e8e2fb;
  --amber: #8a5600; --amber-soft: #fbefd2;
  --ok: #1b7a3c; --ok-soft: #dff3e4; --warn: #8a5600; --warn-soft: #fbefd2;
  --bad: #b3261e; --bad-soft: #fbe3e1; --info: #1a56c4; --info-soft: #e1ebfb;
  --c1: #b84f05; --c2: #0a67a3; --c3: #17753a; --c4: #a13a76; --c5: #6e6200; --c6: #5b3fc4;
  --u0: #006e62; --u1: #0a67a3; --u2: #5b3fc4; --u3: #b84f05; --u4: #8a5600;
  --sh1: 0 1px 2px rgba(20,30,40,.12); --sh2: 0 8px 24px rgba(20,30,40,.12);
  --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --bg: #f5f6f8; --panel: #ffffff; --panel2: #eef0f3; --raise: #e4e8ee; --line: #cdd3dc; --grid: #e4e8ee;
    --ink: #15202b; --muted: #4d5b6b;
    --accent: #006e62; --accent-d: #005a50; --accent-soft: #d6efeb; --onaccent: #ffffff;
    --violet: #5b3fc4; --violet-soft: #e8e2fb; --amber: #8a5600; --amber-soft: #fbefd2;
    --ok: #1b7a3c; --ok-soft: #dff3e4; --warn: #8a5600; --warn-soft: #fbefd2; --bad: #b3261e; --bad-soft: #fbe3e1; --info: #1a56c4; --info-soft: #e1ebfb;
    --c1: #b84f05; --c2: #0a67a3; --c3: #17753a; --c4: #a13a76; --c5: #6e6200; --c6: #5b3fc4;
    --u0: #006e62; --u1: #0a67a3; --u2: #5b3fc4; --u3: #b84f05; --u4: #8a5600;
    --sh1: 0 1px 2px rgba(20,30,40,.12); --sh2: 0 8px 24px rgba(20,30,40,.12);
  }
}