/* ════════════════════════════════════════════════════════════════════════
   ProYA Engineering · v3 · Design Tokens
   ────────────────────────────────────────────────────────────────────────
   Yön: Tektonik Editorial
   Light-default · bone on graphite, single ochre signal.

   Sadece :root + media-query overrides. Hiçbir kural (selector body)
   bu dosyada yok. Yeni renk lazımsa: önce DESIGN.md token tablosuna
   ekle, sonra burayı güncelle, sonra kullan.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Renk · LIGHT (default) ───────────────────────────────────────── */
  --bg:            oklch(0.965 0.005 70);   /* #F4F1ED bone */
  --bg-2:          oklch(0.935 0.006 70);   /* #E9E5DE */
  --bg-3:          oklch(0.905 0.008 70);   /* #DEDAD0 */
  --bg-deep:       oklch(0.135 0.006 60);   /* #1A1714 near-black (hero/CTA flips) */

  --ink:           oklch(0.18 0.012 60);    /* #1F1B16 warm graphite */
  --ink-2:         oklch(0.36 0.010 60);    /* #514C44 */
  --ink-3:         oklch(0.56 0.008 60);    /* #847D72 */
  --ink-bone:      oklch(0.94 0.008 70);    /* metin koyu zemin üstünde */

  --line:          oklch(0.78 0.008 60);    /* #B5AEA1 */
  --line-2:        oklch(0.86 0.007 60);    /* #CCC5B7 */
  --line-dark:     oklch(0.30 0.010 60);    /* koyu zemin üstünde hairline */

  --signal:        oklch(0.47 0.125 253);   /* #0A5096 logo mavisi — marka sinyali */
  --signal-deep:   oklch(0.38 0.115 254);   /* #073C72 hover/derin */
  --ink-on-signal: oklch(0.97 0.005 250);   /* mavi üstüne açık metin */

  /* ─── Tipografi ────────────────────────────────────────────────────── */
  --ff-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-serif:   "Instrument Serif", "EB Garamond", Georgia, "Times New Roman", serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-hud:      11px;
  --fs-eyebrow:  12px;
  --fs-meta:     13px;
  --fs-body:     16px;
  --fs-lede:     21px;
  --fs-h4:       24px;
  --fs-h3:       32px;
  --fs-h2:       clamp(48px, 5.5vw, 76px);
  --fs-h1:       clamp(64px, 9vw, 156px);
  --fs-display:  clamp(96px, 14vw, 240px);

  --lh-tight:    1.02;
  --lh-head:     1.08;
  --lh-body:     1.55;
  --lh-lede:     1.45;

  --tracking-eyebrow: 0.14em;
  --tracking-hud:     0.06em;

  /* ─── Layout ───────────────────────────────────────────────────────── */
  --container-max:     1440px;
  --container-padding: clamp(20px, 4vw, 56px);
  --section-y:         clamp(80px, 10vw, 144px);
  --section-y-tight:   clamp(56px, 7vw, 96px);

  /* ─── Radius (architectural blueprint — almost square) ─────────────── */
  --r-xs:  1px;
  --r-sm:  2px;
  --r-md:  4px;
  --r-lg:  6px;
  --r-btn: 2px;   /* buttons — engineered, almost square */
  --r-chip: 0px;  /* labels — full blueprint kare */

  /* ─── Motion ───────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-100: 120ms;
  --dur-300: 360ms;
  --dur-500: 640ms;
  --dur-900: 1100ms;

  /* ─── Hairline border helper ───────────────────────────────────────── */
  --border-hair:      1px solid var(--line);
  --border-hair-soft: 1px solid var(--line-2);
  --border-hair-dark: 1px solid var(--line-dark);

  /* ─── Z layers ─────────────────────────────────────────────────────── */
  --z-nav:    50;
  --z-cursor: 100;
}

/* Reduced motion → tüm süreleri sıfırla, cursor halo gizle */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-100: 0ms;
    --dur-300: 0ms;
    --dur-500: 0ms;
    --dur-900: 0ms;
  }
}