/* =====================================================================
   Satranç Radar · Tasarım tokenları
   Tüm renk, tip, boşluk, yarıçap, gölge ve hareket kararları burada.
   Bileşenler yalnızca bu değişkenleri kullanır.
   ===================================================================== */
:root {
  color-scheme: light;

  /* Zemin ve yüzeyler */
  --bg: #f4f6f2;
  --surface: #ffffff;
  --surface-2: #eaefe6;
  --surface-3: #dfe6da;

  /* Mürekkep */
  --ink: #1b2320;
  --ink-2: #46514c;
  --ink-3: #6b7772;
  --ink-inverse: #ffffff;

  /* Çizgiler */
  --line: #d5ddd5;
  --line-2: #e4e9e2;
  --line-strong: #b9c4bb;

  /* Vurgu: turnuva tahtası yeşili */
  --accent: #4f7f3e;
  --accent-hover: #43703a;
  --accent-2: #3c6430;
  --accent-soft: #dfebd8;
  --accent-ink: #ffffff;

  /* İkincil: kemik/sarı */
  --bone: #d8c86f;
  --bone-soft: #f4efd2;
  --bone-ink: #5a4d10;

  /* Durum renkleri */
  --ok: #2e7d4f;       --ok-bg: #dcefe3;
  --warn: #8f5807;     --warn-bg: #f7e9cf;
  --danger: #a93a2b;   --danger-bg: #f7e2dd;
  --info: #2e62a6;     --info-bg: #dce7f6;
  --neutral: #5c6964;  --neutral-bg: #e5eae6;

  /* Koyu üst menü */
  --header-bg: #1b2320;
  --header-ink: #e7ece7;
  --header-ink-2: #aab5ae;
  --header-line: #2d3834;

  /* Tipografi */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 12.5px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 46px;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.6;

  /* Boşluk */
  --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-12: 48px;
  --space-16: 64px;

  /* Yarıçap */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Gölge */
  --shadow-sm: 0 1px 2px rgba(20, 30, 25, 0.06);
  --shadow-md: 0 8px 24px -12px rgba(20, 30, 25, 0.22), 0 1px 2px rgba(20, 30, 25, 0.06);
  --shadow-lg: 0 18px 48px -20px rgba(20, 30, 25, 0.3), 0 2px 6px rgba(20, 30, 25, 0.06);

  /* Hareket */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Düzen */
  --container: 1180px;
  --container-narrow: 860px;
  --container-prose: 72ch;
  --header-height: 64px;
  --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}