/* ============================================================
   design-tokens.css
   Diyetisyen Web Sitesi — Tasarım Sistemi Kökleri
   Tüm CSS dosyaları bu değişkenlere referans verir.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Renk Paleti ─────────────────────────────────────────── */
:root {

  /* Birincil — Sıcak Kahverengi Skalası */
  --clr-espresso:      #2C1A0E;   /* En koyu: metin, başlıklar          */
  --clr-walnut:        #4A2C17;   /* Koyu kahve: hover, vurgu            */
  --clr-cinnamon:      #7A4828;   /* Orta kahve: butonlar, linkler       */
  --clr-caramel:       #B07940;   /* Karamel: ikon vurgu, accent         */
  --clr-honey:         #C8935A;   /* Bal: hover state, border aktif      */
  --clr-latte:         #D9B99A;   /* Latte: subtitle, placeholder        */
  --clr-almond:        #E8D5C0;   /* Badem: hafif bg, disabled           */
  --clr-cream:         #F2E8DC;   /* Krem: section arka planı            */
  --clr-ivory:         #FAF6F1;   /* Fildişi: sayfa arka planı           */
  --clr-white:         #FFFFFF;

  /* Nötr Skalası */
  --clr-neutral-900:   #1A1208;
  --clr-neutral-800:   #2E2215;
  --clr-neutral-700:   #4A3928;
  --clr-neutral-600:   #6B5540;
  --clr-neutral-500:   #8C7460;
  --clr-neutral-400:   #AE9882;
  --clr-neutral-300:   #CDBCA8;
  --clr-neutral-200:   #E4D8CC;
  --clr-neutral-100:   #F5EFE8;
  --clr-neutral-50:    #FDFAF7;

  /* Semantik Renkler */
  --clr-success:       #4A7C59;   /* Yeşil — başarı                      */
  --clr-success-light: #EAF4EE;
  --clr-warning:       #B07940;   /* Karamel — uyarı (palette uyumlu)    */
  --clr-warning-light: #FDF3E7;
  --clr-error:         #9B3A2E;   /* Toprak kırmızı — hata               */
  --clr-error-light:   #F9EDEB;
  --clr-info:          #3A6B8C;   /* Çelik mavi — bilgi                  */
  --clr-info-light:    #EBF3F9;

  /* ── Tipografi ─────────────────────────────────────────── */
  /* Display: Cormorant Garamond — zariflik, kişilik, güven  */
  /* Body: DM Sans — okunabilirlik, modernlik, temizlik       */

  --font-display:      'Cormorant Garamond', Georgia, serif;
  --font-body:         'DM Sans', -apple-system, sans-serif;
  --font-mono:         'JetBrains Mono', 'Courier New', monospace;

  /* Font Boyutları — Fluid Type Scale (clamp) */
  --text-xs:           clamp(0.70rem, 1.5vw, 0.75rem);    /*  12px */
  --text-sm:           clamp(0.813rem, 1.8vw, 0.875rem);  /*  14px */
  --text-base:         clamp(0.938rem, 2vw, 1rem);        /*  16px */
  --text-md:           clamp(1rem, 2.2vw, 1.125rem);      /*  18px */
  --text-lg:           clamp(1.125rem, 2.5vw, 1.25rem);   /*  20px */
  --text-xl:           clamp(1.25rem, 3vw, 1.5rem);       /*  24px */
  --text-2xl:          clamp(1.5rem, 4vw, 2rem);          /*  32px */
  --text-3xl:          clamp(2rem, 5vw, 2.75rem);         /*  44px */
  --text-4xl:          clamp(2.5rem, 6vw, 3.75rem);       /*  60px */
  --text-5xl:          clamp(3rem, 8vw, 5rem);            /*  80px */

  /* Font Ağırlıkları */
  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;

  /* Satır Yükseklikleri */
  --lh-tight:          1.15;
  --lh-snug:           1.3;
  --lh-normal:         1.55;
  --lh-relaxed:        1.75;

  /* Harf Aralıkları */
  --ls-tight:          -0.03em;
  --ls-snug:           -0.015em;
  --ls-normal:         0;
  --ls-wide:           0.04em;
  --ls-wider:          0.08em;
  --ls-widest:         0.15em;

  /* ── Boşluk Sistemi (4px taban) ────────────────────────── */
  --space-1:           0.25rem;   /*  4px */
  --space-2:           0.5rem;    /*  8px */
  --space-3:           0.75rem;   /* 12px */
  --space-4:           1rem;      /* 16px */
  --space-5:           1.25rem;   /* 20px */
  --space-6:           1.5rem;    /* 24px */
  --space-8:           2rem;      /* 32px */
  --space-10:          2.5rem;    /* 40px */
  --space-12:          3rem;      /* 48px */
  --space-16:          4rem;      /* 64px */
  --space-20:          5rem;      /* 80px */
  --space-24:          6rem;      /* 96px */
  --space-32:          8rem;      /* 128px */

  /* ── Konteyner Genişlikleri ────────────────────────────── */
  --container-xs:      480px;
  --container-sm:      640px;
  --container-md:      768px;
  --container-lg:      1024px;
  --container-xl:      1200px;
  --container-2xl:     1400px;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --radius-xl:         20px;
  --radius-2xl:        32px;
  --radius-full:       9999px;

  /* ── Gölgeler ───────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(44,26,14,.06);
  --shadow-sm:  0 2px 6px rgba(44,26,14,.08), 0 1px 2px rgba(44,26,14,.05);
  --shadow-md:  0 4px 16px rgba(44,26,14,.10), 0 2px 4px rgba(44,26,14,.06);
  --shadow-lg:  0 8px 32px rgba(44,26,14,.12), 0 4px 8px rgba(44,26,14,.08);
  --shadow-xl:  0 20px 60px rgba(44,26,14,.15), 0 8px 20px rgba(44,26,14,.08);
  --shadow-card: 0 2px 20px rgba(122,72,40,.07);
  --shadow-hover: 0 8px 40px rgba(122,72,40,.14);

  /* ── Geçişler & Animasyonlar ────────────────────────────── */
  --ease-out:          cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:           cubic-bezier(0.4, 0.0, 1, 1);
  --ease-in-out:       cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-bounce:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:       cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;

  --transition-base:   var(--duration-normal) var(--ease-out);
  --transition-color:  color var(--duration-fast) var(--ease-out),
                       background-color var(--duration-fast) var(--ease-out),
                       border-color var(--duration-fast) var(--ease-out);

  /* ── Z-Index Katmanları ─────────────────────────────────── */
  --z-below:           -1;
  --z-base:            0;
  --z-raised:          10;
  --z-dropdown:        100;
  --z-sticky:          200;
  --z-overlay:         300;
  --z-modal:           400;
  --z-toast:           500;

  /* ── Nav Yüksekliği (CSS scroll-padding için) ──────────── */
  --nav-height:        72px;
  --nav-height-mobile: 64px;
}