/* ==========================================================================
   tokens.css — tek kaynak token katmanı
   Tasarımdan (MaG Canlı Q&A.dc.html) çıkarılmış renk / tipografi / boşluk /
   yarıçap ölçeği. Ölçü token'ları değerleriyle adlandırıldı (--space-18 =
   18px) — tasarımdan koda geçerken eşleme hatası olmasın diye.
   Ürün yalnız açık tema — koyu tema yok, sistem tercihi izlenmiyor.
   CDN yok — yazı tipleri public/fonts altında dosya olarak durur (brief §9);
   @font-face bildirimleri fonts.css'te, roller aşağıdaki --font-* değerlerinde.
   ========================================================================== */

:root {
  /* --- Tipografi -------------------------------------------------------- */
  /* Üç yazı, üç iş. Sınır rol üzerinden çizilir, punto üzerinden değil:
     başlık sesi Plex Sans, okuma ve arayüz sesi Inter, makine sesi
     (kod, büyük harf mikro etiket, sayaç) Plex Mono. İki grotesk yan yana
     ancak rolleri ayrıksa okunur; aynı işi iki fonta verirsek hata gibi
     görünür. Yedek zincirler kesit dışı karakter için duruyor (fonts.css). */
  --font-heading: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, ui-sans-serif, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, ui-sans-serif, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-11: 11px;   /* rozet */
  --text-12: 12px;   /* mono üst etiket, karakter sayacı */
  --text-13: 13px;   /* yardımcı metin, alan etiketi, zaman */
  --text-14: 14px;   /* kart adı, sekme, sayaç */
  --text-15: 15px;   /* soru metni, form girdisi */
  --text-16: 16px;   /* birincil buton */
  --text-17: 17px;   /* panel başlığı */
  --text-18: 18px;   /* üst bar etkinlik adı */
  --text-22: 22px;   /* kısa adres */
  --text-40: 40px;   /* katılım ekranı başlığı */

  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-body: 1.55;

  --tracking-widest: 0.14em;   /* mono üst etiket */
  --tracking-wide: 0.06em;     /* rozet */
  --tracking-tight: -0.01em;
  --tracking-tighter: -0.02em;
  --tracking-tightest: -0.03em;

  /* --- Boşluk (ad = değer) ------------------------------------------------ */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-64: 64px;

  /* --- Yarıçap (ad = değer) ----------------------------------------------- */
  --radius-6: 6px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-11: 11px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-full: 999px;

  /* --- Ölçüler ------------------------------------------------------------ */
  --topbar-height: 84px;
  --form-column-width: 380px;
  --content-max-width: 1440px;
  --avatar-size: 38px;
  --vote-width: 56px;
  --qr-size: 168px;         /* katılım kartının içindeki QR */
  --poster-size: 400px;     /* katılım ekranının afişi */
  --join-column-max: 560px; /* afişin yanındaki bilgi sütunu */
  --rail-width: 44px;       /* kapalı form sütununun rayı */
  --icon-button-size: 30px; /* panel başındaki ikon düğmesi */
  --icon-size: 16px;        /* ikon ölçüsü */

  /* --- Hareket ------------------------------------------------------------ */
  --duration-fast: 140ms;
  --duration-base: 260ms;
  --duration-slow: 380ms;   /* liste yeniden sıralanırken (FLIP) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Renk · açık tema ---------------------------------------------------- */
  --bg: #E8E5DD;             /* sayfa zemini */
  --surface: #F7F5F0;        /* uygulama gövdesi */
  --surface-2: #EDEAE1;      /* sekme rayı, avatar, iskelet */
  --surface-3: #F2F0EA;      /* cevaplanmış kart */
  --card: #FFFFFF;
  --field: #FBFAF7;          /* girdi dinlenme hâli */

  --ink: #15140F;            /* birincil metin / siyah yüzey */
  --ink-2: #2A2822;          /* soru metni */
  --ink-3: #4A473F;          /* alan etiketi */
  --on-ink: #FFFFFF;         /* siyah yüzey üstündeki yazı */
  --muted: #6E6A61;
  --muted-2: #75716A;
  --avatar-ink: #5C584F;
  --disabled: #A9A498;       /* devre dışı buton yazısı */

  --border: #E3DFD4;
  --border-strong: #DDD8CB;
  --border-soft: #E0DCD0;
  --border-answered: #E6E2D8;

  --accent: #FFCC00;             /* dux sarısı */
  --accent-border: #E4B600;
  --accent-soft: #FFFBEB;        /* sabitlenmiş kart zemini */
  --accent-soft-border: #F0DC94;
  --accent-ink: #7A5A00;         /* uyarı yazısı */
  --accent-link: #8A6A00;        /* bağlantı hover */
  --on-accent: #15140F;          /* sarı zemin üstündeki yazı */

  /* Logo levhası yalnız açık temanın ihtiyacı: dux logosu beyaz + sarı,
     cream zeminde beyaz parçası kaybolur. Koyu temada logo kendi kontrastını
     taşır, levha tümden kalkar — zemin de dolgu da aşağıda sıfırlanır. */
  --brand-bg: #15140F;
  --brand-padding: var(--space-16) var(--space-20);
  --brand-padding-bar: var(--space-9) var(--space-12);

  --danger: #8C3A22;
  --danger-bg: #FFF3F1;
  --danger-bg-2: #FBE7E2;
  --danger-border: #F3D5CE;

  --live: #3BA55D;

  --tab-active: var(--card);   /* seçili sekme, rayından açık durmalı */
  --shadow-tab: 0 1px 2px rgba(0, 0, 0, 0.08);
  /* Katılım ekranının iki yanındaki nesneler (afiş · QR) aynı dili konuşur:
     afiş biraz daha yukarıda durur, QR zemine yapışık kalır. */
  --shadow-poster: 0 18px 40px rgba(21, 20, 15, 0.14), 0 2px 6px rgba(21, 20, 15, 0.06);
  --shadow-card: 0 8px 22px rgba(21, 20, 15, 0.07);
  --shadow-pinned: 0 1px 0 var(--accent-soft-border);
  --focus: var(--ink);
}