/*==========================================================
    IMPACTA GAMES
    DESIGN SYSTEM

    VARIABLES
==========================================================*/

:root{
    
    --color-primary: #2EBBFF;
    --color-primary-hover: #45C7FF;

    --color-white: #FFFFFF;

    --color-text: rgba(255,255,255,.90);
    --color-text-secondary: rgba(255,255,255,.72);

    --color-background: #090B11;

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

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

    --ig-primary:                 #18B8FF;
    --ig-primary-light:           #59D5FF;
    --ig-primary-dark:            #009FE3;

    --ig-secondary:               #5E5CE6;
    --ig-accent:                  #00F5FF;

    --ig-success:                 #22C55E;
    --ig-warning:                 #F59E0B;
    --ig-danger:                  #EF4444;


    /*======================================================
        BACKGROUNDS
    ======================================================*/

    --ig-bg-page:                 #030712;
    --ig-bg-section:              #08111C;
    --ig-bg-surface:              #101A2D;

    --ig-bg-card:                 rgba(11,20,35,.82);
    --ig-bg-glass:                rgba(255,255,255,.04);

    --ig-overlay-light:           rgba(255,255,255,.05);
    --ig-overlay-dark:            rgba(3,7,18,.55);


    /*======================================================
        TEXT
    ======================================================*/

    --ig-text-title:              #FFFFFF;
    --ig-text-heading:            rgba(255,255,255,.95);
    --ig-text-body:               rgba(255,255,255,.82);
    --ig-text-muted:              rgba(255,255,255,.60);
    --ig-text-disabled:           rgba(255,255,255,.35);


    /*======================================================
        BORDERS
    ======================================================*/

    --ig-border:                  rgba(255,255,255,.08);
    --ig-border-light:            rgba(255,255,255,.14);
    --ig-border-strong:           rgba(255,255,255,.22);

    --ig-border-glow:             rgba(24,184,255,.35);


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

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

    --ig-font-light:              300;
    --ig-font-regular:            400;
    --ig-font-medium:             500;
    --ig-font-semibold:           600;
    --ig-font-bold:               700;
    --ig-font-black:              800;

    --ig-line-height:             1.6;


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

    --ig-fs-xs:                   .75rem;
    --ig-fs-sm:                   .875rem;
    --ig-fs-md:                   1rem;
    --ig-fs-lg:                   1.125rem;
    --ig-fs-xl:                   1.25rem;

    --ig-fs-h6:                   1rem;
    --ig-fs-h5:                   1.125rem;
    --ig-fs-h4:                   clamp(1.35rem,2vw,1.6rem);
    --ig-fs-h3:                   clamp(1.8rem,3vw,2.2rem);
    --ig-fs-h2:                   clamp(2.4rem,4vw,3.2rem);
    --ig-fs-h1:                   clamp(3rem,5vw,4.5rem);


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

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


    /*======================================================
        CONTENT WIDTH
    ======================================================*/

    --ig-content-xs:              640px;
    --ig-content-sm:              768px;
    --ig-content-md:              960px;
    --ig-content-lg:              1200px;
    --ig-content-xl:              1440px;


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

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

    --ig-radius-pill:             999px;
    --ig-radius-circle:           50%;


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

    --ig-shadow-xs:
        0 2px 6px rgba(0,0,0,.12);

    --ig-shadow-sm:
        0 4px 12px rgba(0,0,0,.18);

    --ig-shadow-md:
        0 12px 32px rgba(0,0,0,.28);

    --ig-shadow-lg:
        0 24px 60px rgba(0,0,0,.42);

    --ig-shadow-glow:
        0 0 40px rgba(24,184,255,.18);


    /*======================================================
        GLASSMORPHISM
    ======================================================*/

    --ig-glass-opacity:           .04;
    --ig-glass-blur:              18px;


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

    --ig-duration-fast:           .20s;
    --ig-duration-normal:         .35s;
    --ig-duration-slow:           .60s;

    --ig-ease:
        cubic-bezier(.22,.61,.36,1);

    --ig-ease-bounce:
        cubic-bezier(.34,1.56,.64,1);


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

    --ig-container-width:         1440px;

    --ig-container-padding:
        clamp(20px,3vw,40px);

    --ig-section-spacing:
        clamp(80px,10vw,140px);


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

    --ig-z-background:            -1;
    --ig-z-base:                  1;
    --ig-z-content:               10;
    --ig-z-header:                100;
    --ig-z-dropdown:              500;
    --ig-z-overlay:               900;
    --ig-z-modal:                 1000;
    --ig-z-tooltip:               1100;

}