/* ==========================================================================
   BOM 337 — tasarim belirtecleri (design tokens)                  tokens.css
   --------------------------------------------------------------------------
   TEK KAYNAK: web/tasarim/tokens.css. Site (varliklar/tasarim/) ve panel
   (yonetim/varlik/tasarim/) kopyalari `web/tasarim/esitle.sh` ile uretilir;
   kopyayi elle duzenleme.

   Dil: oyunun yeni pencereleri (@duzenle, @panel v519) — koyu kadife zemin,
   sarap kirmizisi baslik bandi, sicak altin kil cizgiler, hap cipler,
   degisiklik (kirli) vurgusu turuncu. Tasli altin cerceve ve parsomen YOK.

   Katmanlar: 1) ham paletler  2) anlamsal belirtecler (bilesenler BUNLARI
   kullanir)  3) tipografi / aralik / yaricap / golge / hareket.
   Kontrast: metin-1/2 tum yuzeylerde >= 7:1 / 4.5:1 (web/araclar/ekran.mjs olcer).
   ========================================================================== */

@font-face { font-family: "Lato BOM"; font-weight: 700; font-style: normal; font-display: swap; src: url("fontlar/lato-bold.woff") format("woff"); }
@font-face { font-family: "Lato BOM"; font-weight: 800; font-style: normal; font-display: swap; src: url("fontlar/lato-heavy.woff") format("woff"); }
@font-face { font-family: "Lato BOM"; font-weight: 900; font-style: normal; font-display: swap; src: url("fontlar/lato-black.woff") format("woff"); }
@font-face { font-family: "Source Sans BOM"; font-weight: 400; font-style: normal; font-display: swap; src: url("fontlar/sourcesanspro-regular.woff") format("woff"); }
@font-face { font-family: "Source Sans BOM"; font-weight: 400; font-style: italic; font-display: swap; src: url("fontlar/sourcesanspro-it.woff") format("woff"); }
@font-face { font-family: "Source Sans BOM"; font-weight: 600; font-style: normal; font-display: swap; src: url("fontlar/sourcesanspro-semibold.woff") format("woff"); }
@font-face { font-family: "Source Sans BOM"; font-weight: 700; font-style: normal; font-display: swap; src: url("fontlar/sourcesanspro-bold.woff") format("woff"); }

