/* ======================================================
   GAURAV PORTFOLIO
   Design System Variables
   ====================================================== */

:root {

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

    --clr-bg: #050505;
    --clr-bg-secondary: #0d0d0d;
    --clr-card: #121212;
    --clr-card-hover: #191919;

    --clr-primary: #ff2d55;
    --clr-primary-dark: #d90429;
    --clr-primary-light: #ff5c7c;

    --clr-white: #ffffff;
    --clr-text: #d6d6d6;
    --clr-text-light: #9f9f9f;

    --clr-border: rgba(255,255,255,.08);

    --clr-success: #00c853;
    --clr-warning: #ffb300;
    --clr-danger: #ff1744;



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

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

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



    /* ==================================================
       FONT SIZE
       ================================================== */

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.5rem;
    --fs-xl: 2rem;
    --fs-2xl: 3rem;
    --fs-3xl: 4rem;
    --fs-hero: 5rem;



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

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



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

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-round: 50px;



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

    --container-width: 1200px;



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

    --shadow-sm:
        0 5px 20px rgba(0,0,0,.25);

    --shadow-md:
        0 10px 30px rgba(0,0,0,.35);

    --shadow-lg:
        0 20px 50px rgba(0,0,0,.45);

    --shadow-red:
        0 0 20px rgba(255,45,85,.35);

    --shadow-red-lg:
        0 0 45px rgba(255,45,85,.45);



    /* ==================================================
       GLASS EFFECT
       ================================================== */

    --glass-bg:
        rgba(255,255,255,.04);

    --glass-border:
        rgba(255,255,255,.08);

    --glass-blur:
        blur(16px);



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

    --transition-fast: .25s ease;

    --transition-normal: .35s ease;

    --transition-slow: .6s ease;



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

    --z-loader: 99999;

    --z-cursor: 9999;

    --z-navbar: 1000;

    --z-dropdown: 900;

    --z-overlay: 800;

    --z-normal: 1;



    /* ==================================================
       SECTION
       ================================================== */

    --section-padding: 120px;



    /* ==================================================
       NAVBAR
       ================================================== */

    --nav-height: 80px;



    /* ==================================================
       BUTTON
       ================================================== */

    --btn-height: 56px;



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

    --grid-gap: 30px;



    /* ==================================================
       BREAKPOINTS
       ================================================== */

    --desktop-large: 1400px;
    --desktop: 1200px;
    --laptop: 992px;
    --tablet: 768px;
    --mobile: 576px;
    --mobile-small: 400px;

}