/* ==========================================================================
   Piksir v2 — Tasarım token'ları  ("Kareli Defter")
   Tek doğruluk kaynağı: renk, yazı, boşluk, köşe, kontur, ofset, hareket.
   Eski tema (shared/styles/tokens.css) ile çakışmaz: tüm adlar --v2- önekli.
   Mobil uygulamaya aktarım tablosu: docs/TASARIM_SISTEMI.md §Token'lar
   ========================================================================== */
@layer v2.tokens {
  :root {
    /* ---- Renk: zemin ve mürekkep (nötrler) ---- */
    --v2-paper: #FFFDF8;          /* sayfa zemini: sıcak kâğıt beyazı */
    --v2-surface: #FFFFFF;        /* kart / panel yüzeyi */
    --v2-sunken: #F4F3EE;         /* gömük alan (giriş, iz) */
    --v2-grid: #E6ECF5;           /* kareli defter çizgisi */
    --v2-line: #D6D8E4;           /* yumuşak ayraç */
    --v2-ink: #1F1D3D;            /* metin + kontur (mürekkep) */
    --v2-ink-2: #55536F;          /* ikincil metin (7.2:1) */
    --v2-ink-3: #8A88A3;          /* yalnız dekor / devre dışı (metin için KULLANMA) */
    --v2-on-ink: #FFFFFF;

    /* ---- Renk: 4 doygun vurgu (her biri: dolgu / metin / açık ton) ---- */
    --v2-yellow: #FFC629;         /* Piksir sarısı — birincil eylem dolgusu */
    --v2-yellow-ink: #7A5600;
    --v2-yellow-tint: #FFF1C7;
    --v2-green: #1DB46A;          /* başarı, ilerleme */
    --v2-green-ink: #0C6E3E;
    --v2-green-tint: #DDF5E7;
    --v2-blue: #3B6CFF;           /* bilgi, seçim, bağlantı dolgusu */
    --v2-blue-ink: #2448D6;       /* bağlantı metni, mavi buton zemini (beyaz metinle 7:1) */
    --v2-blue-tint: #E3EAFF;
    --v2-tomato: #FF5B3A;         /* uyarı, kilit, "dikkat" */
    --v2-tomato-ink: #B42E13;
    --v2-tomato-tint: #FFE4DC;
    --v2-cheek: #FF9F8A;          /* yalnız maskot yanağı */

    /* ---- Yazı tipleri (CDN yok; shared/styles/v2/fonts.css) ---- */
    --v2-font-display: "Shantell Sans", "Atkinson Hyperlegible Next", system-ui, sans-serif;
    --v2-font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
    --v2-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", monospace;

    /* Tip ölçeği (1.25 oranı, akışkan başlıklar) */
    --v2-text-xs: 0.8125rem;   /* 13 — yalnız etiket/mono */
    --v2-text-sm: 0.9375rem;   /* 15 */
    --v2-text-md: 1.0625rem;   /* 17 — gövde (varsayılan yoğunluk) */
    --v2-text-lg: 1.25rem;     /* 20 */
    --v2-text-xl: 1.5rem;      /* 24 */
    --v2-text-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.25rem);   /* h2 */
    --v2-text-3xl: clamp(2.25rem, 1.6rem + 3.4vw, 3.75rem);    /* h1 */
    --v2-leading: 1.55;
    --v2-leading-tight: 1.12;
    --v2-weight-body: 400;
    --v2-weight-strong: 700;
    --v2-weight-heavy: 800;

    /* ---- Boşluk (4'lük ızgara; kareli defter karesi = 24px) ---- */
    --v2-space-1: 4px;  --v2-space-2: 8px;  --v2-space-3: 12px; --v2-space-4: 16px;
    --v2-space-5: 24px; --v2-space-6: 32px; --v2-space-7: 48px; --v2-space-8: 64px; --v2-space-9: 96px;
    --v2-grid-size: 24px;
    --v2-gutter: 16px;            /* mobil kenar boşluğu */
    --v2-max: 1180px;             /* içerik genişliği */

    /* ---- Köşe ---- */
    --v2-radius-sm: 10px;
    --v2-radius: 16px;
    --v2-radius-lg: 22px;
    --v2-radius-pill: 999px;

    /* ---- Kontur + ofset (gölge yerine) ---- */
    --v2-stroke: 2.5px;
    --v2-stroke-soft: 2px;
    --v2-offset: 4px;             /* "basılabilir tuş" derinliği */
    --v2-shadow-color: #1F1D3D;   /* ofset rengi; kullanım: box-shadow: 0 var(--v2-offset) 0 var(--v2-shadow-color) */

    /* ---- Dokunma hedefi ---- */
    --v2-tap: 52px;               /* varsayılan (3.–6. sınıf) */
    --v2-tap-min: 48px;           /* asla altına inme */

    /* ---- İkon ---- */
    --v2-icon: 24px;
    --v2-icon-lg: 32px;

    /* ---- Hareket ---- */
    --v2-dur-fast: 110ms;
    --v2-dur: 200ms;
    --v2-dur-slow: 360ms;
    --v2-ease: cubic-bezier(.2, .7, .3, 1);
    --v2-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

    /* ---- Katman sırası ---- */
    --v2-z-sticky: 20; --v2-z-nav: 40; --v2-z-overlay: 80;

    color-scheme: light;
  }

  /* ---- Yoğunluk: 1.–2. sınıf ("minik") — az okuma, büyük hedef ---- */
  [data-density="minik"] {
    --v2-text-md: 1.25rem;
    --v2-text-sm: 1.0625rem;
    --v2-tap: 64px;
    --v2-stroke: 3px;
    --v2-offset: 5px;
    --v2-icon: 32px;
    --v2-icon-lg: 44px;
    --v2-radius: 20px;
    --v2-radius-lg: 26px;
  }
  /* ---- Yoğunluk: 7.–8. sınıf ("genc") — olgun, sıkı, bilgi yoğun ---- */
  [data-density="genc"] {
    --v2-text-md: 1rem;
    --v2-text-sm: 0.875rem;
    --v2-tap: 48px;
    --v2-stroke: 2px;
    --v2-offset: 3px;
    --v2-icon: 22px;
    --v2-icon-lg: 28px;
    --v2-radius: 12px;
    --v2-radius-lg: 16px;
  }

  /* ---- Koyu tema (opsiyonel, ikincil): data-theme="dark" ile açılır ---- */
  [data-theme="dark"] {
    --v2-paper: #17162B;
    --v2-surface: #22213D;
    --v2-sunken: #1C1B33;
    --v2-grid: #24233F;
    --v2-line: #3A3960;
    --v2-ink: #F3F1FF;
    --v2-ink-2: #B9B6D6;
    --v2-ink-3: #6F6C94;
    --v2-on-ink: #17162B;
    --v2-yellow-ink: #FFD666;
    --v2-green-ink: #5FDB9C;
    --v2-blue-ink: #8FA9FF;
    --v2-tomato-ink: #FF8C73;
    --v2-yellow-tint: #3A3320;
    --v2-green-tint: #1C3529;
    --v2-blue-tint: #232D55;
    --v2-tomato-tint: #3D2423;
    --v2-shadow-color: #0B0A18;
    color-scheme: dark;
  }
  /* ---- Takma adlar: her tema/yoğunluk kapsamında yeniden hesaplanır ---- */
  :root, [data-theme], [data-density] {
    /* Sınıf bantları (renk = kimlik; çocuk "benim rengim" diye öğrenir) */
    --v2-band-12: var(--v2-yellow);  --v2-band-12-tint: var(--v2-yellow-tint);  --v2-band-12-ink: var(--v2-yellow-ink);
    --v2-band-34: var(--v2-green);   --v2-band-34-tint: var(--v2-green-tint);   --v2-band-34-ink: var(--v2-green-ink);
    --v2-band-56: var(--v2-blue);    --v2-band-56-tint: var(--v2-blue-tint);    --v2-band-56-ink: var(--v2-blue-ink);
    --v2-band-78: var(--v2-tomato);  --v2-band-78-tint: var(--v2-tomato-tint);  --v2-band-78-ink: var(--v2-tomato-ink);
    /* Anlamsal */
    --v2-focus: var(--v2-blue-ink);
    --v2-link: var(--v2-blue-ink);
    --v2-success: var(--v2-green-ink);
    --v2-danger: var(--v2-tomato-ink);
  }
}