:root {
  /* ---------------------------------------------------------------- 1. ham */
  /* Kadife (sicak kahve-siyah) — zemin merdiveni; yukseldikce acilir. */
  --kadife-950: #0b0806;
  --kadife-900: #110c09;
  --kadife-850: #16100c;
  --kadife-800: #1c1510;
  --kadife-750: #231a14;
  --kadife-700: #2b2019;
  --kadife-600: #3a2c22;
  --kadife-500: #4e3c2f;

  /* Sarap (baslik bandi, tehlike-disi vurgu) */
  --sarap-900: #240a0e;
  --sarap-800: #3b1016;
  --sarap-700: #57161f;
  --sarap-600: #74202b;
  --sarap-500: #942c38;
  --sarap-400: #b6414d;

  /* Altin (kil cizgi, etiket, birincil eylem) */
  --altin-100: #fbefcf;
  --altin-200: #f4dca0;
  --altin-300: #ebc777;
  --altin-400: #ddb05a;
  --altin-500: #c79443;
  --altin-600: #a47634;
  --altin-700: #7c5827;
  --altin-800: #53391a;

  /* Krem metin */
  --krem-100: #f7eee3;
  --krem-200: #e6d7c6;
  --krem-300: #cbb7a2;
  --krem-400: #a8927c;

  /* ------------------------------------------------------ 2. anlamsal */
  --zemin:        var(--kadife-950);   /* sayfa */
  --yuzey-1:      var(--kadife-900);   /* ray, kart govdesi */
  --yuzey-2:      var(--kadife-850);   /* kart */
  --yuzey-3:      var(--kadife-800);   /* yukseltilmis / hover */
  --yuzey-4:      var(--kadife-750);   /* girdi, secili */
  --yuzey-5:      var(--kadife-700);

  --cizgi:        rgb(221 176 90 / .14);   /* altin kil cizgi */
  --cizgi-2:      rgb(221 176 90 / .24);
  --cizgi-guclu:  rgb(221 176 90 / .46);
  --cizgi-notr:   rgb(255 240 220 / .07);

  --metin:        var(--krem-100);   /* birincil — ~16:1 */
  --metin-2:      var(--krem-300);   /* ikincil — >= 8:1 */
  --metin-3:      var(--krem-400);   /* ucuncul/meta — >= 5.5:1 */
  --metin-altin:  var(--altin-300);  /* etiket, baslik vurgusu */
  --metin-ters:   #1a1108;           /* altin dolgu ustu */

  --birincil:        var(--altin-400);
  --birincil-ust:    var(--altin-300);
  --birincil-alt:    var(--altin-600);
  --birincil-yumusak:rgb(221 176 90 / .12);
  --odak:            var(--altin-300);

  --bant-1: var(--sarap-700);        /* baslik bandi degradesi */
  --bant-2: var(--sarap-900);

  --iyi:      #5cc27a;  --iyi-zemin:   rgb(92 194 122 / .12);   --iyi-koyu: #2f6d42;
  --uyari:    #e9ad45;  --uyari-zemin: rgb(233 173 69 / .12);
  --kotu:     #ec6a5e;  --kotu-zemin:  rgb(236 106 94 / .12);   --kotu-koyu: #8e2a22;
  --bilgi:    #74b3ea;  --bilgi-zemin: rgb(116 179 234 / .12);
  --kirli:    #f2a33a;  --kirli-zemin: rgb(242 163 58 / .10);   /* kaydedilmemis degisiklik */

  /* Oyun esya kalitesi (istemci renkleri) */
  --kalite-1: #d9d2c8;  --kalite-2: #62d36b;  --kalite-3: #5fa8ff;
  --kalite-4: #c07bff;  --kalite-5: #ff9a3c;

  /* Rol rozetleri */
  --rol-sahip: #d7b3ff;  --rol-admin: #f2cd80;  --rol-gm: #8fe3a8;  --rol-izleyici: var(--krem-300);

  /* ------------------------------------------------------ 3. tipografi */
  --yazi-govde:   "Source Sans BOM", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --yazi-baslik:  "Lato BOM", "Lato", "Segoe UI", system-ui, Arial, sans-serif;
  --yazi-kod:     ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Olcek: 12 / 13 / 14 / 16 / 18 / 22 / 28 / 36 / akiskan 44-72 */
  --b-xs:  .75rem;
  --b-sm:  .8125rem;
  --b-md:  .875rem;
  --b-lg:  1rem;
  --b-xl:  1.125rem;
  --b-2xl: 1.375rem;
  --b-3xl: 1.75rem;
  --b-4xl: clamp(1.9rem, 1.4rem + 1.6vw, 2.25rem);
  --b-5xl: clamp(2.4rem, 1.6rem + 3.2vw, 3.5rem);
  --b-6xl: clamp(2.8rem, 1.6rem + 5vw, 4.75rem);

  --satir-sik:   1.15;
  --satir-baslik:1.25;
  --satir-govde: 1.55;
  --satir-uzun:  1.7;
  --iz-genis: .12em;   /* BUYUK HARF ust etiketler */

  /* ------------------------------------------------------ 4. aralik (4px) */
  --a-1: 4px;  --a-2: 8px;  --a-3: 12px; --a-4: 16px; --a-5: 20px;
  --a-6: 24px; --a-8: 32px; --a-10: 40px; --a-12: 48px; --a-16: 64px;
  --a-20: 80px; --a-24: 96px; --a-32: 128px;

  /* ------------------------------------------------------ 5. yaricap */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-hap: 999px;

  /* ------------------------------------------------------ 6. golge + isik */
  --golge-1: 0 1px 2px rgb(0 0 0 / .35);
  --golge-2: 0 6px 16px -6px rgb(0 0 0 / .55), 0 2px 4px -2px rgb(0 0 0 / .4);
  --golge-3: 0 18px 40px -12px rgb(0 0 0 / .7), 0 6px 12px -6px rgb(0 0 0 / .45);
  --golge-4: 0 32px 80px -20px rgb(0 0 0 / .85);
  --isik-ust: inset 0 1px 0 rgb(255 236 200 / .06);          /* kadife ust kenar isigi */
  --parilti-altin: 0 0 0 1px rgb(235 199 119 / .35), 0 0 24px -4px rgb(235 199 119 / .35);

  /* ------------------------------------------------------ 7. hareket */
  --egri: cubic-bezier(.22, 1, .36, 1);
  --egri-giris: cubic-bezier(.65, 0, .35, 1);
  --sure-1: 120ms;  --sure-2: 200ms;  --sure-3: 320ms;  --sure-4: 600ms;

  /* ------------------------------------------------------ 8. yerlesim */
  --olcu-metin: 68ch;
  --kap: 1200px;
  --kap-dar: 760px;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --sure-1: 0ms; --sure-2: 0ms; --sure-3: 0ms; --sure-4: 0ms; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}