/* ============================================================
   VARIABLES.CSS
   Odium Stüdyo - Tasarım Sistemi

   Tek bir kimlik: beyaz, neredeyse-siyah üstünde.
   Doygun ya da neon renk yok. Hiyerarşi ağırlık,
   opaklık ve boşlukla kurulur; renkle değil.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     ZEMİN KATMANLARI  (en koyu -> en açık)
     ---------------------------------------------------------- */
  --bg:              #0B0C0B;
  --bg-1:            #0F100F;
  --bg-2:            #141513;
  --bg-3:            #1A1B19;

  /* ----------------------------------------------------------
     YÜZEYLER  (beyazın çok düşük opaklığı)
     ---------------------------------------------------------- */
  --surface:         rgba(255, 255, 255, 0.024);
  --surface-2:       rgba(255, 255, 255, 0.05);
  --surface-3:       rgba(255, 255, 255, 0.08);

  --line:            rgba(255, 255, 255, 0.09);
  --line-2:          rgba(255, 255, 255, 0.16);

  /* ----------------------------------------------------------
     METİN
     ---------------------------------------------------------- */
  --text:            #F4F4F1;
  --text-2:          #A7A8A3;
  --text-3:          #6B6D67;
  --text-inverse:    #0B0C0B;

  /* Tek vurgu: saf beyaz. Az ve yerli yerinde kullanılır. */
  --accent:          #FFFFFF;

  /* ----------------------------------------------------------
     DURUM RENKLERİ  (çok düşük doygunluk, gri tabanlı)
     ---------------------------------------------------------- */
  --status-done:     #84A084;   /* tamamlandı  */
  --status-active:   #8C95A8;   /* devam ediyor */
  --status-planned:  #A89A80;   /* planlanıyor */

  /* ----------------------------------------------------------
     TİPOGRAFİ
     ---------------------------------------------------------- */
  --font-display:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-hero:         clamp(3rem, 8vw, 6.5rem);
  --fs-display:      clamp(2.4rem, 5.5vw, 4.25rem);
  --fs-h2:           clamp(2rem, 4vw, 3.1rem);
  --fs-h3:           clamp(1.25rem, 1.6vw, 1.55rem);
  --fs-lead:         clamp(1.05rem, 1.2vw, 1.3rem);
  --fs-body:         1rem;
  --fs-sm:           0.875rem;
  --fs-xs:           0.75rem;
  --fs-overline:     0.72rem;

  --w-light:         300;
  --w-regular:       400;
  --w-medium:        500;
  --w-semibold:      600;
  --w-bold:          700;

  --lh-tight:        1.04;
  --lh-snug:         1.18;
  --lh-normal:       1.5;
  --lh-relaxed:      1.7;

  --track-tight:     -0.02em;
  --track-display:   -0.035em;
  --track-wide:      0.04em;
  --track-overline:  0.22em;

  /* ----------------------------------------------------------
     BOŞLUK ÖLÇEĞİ  (8px taban)
     ---------------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-11: 11rem;

  /* Bölüm dikey ritmi (havadar - VISUAL_DENSITY 3) */
  --section-y: clamp(5rem, 11vw, 10rem);

  /* ----------------------------------------------------------
     KÖŞE YARIÇAPI  (tek yumuşak sistem)
     küçük: 8 · orta(buton/input): 12 · büyük(kart/görsel): 16
     ---------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;

  /* ----------------------------------------------------------
     GÖLGE  (renksiz, zemine gömülü)
     ---------------------------------------------------------- */
  --sh-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md:  0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --sh-lg:  0 30px 60px -20px rgba(0, 0, 0, 0.8);

  /* ----------------------------------------------------------
     GEÇİŞ
     ---------------------------------------------------------- */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:      0.18s var(--ease-soft);
  --t-base:      0.3s var(--ease);
  --t-slow:      0.6s var(--ease);

  /* ----------------------------------------------------------
     KATMANLAR
     ---------------------------------------------------------- */
  --z-grain:       1;
  --z-base:        2;
  --z-nav:         100;
  --z-menu:        200;
  --z-overlay:     300;
  --z-toast:       400;

  /* ----------------------------------------------------------
     YERLEŞİM
     ---------------------------------------------------------- */
  --container:     1240px;
  --container-wide:1440px;
  --pad:           1.5rem;
  --nav-h:         4.25rem;
}

@media (min-width: 768px) {
  :root { --pad: 2.5rem; }
}

@media (min-width: 1280px) {
  :root { --pad: 4rem; }
}