/* ==========================================================================
   Kerf — design tokens (Design System v0.1 · Ekim 2026)
   Değerler design/01 PDF'inden ve 1440px @2x render ölçümlerinden alınmıştır.
   ========================================================================== */

:root {
  /* --- Renk · gün modu (ürünler, vakalar, hakkında) --- */
  --paper: #f3f3f0;
  --sheet: #ffffff;
  --rule: #dadad4;
  --ink-3: #6e6e67; /* 5.0:1 */
  --ink-2: #55554f; /* 7.0:1 */
  --ink: #111110;
  --placeholder: #e6e6e1; /* gri yer tutucu yüzey (tasarımdaki kırpım kutuları) */

  /* --- Renk · gece modu (oyun dünyası) --- */
  --night: #0c0c0b;
  --night-2: #1a1a18;
  --fog: #9a9a92;
  --bone: #edede8;

  /* --- İşaret --- */
  --kerf: #ff4f12; /* toplam yüzeyin %2'sini geçmez */
  --kerf-text: #c2380a; /* 4.6:1 */

  /* Başlıkların gri ikinci tonu. Gün modunda #9A9A92 (fog) paper üzerinde 2.6:1
     kalıyordu; büyük metin için WCAG AA 3:1 eşiğine çekildi. Gece modunda fog. */
  --tone: #8a8a83;

  /* --- Durum --- */
  --status-live: #1f8a4f;
  --status-dev: #c16200;

  /* --- Tema yüzeyleri (sayfa/section bazında yeniden tanımlanır) --- */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: var(--rule);
  --line-strong: var(--ink);
  --surface: var(--sheet);

  /* --- Tipografi --- */
  --font-sans: "Instrument Sans", "Instrument Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, Menlo, Consolas, "Courier New", monospace;
  --font-display: var(--font-sans);

  /* Ölçek (desktop 1440 değerleri; küçük ekranlarda clamp ile iner) */
  --fs-mega: clamp(4.5rem, 1.2rem + 13.4vw, 11.125rem);  /* 178 · ürün hero wordmark */
  --fs-display: clamp(2.75rem, 0.6rem + 8.9vw, 8rem);   /* 128/0.92 · mobil 44 */
  --fs-xl: clamp(2.75rem, 1.15rem + 5.6vw, 6rem);         /* 96 · bölüm ifadeleri */
  --fs-1: clamp(2.5rem, 1.35rem + 3.8vw, 4.75rem);       /* 76 · proje başlıkları */
  --fs-h1: clamp(2.25rem, 1.45rem + 3.1vw, 4.25rem);      /* 68 */
  --fs-h2: clamp(2rem, 1.45rem + 2.4vw, 3.625rem);       /* 58 */
  --fs-h3: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);       /* 44/1.05 */
  --fs-h4: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);       /* 36 · indeks satırı */
  --fs-h5: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);      /* 26/1.2 */
  --fs-h6: 1.375rem;                                      /* 22 · kart başlığı */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 20/1.5 (render ölçümü; DS: 22/1.45) */
  --fs-body: 1.0625rem;                                   /* 17/1.6 */
  --fs-small: 0.9375rem;                                  /* 15 */
  --fs-xs: 0.875rem;                                      /* 14 */
  --fs-mono: 0.75rem;                                     /* 12 / +8% */

  --lh-display: 0.92;
  --lh-tight: 1;
  --lh-heading: 1.05;
  --lh-h3: 1.2;
  --lh-lead: 1.5;
  --lh-body: 1.6;

  --tr-display: -0.058em;
  --tr-heading: -0.04em;
  --tr-h1: -0.05em;
  --tr-h3: -0.025em;
  --tr-wordmark: -0.03em;
  --tr-mono: 0.08em;

  /* --- Izgara ve boşluk --- */
  --container: 1440px;
  --margin: 80px;
  --gutter: 24px;
  --cols: 12;

  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-64: 64px;
  --space-96: 96px;
  --space-160: 160px;
  --space-240: 240px; /* hero */

  --space-xs: var(--space-8);
  --space-sm: var(--space-16);
  --space-md: var(--space-24);
  --space-lg: var(--space-40);
  --space-xl: var(--space-64);
  --section: var(--space-160); /* bölümler arası */

  --header-h: 72px;
  --kerf-gap: 4px; /* kesim boşluğu */

  /* --- Hareket --- */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --transition-fast: 160ms var(--ease);
  --transition-normal: 300ms var(--ease);
  --reveal-distance: 12px;
  --reveal-duration: 600ms;
  --reveal-stagger: 80ms;
  --night-duration: 900ms;
  --parallax-max: 40px;
}

@media (max-width: 1023px) {
  :root {
    --margin: 40px;
    --gutter: 20px;
    --cols: 8;
    --section: 128px;
  }
}

@media (max-width: 767px) {
  :root {
    --margin: 20px;
    --gutter: 16px;
    --cols: 4;
    --section: var(--space-96);
    --header-h: 64px;
  }
}