/* ============================================================
   MEYCOIN — TASARIM SİSTEMİ
   Tek kaynak. hub.css ve okey.css yalnızca buradaki değişkenleri
   tüketir; hiçbir yerde tek seferlik renk/ölçü yazılmaz.

   TEZ: Tek yüksek kontrastlı, dokulu nesne TAŞTIR. Masa ve çerçeve
   sakin ve düz kalır; tüm görsel enerji taşlarda toplanır. Rakipler
   (101 Okey Plus, Altınstar) her yerde bağırıyor — kimliğimiz sessiz
   bir sahnede tek dokunulası nesne olmak.

   NOT: futbolun style.css'i bilerek DIŞARIDA. Yeşil dünyası çalışıyor
   ve onu bu turda değiştirmek gereksiz risk olurdu.
   ============================================================ */

:root {
  /* --- Mürekkep ölçeği: sahne. Nötr değil, hafif petrol yönlü;
         "seçilmiş" okunsun diye. --- */
  --ink-950: #04121a;   /* en derin — çuha ortası */
  --ink-900: #071a24;   /* masa zemini */
  --ink-800: #0b2531;   /* panel */
  --ink-700: #10303f;   /* yükseltilmiş yüzey */
  --ink-600: #17415466; /* kenarlık (yarı saydam) */

  /* --- Petrol: okeyin kimliği --- */
  --teal-600: #0e4a63;
  --teal-500: #1b6d8c;
  --teal-400: #2a86a8;
  --teal-300: #56a6c4;

  /* --- Altın: MeyCoin. Tek vurgu rengi; sıra, para ve onay hep bu. --- */
  --gold-500: #c9992f;
  --gold-400: #e8b84b;
  --gold-300: #ffd977;

  /* --- Ahşap: yalnızca ıstaka. Sahnedeki tek sıcak yüzey. --- */
  --wood-400: #cf9147;
  --wood-500: #a86c28;
  --wood-700: #6f4415;

  /* --- Taş: sahnedeki en parlak şey. --- */
  --ivory-50: #fffdf7;
  --ivory-100: #f6f1e3;
  --ivory-200: #e4dbc4;
  --tile-ink: #10222c;

  /* Taş rakam renkleri — gerçek okey seti */
  --tile-red: #c1202a;
  --tile-yellow: #c98d12;
  --tile-blue: #1f6fc4;
  --tile-black: #23272e;
  --tile-joker: #6f4a9c;

  /* --- Anlamsal durumlar. Vurgu renginden AYRI: altın "senin sıran"
         demek, yeşil "başarılı" demek. Karışırsa ikisi de anlamını
         yitirir. --- */
  --ok-400: #46c07d;
  --ok-300: #6ee39b;
  --warn-400: #e8a33c;
  --bad-500: #b4302f;
  --bad-400: #d9534f;
  --bad-300: #ff9c9c;

  /* Mor: yalnızca ÇİFT açılışı. Seri/set altın, çift mor — iki açılış
     biçimi bir bakışta ayrışsın. */
  --violet-300: #a98adf;
  --violet-200: #d8c6f5;

  /* --- Metin --- */
  --text: #eaf4f8;
  --text-dim: #9dbccc;
  --text-faint: #6d8b9c;

  /* --- Aralık ölçeği: 4px tabanlı. Ara değer uydurulmaz. --- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* --- Köşe --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* --- Yükseklik: üç kademe. Daha fazlası hiyerarşiyi bulandırır. --- */
  --e1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e2: 0 6px 16px rgba(0, 0, 0, 0.42);
  --e3: 0 18px 44px rgba(0, 0, 0, 0.5);

  /* --- Hareket: iki süre. Kısa = geri bildirim, orta = geçiş. --- */
  --t-fast: 110ms;
  --t-mid: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* --- Tipografi ölçeği --- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.7rem;
  --fs-sm: 0.82rem;
  --fs-md: 0.95rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --track-wide: 0.14em;  /* büyük harfli etiketler */
}

/* Rakamların her yerde hizalanması: skor, süre, bakiye, taş.
   Oyunda sayı çok; kayan genişlik hepsini titretir. */
.tnum,
.okey-tile,
.okey-clock,
.okey-meter-value,
.okey-score td,
.hub-chip {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-mid: 0ms; }
}