/*
 * tokens.css — Design Tokens
 * Tüm tasarım kararları bu dosyada CSS custom properties olarak tanımlanır.
 * Hiçbir yerde doğrudan hex/rgb/hsl değeri kullanılmaz; her zaman bu değişkenler kullanılır.
 */

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

    /* Brand */
    --color-primary:         #2563EB;   /* Blue 600 */
    --color-primary-hover:   #1D4ED8;   /* Blue 700 */
    --color-primary-light:   #EFF6FF;   /* Blue 50  */
    --color-primary-text:    #FFFFFF;

    /* Nötr / Gri */
    --color-gray-50:         #F9FAFB;
    --color-gray-100:        #F3F4F6;
    --color-gray-200:        #E5E7EB;
    --color-gray-300:        #D1D5DB;
    --color-gray-400:        #9CA3AF;
    --color-gray-500:        #6B7280;
    --color-gray-600:        #4B5563;
    --color-gray-700:        #374151;
    --color-gray-800:        #1F2937;
    --color-gray-900:        #111827;

    /* Durum renkleri */
    --color-success:         #16A34A;
    --color-success-bg:      #F0FDF4;
    --color-success-border:  #BBF7D0;

    --color-warning:         #D97706;
    --color-warning-bg:      #FFFBEB;
    --color-warning-border:  #FDE68A;

    --color-danger:          #DC2626;
    --color-danger-bg:       #FEF2F2;
    --color-danger-border:   #FECACA;

    --color-info:            #0284C7;
    --color-info-bg:         #F0F9FF;
    --color-info-border:     #BAE6FD;

    /* Arka planlar */
    --color-bg-page:         #F3F4F6;
    --color-bg-surface:      #FFFFFF;
    --color-bg-muted:        #F9FAFB;

    /* Metin */
    --color-text-primary:    #111827;
    --color-text-secondary:  #6B7280;
    --color-text-muted:      #9CA3AF;
    --color-text-inverse:    #FFFFFF;

    /* Kenarlık */
    --color-border:          #E5E7EB;
    --color-border-focus:    #2563EB;

    /* ─── Tipografi ───────────────────────────────────────────────── */

    --font-family-base:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --font-size-xs:          0.75rem;    /* 12px */
    --font-size-sm:          0.875rem;   /* 14px */
    --font-size-base:        1rem;       /* 16px */
    --font-size-md:          1.0625rem;  /* 17px */
    --font-size-lg:          1.125rem;   /* 18px */
    --font-size-xl:          1.25rem;    /* 20px */
    --font-size-2xl:         1.5rem;     /* 24px */
    --font-size-3xl:         1.875rem;   /* 30px */
    --font-size-4xl:         2.25rem;    /* 36px */

    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    --line-height-tight:     1.25;
    --line-height-base:      1.5;
    --line-height-relaxed:   1.75;

    /* ─── Spacing ─────────────────────────────────────────────────── */

    --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 */

    /* ─── Border Radius ───────────────────────────────────────────── */

    --radius-sm:   0.25rem;   /*  4px */
    --radius-md:   0.375rem;  /*  6px */
    --radius-lg:   0.5rem;    /*  8px */
    --radius-xl:   0.75rem;   /* 12px */
    --radius-full: 9999px;

    /* ─── Gölge Sistemi ───────────────────────────────────────────── */

    --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

    /* ─── Geçiş / Animasyon ───────────────────────────────────────── */

    --transition-fast:   150ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   300ms ease;

    /* ─── Z-Index Katmanları ──────────────────────────────────────── */

    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;

    /* ─── Layout ──────────────────────────────────────────────────── */

    --sidebar-width:         260px;
    --topbar-height:         64px;
    --content-max-width:     1280px;
}