/* ==========================================================
   VARIABLES.CSS
   Global Design Tokens
========================================================== */

:root{

    /* ======================================================
       PRIMARY COLORS
    ====================================================== */

    --primary:#0d6efd;
    --primary-dark:#0b5ed7;
    --primary-light:#6ea8fe;

    --secondary:#6c757d;

    --success:#198754;
    --danger:#dc3545;
    --warning:#ffc107;
    --info:#0dcaf0;

    /* ======================================================
       NEUTRAL COLORS
    ====================================================== */

    --white:#ffffff;
    --black:#000000;

    --gray-50:#f8f9fa;
    --gray-100:#f1f3f5;
    --gray-200:#e9ecef;
    --gray-300:#dee2e6;
    --gray-400:#ced4da;
    --gray-500:#adb5bd;
    --gray-600:#6c757d;
    --gray-700:#495057;
    --gray-800:#343a40;
    --gray-900:#212529;

    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    --font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    --font-size-xs:.75rem;
    --font-size-sm:.875rem;
    --font-size-base:1rem;
    --font-size-lg:1.125rem;
    --font-size-xl:1.25rem;
    --font-size-2xl:1.5rem;
    --font-size-3xl:2rem;
    --font-size-4xl:2.75rem;

    --font-weight-light:300;
    --font-weight-normal:400;
    --font-weight-medium:500;
    --font-weight-semibold:600;
    --font-weight-bold:700;
    --font-weight-extra-bold:800;

    --line-height:1.6;

    /* ======================================================
       SPACING
    ====================================================== */

    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.5rem;
    --space-6:2rem;
    --space-7:3rem;
    --space-8:4rem;

    /* ======================================================
       BORDER RADIUS
    ====================================================== */

    --radius-xs:4px;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;
    --radius-pill:999px;
    --radius-circle:50%;

    /* Eski isimlerle uyumluluk */

    --border-radius:12px;
    --border-radius-sm:8px;
    --border-radius-lg:18px;

    /* ======================================================
       SHADOWS
    ====================================================== */

    --shadow-xs:
        0 1px 2px rgba(0,0,0,.05);

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.08);

    --shadow-md:
        0 8px 20px rgba(0,0,0,.12);

    --shadow-lg:
        0 15px 35px rgba(0,0,0,.16);

    --shadow-xl:
        0 25px 60px rgba(0,0,0,.20);

    /* ======================================================
       TRANSITIONS
    ====================================================== */

    --transition:.3s ease;

    --transition-fast:.15s ease;

    --transition-slow:.5s ease;

    /* ======================================================
       Z-INDEX
    ====================================================== */

    --z-dropdown:1000;
    --z-sticky:1020;
    --z-fixed:1030;
    --z-offcanvas:1045;
    --z-modal:1055;
    --z-popover:1070;
    --z-tooltip:1080;
    --z-loader:9999;

    /* ======================================================
       LAYOUT
    ====================================================== */

    --container-width:1320px;

    --header-height:80px;

    --topbar-height:40px;

    --sidebar-width:280px;

    /* ======================================================
       COMPONENTS
    ====================================================== */

    --card-padding:1.5rem;

    --input-height:50px;

    --button-height:48px;

    --navbar-height:80px;

    --footer-padding:80px;

}