/**
 * GelecekSosyalizm — Design Tokens
 * ---------------------------------------------------------------
 * Tek noktadan yönetilen CSS değişken kümesi.
 * Tüm yeni component CSS'leri bu token'lara referans vermeli.
 *
 * Yükleme sırası: tokens.css → modern-base.css → style.css (mevcut)
 *
 * Mevcut style.css'teki :root bloğu korunuyor ama bu dosyadaki
 * tanımlar daha kapsamlı; aynı isimde çakışma olursa son yüklenen
 * (style.css) kazanır. Bunun için style.css'teki :root bloğunu
 * boşaltmak veya bu dosyanın sonuna almak iyi olur (uzun vadede).
 */

:root {
    /* ============================================
       BRAND / PRIMARY
       Mevcut --primary-red değeri korunuyor ama daha geniş bir
       skala olarak sunuluyor.
       ============================================ */
    --brand-50:  #fdecec;
    --brand-100: #fbd5d4;
    --brand-200: #f5a8a6;
    --brand-300: #e07a78;
    --brand-400: #c84d4a;
    --brand-500: #b71c1a;  /* primary — eski --primary-red ile aynı */
    --brand-600: #9a1715;
    --brand-700: #7a1110;
    --brand-800: #5a0d0c;
    --brand-900: #3d0908;

    /* Geri-uyumluluk için eski isim de kalsın */
    --primary-red: var(--brand-500);

    /* ============================================
       NEUTRAL (gri skala)
       ============================================ */
    --gray-0:   #ffffff;
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Eski isimlerin geriye dönük uyumu */
    --text-dark: var(--gray-800);
    --text-light: var(--gray-600);
    --bg-light: var(--gray-50);
    --border-color: var(--gray-200);
    --white: var(--gray-0);
    --black: #000000;

    /* ============================================
       SEMANTIC (durum renkleri)
       ============================================ */
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger:  #dc2626;
    --color-info:    #2563eb;

    /* ============================================
       SURFACE ALIASES (tema-temalı render için)
       Dark mode'a geçişte sadece bu alias'lar değişir.
       ============================================ */
    --surface-bg:      var(--gray-0);
    --surface-alt:     var(--gray-50);
    --surface-elevated:var(--gray-0);
    --surface-text:    var(--gray-900);
    --surface-muted:   var(--gray-600);
    --border-subtle:   var(--gray-200);
    --border-strong:   var(--gray-400);

    /* ============================================
       TYPOGRAPHY
       Inter (body) + Manrope (display) — modern-base.css yükler.
       Fluid scale: clamp(min, preferred, max)
       ============================================ */
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Manrope', var(--font-body);
    --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --fs-100: 0.75rem;   /* 12 */
    --fs-200: 0.8125rem; /* 13 */
    --fs-300: 0.875rem;  /* 14 */
    --fs-400: 1rem;      /* 16 */
    --fs-500: 1.125rem;  /* 18 */
    --fs-600: 1.25rem;   /* 20 */
    --fs-700: 1.5rem;    /* 24 */
    --fs-800: 2rem;      /* 32 */
    --fs-900: 2.5rem;    /* 40 */
    --fs-1000: 3rem;     /* 48 */

    /* Fluid heading sizes */
    --fs-h1: clamp(1.875rem, 1rem + 3vw, 3rem);
    --fs-h2: clamp(1.5rem, 0.9rem + 2vw, 2.25rem);
    --fs-h3: clamp(1.25rem, 0.8rem + 1.5vw, 1.75rem);

    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.5;
    --lh-relaxed: 1.65;
    --lh-loose:   1.8;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.05em;

    /* ============================================
       SPACING (8-pt grid + ara değerler)
       ============================================ */
    --space-0:  0;
    --space-1:  0.25rem;   /* 4  */
    --space-2:  0.5rem;    /* 8  */
    --space-3:  0.75rem;   /* 12 */
    --space-4:  1rem;      /* 16 */
    --space-5:  1.5rem;    /* 24 */
    --space-6:  2rem;      /* 32 */
    --space-7:  2.5rem;    /* 40 */
    --space-8:  3rem;      /* 48 */
    --space-10: 4rem;      /* 64 */
    --space-12: 6rem;      /* 96 */
    --space-16: 8rem;      /* 128 */

    /* ============================================
       BORDER RADIUS
       ============================================ */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-pill: 999px;
    --radius-full: 50%;

    /* ============================================
       SHADOW
       ============================================ */
    --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 30px -8px rgba(15, 23, 42, 0.15);
    --shadow-xl: 0 20px 40px -12px rgba(15, 23, 42, 0.18);
    --shadow-inset: inset 0 2px 4px rgba(15, 23, 42, 0.06);

    /* ============================================
       Z-INDEX (katmanlar)
       ============================================ */
    --z-base:           1;
    --z-content:        10;
    --z-dropdown:       100;
    --z-sticky-nav:     500;
    --z-fixed:          700;
    --z-modal-backdrop: 900;
    --z-modal:          1000;
    --z-popover:        1050;
    --z-toast:          1100;
    --z-tooltip:        1200;

    /* ============================================
       MOTION
       ============================================ */
    --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.5, 1.6, 0.4, 0.7);

    --duration-fast:   0.15s;
    --duration-base:   0.25s;
    --duration-slow:   0.4s;

    /* ============================================
       FOCUS RING (a11y)
       ============================================ */
    --focus-ring-color:  var(--brand-500);
    --focus-ring-shadow: 0 0 0 3px rgba(183, 28, 26, 0.35);
    --focus-ring-offset: 2px;

    /* ============================================
       LAYOUT
       ============================================ */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;

    --touch-target-min: 44px;  /* WCAG 2.5.5 */
}

/* ============================================
   DARK MODE — kullanıcı OS tercih ettiyse otomatik
   Sitenin bir dark mode toggle'ı yoksa bu blok sadece
   sistem-tercihli kullanıcılarda devreye girer.
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --surface-bg:      var(--gray-900);
        --surface-alt:     #1a2233;
        --surface-elevated: #1e2a3f;
        --surface-text:    var(--gray-50);
        --surface-muted:   var(--gray-400);
        --border-subtle:   #243049;
        --border-strong:   #3d4a66;
    }
}