/* ═══════════════════════════════════════════════════════════════════
   PAKETYOLDA TASARIM TOKEN'LARI — tokens.css
   Web (Customer) ve MAUI (MauiApp1/wwwroot) AYNI dosyayı taşır.
   Renk, tipografi, boşluk, yarıçap, gölge, hareket: tek kaynak.
   Marka rengi sunucudan (RenkYardimci.DegiskenBlogu) --brand olarak
   ezilir; burada yalnız varsayılan ve türetilmiş renkler tanımlanır.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Marka ── */
  --brand:        #FF5A2C;
  --brand-dark:   #E8461B;
  --brand-soft:   #FFEDE6;
  --brand-ink:    #FFFFFF;          /* marka zemininde yazı */
  --accent:       #FFC53D;          /* kampanya rozeti (sarı) */
  --accent-ink:   #3D2A00;

  /* ── Yüzeyler ── */
  --bg:           #F5F5F7;          /* sayfa zemini */
  --surface:      #FFFFFF;          /* kart */
  --surface-2:    #F8F8FA;          /* ikincil kutu */
  --surface-3:    #EEEEF2;          /* iskelet, ayraç zemini */
  --line:         #E5E5EA;
  --line-strong:  #D1D1D6;
  --overlay:      rgba(15, 17, 26, .45);

  /* ── Yazı ── */
  --ink:          #111318;
  --ink-2:        #4A4E5A;
  --ink-3:        #8A8F9C;
  --ink-disabled: #B8BCC6;

  /* ── Anlam ── */
  --ok:           #16A34A;  --ok-soft:     #DCFCE7;
  --warn:         #D97706;  --warn-soft:   #FEF3C7;
  --danger:       #DC2626;  --danger-soft: #FEE2E2;
  --info:         #2563EB;  --info-soft:   #DBEAFE;
  --star:         #F5A524;

  /* ── Tipografi (akışkan: 360px'te alt, 430px+'ta üst değer) ── */
  --font:         "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --fs-xs:   clamp(.69rem, .66rem + .2vw, .75rem);    /* 11-12 */
  --fs-sm:   clamp(.78rem, .74rem + .25vw, .875rem);  /* 12.5-14 */
  --fs-md:   clamp(.9rem,  .86rem + .25vw, 1rem);     /* 14.5-16 */
  --fs-lg:   clamp(1.05rem, 1rem + .35vw, 1.2rem);    /* 17-19 */
  --fs-xl:   clamp(1.25rem, 1.15rem + .6vw, 1.5rem);  /* 20-24 */
  --fs-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);       /* 24-32 */
  --lh-tight: 1.2;
  --lh:       1.45;
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  /* ── Boşluk ölçeği ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --gutter: clamp(12px, 3.5vw, 20px);   /* sayfa kenar boşluğu */

  /* ── Yarıçap (yalnız 3 değer) ── */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  /* ── Gölge (yalnız 2 seviye) ── */
  --sh-1: 0 1px 2px rgba(17,19,24,.06), 0 1px 3px rgba(17,19,24,.04);
  --sh-2: 0 6px 20px rgba(17,19,24,.10), 0 2px 6px rgba(17,19,24,.06);

  /* ── Hareket ── */
  --t-fast: 120ms ease; --t-base: 200ms ease; --t-slow: 320ms cubic-bezier(.2,.8,.2,1);

  /* ── Kabuk ölçüleri ── */
  --topbar-h:   56px;
  --tabbar-h:   60px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --content-max: 1120px;

  /* ── Görsel oranları ── */
  --ratio-cover: 16 / 9;
  --ratio-logo:  1 / 1;
  --ratio-tile:  4 / 5;
}

/* Koyu tema — cihaz tercihine göre; MAUI tema.js body[data-theme] ile de ezebilir. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:  #0F1117; --surface: #171A22; --surface-2: #1E222C; --surface-3: #262B36;
    --line: #2A2F3A; --line-strong: #3A404D; --overlay: rgba(0,0,0,.6);
    --ink: #F2F3F7; --ink-2: #C3C7D1; --ink-3: #8A8F9C; --ink-disabled: #5B6070;
    --brand-soft: #3A1F15; --accent-ink: #1A1200;
    --ok-soft: #14301F; --warn-soft: #3A2A0A; --danger-soft: #3A1414; --info-soft: #102040;
    --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 6px 20px rgba(0,0,0,.5);
  }
}
[data-theme="dark"] {
  --bg:  #0F1117; --surface: #171A22; --surface-2: #1E222C; --surface-3: #262B36;
  --line: #2A2F3A; --line-strong: #3A404D; --overlay: rgba(0,0,0,.6);
  --ink: #F2F3F7; --ink-2: #C3C7D1; --ink-3: #8A8F9C; --ink-disabled: #5B6070;
  --brand-soft: #3A1F15; --accent-ink: #1A1200;
}

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