/**
 * ==========================================
 * CSS DEĞİŞKENLERİ (Design Tokens)
 * Renkler, fontlar, boyutlar ve katmanlar
 * ==========================================
 */

/* Inter @font-face → includes/head.php (app_url; harici CSS’te göreli yol köke /font/ kaçabilir) */

:root {
    /* ========== FONT ========== */
    --by-font-main: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ========== RENKLER - Arka Plan ========== */
    /* Sayfa arka planı tekrar açık, sidebar/topbar koyu kalsın */
    --by-bg-body: #eef2f7;          /* Ana sayfa arka planı (açık) */
    --by-bg-content: #ffffff;       /* Kart/İçerik arka planı */
    --by-bg-sidebar: #0f172a;       /* Sidebar rengi (koyu lacivert) */
    --by-bg-header: #0f172a;        /* Topbar temel rengi */
    --by-bg-shell-solid: #0f172a;   /* Genel koyu alanlar (header/shell) */

    /* ========== RENKLER - Kenarlık ========== */
    --by-border-soft: #e2e8f0;
    --by-border-strong: #d1d5db;

    /* ========== RENKLER - Metin ========== */
    --by-text-main: #1f2933;    /* Ana metin */
    --by-text-muted: #6b7280;   /* İkincil/Soluk metin */
    --by-text-soft: #9ca3af;    /* Çok soluk metin */
    --by-text-light: #ffffff;   /* Koyu zemin üstü metin */

    /* ========== RENKLER - Marka & Durum ========== */
    --by-primary: #2563eb;
    --by-primary-soft: #dbeafe;
    --by-primary-dark: #1d4ed8;

    --by-success: #16a34a;
    --by-success-soft: #dcfce7;
    
    --by-danger: #dc2626;
    --by-danger-soft: #fee2e2;
    
    --by-warning: #f59e0b;
    --by-warning-soft: #fef3c7;
    
    --by-info: #0ea5e9;
    --by-info-soft: #e0f2fe;

    --by-indigo: #6366f1;
    --by-indigo-dark: #4f46e5;
    --by-indigo-gradient: linear-gradient(to right, #6366f1, #8b5cf6);

    /* ========== BOYUTLAR ========== */
    --by-sidebar-width: 210px;
    --by-sidebar-collapsed: 70px;
    --by-topbar-height: 65px;
    --by-header-height: 65px;

    /* BY4 sayfa padding (üst badge alanı + alt flashcard – sol/sağ/üst aynı) */
    --by4-page-padding: 20px;
    --by4-page-padding-bottom: 0;
    --by4-stat-padding: 20px 24px 16px 24px;   /* üst küçük badge satırı: üst sağ alt sol */
    --by4-card-padding-x: 24px;                /* alt kart yatay */
    --by4-card-padding-y: 16px;                /* alt kart dikey */
    --by4-card-padding-top: 20px;             /* alt kart üst (sekmeler için) */

    /* Liste / tablo yazı boyutu (global – tüm list sayfaları) */
    --by-list-font-size: 14px;
    --by-list-font-size-head: 12px;

    /* ========== BORDER RADIUS ========== */
    --by-radius-sm: 4px;
    --by-radius-md: 6px;
    --by-radius-lg: 8px;
    --by-radius-xl: 14px;
    --by-radius-full: 999px;

    /* ========== GÖLGELER ========== */
    --by-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --by-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --by-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);

    /* ========== GEÇİŞLER (Animations) ========== */
    --by-transition-fast: 0.15s ease;
    --by-transition-normal: 0.2s ease;
    --by-transition-slow: 0.3s ease;

    /* ========== KATMANLAR (Z-Index) - ÇAKIŞMALARI ÖNLER ========== */
    --z-back: -1;
    --z-normal: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-sidebar: 1040; /* Sidebar içerikten üstte olmalı */
    --z-modal-backdrop: 1050;
    --z-modal: 1055;
    --z-popover: 1060;
    --z-tooltip: 1070;
}