/* ═══════════════════════════════════════════════════════════════
   TODAP Design Tokens
   ───────────────────────────────────────────────────────────────
   RENK PALETI (ADMIN TARAFINDAN YONETILEN DEGİSKENLER):
   - Beyaz (1. renk): --color-white => #FFFFFF
   - Yesil (2. renk): --color-green => #009736
   - Kirmizi (3. renk): --color-red => #EE2A35
   - Siyah (4. renk): --color-black => #000000
   ═══════════════════════════════════════════════════════════════ */

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

:root {

  /* ── 1. RENKLER (ADMIN DEGISKENLERI) ─────────────────────────── */

  /* Beyaz - ANA RENK (en cok kullanilan) */
  --color-white:        #FFFFFF;

  /* Yesil - 2. RENK (navbar, buton, link) */
  --color-green:        #009736;

  /* Kirmizi - 3. RENK (ticker, uyari, aktif) */
  --color-red:          #EE2A35;

  /* Siyah - 4. RENK (sadece yazilar) */
  --color-black:        #000000;

  /* ── VARYANTLAR (admin degiskenleri) ─────────────────────────── */
  --color-green-dark:   #007A2B;    /* hover icin */
  --color-red-dark:     #C41E28;      /* hover icin */
  --color-green-light:  #E6F4E9;   /* hafif arka plan */
  --color-red-light:    #FDEAEC;     /* hafif arka plan */

  --color-white-off:    #FAFAFA;     /* alternatif zemin */
  --color-gray-light:   #666666;    /* muted yazilar */
  --color-gray-lighter: #999999;  /* faint yazilar */

  /* ── TOKEN ESLEMELERI ────────────────────────────────────────── */

  /* Ana vurgu - YESIL */
  --color-primary:        var(--color-green);
  --color-primary-dark:   var(--color-green-dark);
  --color-primary-light:  var(--color-green-light);

  /* Ikincil vurgu - KIRMIZI */
  --color-accent:         var(--color-red);
  --color-accent-dark:    var(--color-red-dark);
  --color-accent-light:   var(--color-red-light);

  /* Zeminler - BEYAZ agirlikli */
  --color-bg:             var(--color-white);
  --color-bg-alt:         var(--color-white-off);
  --color-surface:        var(--color-white);

  /* Kenarliklar - SIYAH'in seffaf varyantlari */
  --color-border:         rgba(0, 0, 0, 0.09);
  --color-border-strong:  rgba(0, 0, 0, 0.16);

  /* Yazi renkleri - SIYAH */
  --color-text-primary:   var(--color-black);
  --color-text-secondary: var(--color-gray-light);
  --color-text-faint:     var(--color-gray-lighter);

  /* Navbar - YESIL */
  --color-nav-bg:         var(--color-green);
  --color-nav-text:       rgba(255, 255, 255, 0.9);
  --color-nav-text-hover: var(--color-white);

  /* Footer - BEYAZ */
  --color-footer-bg:      var(--color-white-off);
  --color-footer-text:    var(--color-gray-light);

  /* Ticker - KIRMIZI */
  --color-ticker-bg:      var(--color-red);
  --color-ticker-text:    rgba(255, 255, 255, 0.9);

  /* Geriye donuk uyumluluk alias'lari */
  --burgundy:       var(--color-green);
  --burgundy-deep:  var(--color-green-dark);
  --burgundy-light: var(--color-green-light);
  --mustard:        var(--color-red);
  --mustard-light:  var(--color-red-light);
  --accent:         var(--color-green);
  --accent-deep:    var(--color-green-dark);
  --accent-light:   var(--color-green-light);

  /* ── 2. TIPOGRAFI ───────────────────────────────────────────── */

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── 3. YAZI BUYUKLUKLERI ───────────────────────────────────── */

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;

  /* ── 4. YAZI AGIRLIKLARI ───────────────────────────────────── */

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   800;

  /* ── 5. BOSLUK ve LAYOUT ───────────────────────────────────── */

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── 6. GOLGE ve EFEKTLER ──────────────────────────────────── */

  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 10px 28px rgba(0, 0, 0, 0.12);

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;

}