/* Loto Diyarı ortak tasarım jetonları (Faz 3).
 * Tek doğruluk kaynağı: boşluk, tipografi, yarıçap, odaklar ve durum renkleri.
 * Yalnızca ekleyicidir: mevcut bileşen stillerini ezmez; Faz 4-7 sayfaları
 * bu jetonlara taşınır. color-mix kullandığı için modern tarayıcı gerekir. */
:root{
  /* Semantik renkler mevcut tema paletinden türetilir; light/dark otomatik eşleşir. */
  --surface-1:var(--panel);--surface-2:var(--panel2);--elevated:var(--panel3);
  --border:var(--line);--text-primary:var(--text);--text-secondary:var(--muted);
  --text-muted:color-mix(in srgb,var(--muted) 78%,var(--bg));
  --primary:var(--purple);--primary-hover:var(--purple2);--primary-foreground:#fff;
  --success:var(--green);--warning:var(--gold);--danger:var(--red);--info:var(--blue);
  /* Yeni bileşenlerde 4px ölçeği; eski --sp-* uyumluluk için korunur. */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --corner-1:8px;--corner-2:12px;--corner-3:16px;--corner-4:20px;
  --type-page:clamp(28px,2.7vw,36px);
  --type-section:clamp(20px,1.8vw,24px);
  --type-body:15px;--type-meta:12px;
  --motion-instant:100ms;--motion-fast:150ms;--motion-normal:200ms;
  --motion-panel:250ms;--motion-expressive:500ms;--motion-stagger:70ms;
  --motion-ease:cubic-bezier(.2,.8,.2,1);--motion-ease-emphasized:cubic-bezier(.2,.9,.25,1);
  /* 8px tabanlı boşluk ölçeği */
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:40px;--sp-6:48px;--sp-8:64px;
  /* Tipografi ölçeği (akışkan başlıklar, sabit gövde) */
  --fs-display:clamp(2.2rem,5vw,3.6rem);
  --fs-h1:clamp(1.7rem,3.6vw,2.4rem);
  --fs-h2:1.15rem;--fs-h3:1rem;
  --fs-body:.86rem;--fs-small:.74rem;--fs-caption:.66rem;
  --lh-tight:1.12;--lh-body:1.6;
  /* Yarıçap ölçeği */
  /* Legacy names map to the same 8/12/16/20px scale. */
  --radius-sm:var(--corner-1);--radius-md:var(--corner-2);--radius-lg:var(--corner-3);--radius-xl:var(--corner-4);--radius-pill:999px;
  /* Dokunma hedefi tabanı (WCAG 2.5.8) */
  --touch:44px;
  /* Görünür odak halkası (her iki temada da okunur) */
  --focus-ring:0 0 0 3px color-mix(in srgb,var(--cyan) 45%,transparent);
  /* Durum renkleri (metin + kenarlık için) */
  --status-ok:var(--green);--status-warn:var(--gold);
  --status-err:var(--red);--status-info:var(--cyan);
  /* Durum yüzeyleri (açık/koyu temada renk değişkenlerinden türetilir) */
  --surface-ok:color-mix(in srgb,var(--green) 14%,var(--panel2));
  --surface-warn:color-mix(in srgb,var(--gold) 13%,var(--panel2));
  --surface-err:color-mix(in srgb,var(--red) 13%,var(--panel2));
  --surface-info:color-mix(in srgb,var(--cyan) 12%,var(--panel2));
}
html[data-theme="dark"]{--primary-foreground:#11182b}
@media(max-width:600px){:root{--type-page:clamp(24px,6vw,28px);--type-section:20px;--type-body:15px;--type-meta:12px}}
/* Ortak odak davranışı: hiçbir sayfa odak halkasını söndüremez. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:0;
  box-shadow:var(--focus-ring);
}
/* Keep the page canvas calm in both themes; accents belong on components, not a full-page color wash. */
body{background:var(--bg)}
/* Azaltılmış hareket tercihi her zaman korunur. */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}