/*
|--------------------------------------------------------------------------
| DEMIRAY TECH - GLOBAL VARIABLES
|--------------------------------------------------------------------------
*/

:root {

    /*
    |--------------------------------------------------------------------------
    | Brand
    |--------------------------------------------------------------------------
    */

    --color-primary: #f9b122;
    --color-primary-hover: #ffbf3f;
    --color-primary-dark: #d99100;

    --color-secondary: #111827;


    /*
    |--------------------------------------------------------------------------
    | Dark surfaces
    |--------------------------------------------------------------------------
    */

    --color-dark: #080b10;
    --color-dark-2: #0d1118;
    --color-dark-3: #131923;
    --color-dark-4: #1a2230;


    /*
    |--------------------------------------------------------------------------
    | Neutral
    |--------------------------------------------------------------------------
    */

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

    --color-text: #111827;
    --color-text-soft: #374151;

    --color-muted: #64748b;
    --color-muted-light: #94a3b8;

    --color-background: #ffffff;
    --color-background-soft: #f6f7f9;

    --color-border: #e5e7eb;

    --color-dark-border:
        rgba(255, 255, 255, 0.09);


    /*
    |--------------------------------------------------------------------------
    | States
    |--------------------------------------------------------------------------
    */

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


    /*
    |--------------------------------------------------------------------------
    | Typography
    |--------------------------------------------------------------------------
    */

    --font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;

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


    /*
    |--------------------------------------------------------------------------
    | Layout
    |--------------------------------------------------------------------------
    */

    --site-container: 1380px;

    --site-gutter:
        24px;

    --header-height:
        84px;


    /*
    |--------------------------------------------------------------------------
    | Radius
    |--------------------------------------------------------------------------
    */

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-round: 999px;


    /*
    |--------------------------------------------------------------------------
    | Shadows
    |--------------------------------------------------------------------------
    */

    --shadow-sm:
        0 4px 15px
        rgba(15, 23, 42, 0.06);

    --shadow-md:
        0 15px 40px
        rgba(15, 23, 42, 0.09);

    --shadow-lg:
        0 30px 80px
        rgba(15, 23, 42, 0.14);


    /*
    |--------------------------------------------------------------------------
    | Transitions
    |--------------------------------------------------------------------------
    */

    --transition-fast:
        150ms ease;

    --transition:
        220ms cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        );

    --transition-slow:
        400ms cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        );


    /*
    |--------------------------------------------------------------------------
    | Z-index
    |--------------------------------------------------------------------------
    */

    --z-header: 900;
    --z-backdrop: 1100;
    --z-mobile-menu: 1200;
    --z-modal: 1500;
    --z-notification: 2000;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1024px
) {

    :root {
        --site-gutter:
            20px;

        --header-height:
            76px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (
    max-width: 767px
) {

    :root {
        --site-gutter:
            14px;

        --header-height:
            72px;
    }

}