:root{
    /* bg Colors */
    --bg-primary-color:     #080911;
    --bg-secondary-color:   #1a1a2e;
    --bg-tertiary-color:    #111219;
    --bg-accent-color:      #f8f8f8;
    --bg-hover-color:       rgba(255, 255, 255, 0.08);
    --bg-active-color:      rgba(255, 255, 255, 0.12);
 
/* slider Colors */
--slider-track-color:        rgba(255, 255, 255, 0.1);
--slider-track-filled-color: rgba(255, 255, 255, 0.45);
--slider-thumb-color:        #f92e2e;

 /* glass blur */
 --glass-blur:               8px;
 --glass-blur-sm:           4px;
 --glass-blur-lg:           20px;
 --glass-blur-xl:           28px;

 /* glass Colors */
 --glass-bg-from:        rgba(255, 255, 255, 0.115);
 --glass-bg-to:          rgba(255, 255, 255, 0.03);
 --glass-bg-hover-from:  rgba(255, 255, 255, 0.18);
 --glass-bg-hover-to:    rgba(255, 255, 255, 0.06);

 /* drawer-glass Colors */
 --glass-drawer-from:        rgba(39, 39, 42, 0.9);
 --glass-drawer-to:          rgba(8, 8, 11, 0.6);


 /* thick-glass Colors */
 --thickglass-bg-from:        rgba(255, 255, 255, 0.9);
 --thickglass-bg-to:          rgba(195, 195, 195, 0.7);
 --thickglass-bg-hover-from:  rgba(255, 255, 255, 0.9);
 --thickglass-bg-hover-to:    rgba(210, 210, 210, 0.8);

    /* text Colors */
    --text-primary-color:   #ffffff;
    --text-accent-color:   #c8c8ce;
    --text-brand-color:   #3aedc9;
    
    --text-secondary-color: #8d8d95;
    --text-tertiary-color:   #4e4e53;

    /* border Colors */
    --border-primary-color:   rgba(255, 255, 255, 0.1);
  --border-secondary-color: rgba(255, 255, 255, 0.174);
  --border-tertiary-color:  rgba(168, 168, 168, 0.08);

      /* shadow Colors */
  --shadow-inset-top:     rgba(255, 255, 255, 0.272);
  --shadow-inset-bottom:  rgba(0, 0, 0, 0.407);
  --shadow-drop:          rgba(0, 0, 0, 0.795);
  --shadow-drop-hover:    rgba(0, 0, 0, 0.6);

    /*padding */
    --padding-xsm: 0.35rem;
    --padding-sm: 0.5rem;
    --padding-md: 0.8rem;
    --padding-lg: 1.5rem;
    --padding-xl: 2rem;
    --padding-2xl: 4rem;
    
    /*margin */
    --margin-sm: 0.4rem;
    --margin-md: 0.8rem;
    --margin-lg: 1.5rem;
    --margin-xl: 2rem;

    /*gutter */
    --gutter-sm: 0.25rem;
    --gutter-md: 0.5rem;
    --gutter-lg: 0.8rem;
    --gutter-xl: 1.5rem;
    --gutter-2xl: 2rem;

    /*font size */
    --font-size-xxsm: 0.7rem;
    --font-size-xsm: 0.75rem;
    --font-size-sm: 0.8rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;

    /*font weight */
    --font-weight-xsm: 300;
    --font-weight-sm: 400;
    --font-weight-md: 500;
    --font-weight-lg: 600;
    --font-weight-xl: 700;

    /*border radius */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    --border-radius-2xl: 2rem;
    --border-radius-3xl: 4rem;

    /*box shadow */
    --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    --box-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --box-shadow-xl: 0 1rem 2rem rgba(0, 0, 0, 0.1);
    --box-shadow-2xl: 0 2rem 4rem rgba(0, 0, 0, 0.1);

    /*transition */
    --transition-sm:  0.2s cubic-bezier(0.25, 0, 0, 1);
    --transition-md:  0.3s cubic-bezier(0.25, 0, 0, 1);
    --transition-lg:  0.4s cubic-bezier(0.25, 0, 0, 1);
    --transition-xl:  0.5s cubic-bezier(0.25, 0, 0, 1);
    --transition-2xl: 0.6s cubic-bezier(0.25, 0, 0, 1);
}