/*
 * Design Tokens — Tüm sitede tutarlı renk, spacing, shadow ve radius tanımları
 * Faz 2: CSS Token Sistemi — site.css, yonetim.css, home.css bu dosyayı import eder
 */

:root {
    /* ═══════════════════════════════════════════════════════ */
    /* PRIMARY & SEMANTIC COLORS                               */
    /* ═══════════════════════════════════════════════════════ */
    --token-primary:         #0f6cbf;  /* Ana brand rengi */
    --token-primary-dark:    #0b4d8a;  /* Hover durumu */
    --token-primary-light:   #4a9eff;  /* Disabled/inactive */

    --token-success:         #2f9e67;  /* Başarı, tıkla, onay */
    --token-warning:         #f59e0b;  /* Uyarı, dikkat */
    --token-danger:          #e2574c;  /* Hata, silme, tehlike */
    --token-info:            #17a2b8;  /* Bilgilendirme */

    /* ═══════════════════════════════════════════════════════ */
    /* ADMIN/DASHBOARD COLORS                                  */
    /* ═══════════════════════════════════════════════════════ */
    --token-admin-start:     #667eea;  /* Sidebar gradient başlangıcı */
    --token-admin-end:       #764ba2;  /* Sidebar gradient sonu */
    --token-admin-light:     #f0f2ff;  /* Admin bg / cards */

    /* ═══════════════════════════════════════════════════════ */
    /* BACKGROUNDS & SURFACES                                  */
    /* ═══════════════════════════════════════════════════════ */
    --token-bg:              #f4f7fb;  /* Sayfa background */
    --token-bg-secondary:    #edf4fb;  /* İçerik section bg */
    --token-surface:         #ffffff;  /* Card, form, container bg */
    --token-surface-hover:   #fafbff;  /* Card hover state */
    --token-overlay:         rgba(0, 0, 0, 0.5);

    /* ═══════════════════════════════════════════════════════ */
    /* TEXT & INK COLORS                                       */
    /* ═══════════════════════════════════════════════════════ */
    --token-ink:             #12263a;  /* Başlık, strong text */
    --token-text:            #3c5267;  /* Normal metin */
    --token-muted:           #5f7388;  /* Placeholder, caption */
    --token-subtle:          #8a95a6;  /* Disabled, faded */

    /* ═══════════════════════════════════════════════════════ */
    /* BORDERS & DIVIDERS                                      */
    /* ═══════════════════════════════════════════════════════ */
    --token-border:          #d8e7f3;  /* Input, card border */
    --token-border-dark:     #ccdeee;  /* Hover border */
    --token-divider:         #e8f0f7;  /* Light separator */

    /* ═══════════════════════════════════════════════════════ */
    /* SPACING                                                 */
    /* ═══════════════════════════════════════════════════════ */
    --token-space-xs:        0.25rem;  /* 4px */
    --token-space-sm:        0.5rem;   /* 8px */
    --token-space-md:        1rem;     /* 16px */
    --token-space-lg:        1.5rem;   /* 24px */
    --token-space-xl:        2rem;     /* 32px */
    --token-space-2xl:       3rem;     /* 48px */
    --token-space-3xl:       4rem;     /* 64px */

    /* ═══════════════════════════════════════════════════════ */
    /* BORDER RADIUS                                           */
    /* ═══════════════════════════════════════════════════════ */
    --token-radius-sm:       8px;
    --token-radius-md:       12px;
    --token-radius-lg:       16px;
    --token-radius-xl:       20px;
    --token-radius-2xl:      28px;
    --token-radius-full:     999px;

    /* ═══════════════════════════════════════════════════════ */
    /* SHADOWS                                                 */
    /* ═══════════════════════════════════════════════════════ */
    --token-shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.05);
    --token-shadow-sm:       0 2px 10px rgba(16, 24, 40, 0.06);
    --token-shadow-md:       0 8px 24px rgba(16, 24, 40, 0.12);
    --token-shadow-lg:       0 12px 32px rgba(11, 42, 72, 0.1);
    --token-shadow-xl:       0 16px 36px rgba(11, 43, 76, 0.1);
    --token-shadow-2xl:      0 20px 40px rgba(11, 43, 76, 0.22);

    /* ═══════════════════════════════════════════════════════ */
    /* TRANSITIONS                                             */
    /* ═══════════════════════════════════════════════════════ */
    --token-transition:      all 0.2s ease;
    --token-transition-slow: all 0.24s ease;

    /* ═══════════════════════════════════════════════════════ */
    /* TYPOGRAPHY                                              */
    /* ═══════════════════════════════════════════════════════ */
    --token-font-primary:    'Plus Jakarta Sans', 'Segoe UI', Tahoma, sans-serif;
    --token-font-heading:    'Space Grotesk', 'Segoe UI', Tahoma, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* DARK MODE                                                              */
/* ═══════════════════════════════════════════════════════════════════════ */
body.dark-mode {
    --token-primary:         #4a9eff;  /* Açık mavi */
    --token-primary-dark:    #2a7dd8;
    --token-primary-light:   #7ab5ff;

    --token-success:         #3bb383;  /* Açık yeşil */
    --token-warning:         #fbbf24;  /* Açık sarı */
    --token-danger:          #f87171;  /* Açık kırmızı */
    --token-info:            #38bdf8;  /* Açık mavi */

    --token-admin-start:     #8b5cf6;  /* Mor gradient */
    --token-admin-end:       #d946ef;  /* Pembe gradient */
    --token-admin-light:     #4f46e5;

    --token-bg:              #1a1d21;  /* Dark bg */
    --token-bg-secondary:    #14171c;  /* Darker bg */
    --token-surface:         #2b3035;  /* Card surface dark */
    --token-surface-hover:   #333840;

    --token-ink:             #e8eaed;  /* Beyaz text */
    --token-text:            #cbd5e1;  /* Açık gri text */
    --token-muted:           #9ca3af;  /* Daha koyugri text */
    --token-subtle:          #6b7280;  /* Çok hafif text */

    --token-border:          #3f4447;  /* Dark border */
    --token-border-dark:     #4a5054;
    --token-divider:         #3a3d42;
}