/*==================================================
=                 VARIABLES
==================================================*/
:root{
/*==================================================
=                 COLORES
==================================================*/
    --color-primary:
        #ff0000;
    --color-primary-light:
        #ff2424;
    --color-primary-soft: 
        #620000f9;
    --color-primary-hover:
        rgba(204, 0, 0, 0.964);
    --color-shadow-red: 
        rgba(213, 0, 0, 0.505);
    --color-active-button:
        #ff000025;
    --color-surface: 
        rgba(48, 45, 45, 0.165);
    --color-border: 
        #b3b3b331;
    --color-surface-dark: 
        rgba(0, 0, 0, 0.637);

    --color-background:
        #000000ee;
    --color-card:
        rgba(100, 99, 99, 0.1);
    --color-background-foot:
        rgba(8, 8, 8, 0.941);
    --color-background-visualizer:
        #000000;

    --color-text:
        #ffffff;

    --color-text-secondary:
        rgba(170, 170, 170, 0.952);

    --color-text-tertiary:
        rgba(255, 255, 255, 0.833);

    --color-text-dark:
        #666;
/*==================================================
=                BORDES
==================================================*/
    --radius-ssm:
        4px;
    --radius-sm:
        8px;

    --radius-md:
        12px;

    --radius-lg:
        20px;

    --glass-radius:
        22px;

    --radius-xl:
        32px;

    --radius-circle: 
        50%;

    --radius-pill:
        999px;
/*=========================================
    ELEVATION SYSTEM
=========================================*/

    --shadow-soft:

        0 6px 18px rgba(0,0,0,.18);

    --shadow-medium:

        0 10px 28px rgba(0,0,0,.24);

    --shadow-large:

        0 18px 42px rgba(0,0,0,.30);

    --shadow-hr: 
        6px 10px 2px var(--color-background);

/*=========================================
    GLASS SYSTEM
=========================================*/
    --glass-bg:

        rgba(16, 16, 16, 0.628);

    --glass-bg-strong:

        rgba(255,255,255,.08);

    --glass-border:

        rgba(255, 255, 255, .08);

    --glass-highlight:

        rgba(255,255,255,.10);

    --glass-blur:

        14px;

    --navbar-blur:

        12px;
    --footer-blur:

        10px;
    
    --card-blur:

        3.5px;

/*=========================================
    GLOW SYSTEM
=========================================*/

    --glow-red:

        0 0 22px rgba(209,0,0,.18);

    --glow-red-strong:

        5px 5px 30px rgba(209, 0, 0, 0.505);


/*=========================================
    MOTION SYSTEM
=========================================*/

    --motion-fast: .18s;

    --motion-normal: .30s;

    --motion-slow: .65s;

    --motion-upperslow: .95s;

/*==================================================
=                  Curve transition
==================================================*/

    --ease-standard:

        cubic-bezier(.20,0,.00,1);

    --ease-smooth:

        cubic-bezier(.30,0,.00,1);


/*=========================================
    SPACING SYSTEM
=========================================*/
    --space-xxs: 
        2px;
    --space-xs: 
        4px;
    --space-sm: 
        8px;
    --space-md: 
        16px;
    --space-lg: 
        24px;
    --space-xl: 
        32px;
    --space-2xl: 
        48px;
    --space-3xl: 
        64px;

    --space-upperxl: 
        164px;

/*=========================================
    TYPOGRAPHY SYSTEM
=========================================*/
   --text-displaybig:

       5.3rem; 

    --text-display:

        3.8rem;

    --text-h1:

        3rem;

    --text-h2:

        2.25rem;

    --text-h3:

        1.75rem;

    --text-large:
    
        clamp(1rem, 1.6vw, 1.25rem);

    --text-body:

        1rem;

    --text-small:

        .95rem;

    --text-uppersmall: 
        .75rem;

    --text-clampsmall: 
        clamp(2.4rem,4vw,4rem);
    
    --text-clamp: 
        clamp(3rem,6.5vw,5.5rem);

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

    --leading-tight:1.1;

    --leading-heading:1.2;

    --leading-body:1.6;

/*=========================================
    FONT WEIGHT
=========================================*/

    --weight-light:300;

    --weight-normal:400;

    --weight-medium:500;

    --weight-semibold:600;

    --weight-bold:700;

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

    --tracking-tight:-0.02em;

    --tracking-normal:0;

    --tracking-wide:.04em;

    --tracking-ultra: .08em;

/*=========================================
    Z INDEX
==========================================*/
    --z-base: 0;

    --z-dropdown: 100;

    --z-navbar: 300;

    --z-modal: 500;

    --z-loader: 1000;

    
}