/* ==========================================================
   VARIABLES.CSS
   Project : İlan Evi
========================================================== */

:root {

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

    --color-primary: #ff4f9b;
    --color-primary-hover: #ff2f87;

    --color-secondary: #e11d48;

    --color-background: #0f0f0f;
    --color-surface: #1a1a1a;
    --color-card: #222222;

    --color-border: #333333;

    --color-white: #ffffff;

    --color-text: #f5f5f5;
    --color-text-light: #cfcfcf;
    --color-text-muted: #9a9a9a;

    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #dc2626;

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

    --font-heading: "Poppins", sans-serif;
    --font-body: "Inter", sans-serif;

    /* ======================================================
       FONT SIZES
    ====================================================== */

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.8rem;
    --fs-4xl: 3.5rem;

    /* ======================================================
       FONT WEIGHTS
    ====================================================== */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;

    /* ======================================================
       LINE HEIGHT
    ====================================================== */

    --lh-tight: 1.2;
    --lh-normal: 1.6;
    --lh-loose: 1.9;

    /* ======================================================
       CONTAINER
    ====================================================== */

    --container-width: 1320px;
    --container-padding: 20px;

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

    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;
    --space-4xl: 7rem;

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

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ======================================================
       SHADOW
    ====================================================== */

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

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

    --shadow-lg:
        0 15px 40px rgba(0,0,0,.45);

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

    --transition-fast: .20s ease;
    --transition-normal: .30s ease;
    --transition-slow: .45s ease;

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

    --z-header: 1000;
    --z-dropdown: 1100;
    --z-modal: 1200;
    --z-tooltip: 1300;

    /* ======================================================
       HEADER
    ====================================================== */

    --header-height: 82px;

    /* ======================================================
       GRID
    ====================================================== */

    --listing-gap: 30px;

}