/**
  * ACE (Active Content Environment) Root / Custom Propertues
  * 
  * This sets a standard for the ace framework environment
*/
:root 
{

  

  /** Default Font Size 
  */
  --fs: 14px;
  
  
  
  /** Default Line Height 
  */
  --lh: 1.5rem;


  /** Active scale
  */
  --scale: 0.95;



  /** Default blur value
   *
  */
  --blur: 30px;



  /** UI Element Def, Min & Max Sizes / Width
  *
  */
  --mnw: 320px;
  --dfw: 1280px;
  --mxw: 1400px;



  /** Overscroll Behaviors
   *
  */
  overscroll-behavior: none;



  /** UI Layers / Levels 
   *
  */
  --lev-0: 0;
  --lev-1: 1;
  --lev-2: 2;
  --lev-3: 3;
  --lev-4: 4;
  --lev-5: 5;
  --lev-6: 6;
  --lev-7: 7;
  --lev-8: 8;
  --lev-9: 9;
  /*
   * Max Level
  */
  --max-lev: 10;





  /** Base / Default Header heights 
   * 
   * These heights set a standard for UI headers
  */
  --hdr-30: 30px;
  --hdr-40: 40px;
  --hdr-50: 50px;
  --hdr-60: 60px;
  --hdr-70: 70px;
  --hdr-80: 80px;
  /**
   * Default Header Height
  */
  --def-hdr-height: 70px;




  /** Inversed heights 
   * 
   * These heights are used to set negative margins & paddings where needed
  */
  --30-hdr: -30px;
  --40-hdr: -40px;
  --50-hdr: -50px;
  --60-hdr: -60px;
  --70-hdr: -70px;
  --80-hdr: -80px;
  /**
   * Default Inversed Header Height
  */
  --def-hdr-height: -70px;





  /** Default border radius Properties 
  */
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-7: 7px;
  --radius-10: 10px;
  --radius-15: 15px;
  --radius-20: 20px;
  --radius-fl: 100vw;




  /** Transition time / duration 
  */
  --trans-10: 0.10s;
  --trans-15: 0.15s;
  --trans-20: 0.20s;
  --trans-20: 0.20s;
  --trans-30: 0.30s;
  










  /**
   * Default Color Properties 
  */











  /* Reds */
  --red-0: #a50000;
  --red-1: #bd0101;
  --red-2: #e70101;
  --red-3: #ff0000;
  --red-4: #ff2c2c;
  --red-5: #ff3f3f;
  /* 
   * Base Red CLR 
  */
  --base-red: #a50000;




  /* Blues */
  --blue-0: #0026a3;
  --blue-1: #0047d6;
  --blue-2: #0053fa;
  --blue-3: #3EA6FF;
  --blue-4: #3EA6FF;
  --blue-5: #cae6ff;
  /* 
   * Base Blue CLR 
  */
  --base-blue: #0047d6;
  


  /* Purples */
  --purple-0: #460096;
  --purple-1: #4e00a7;
  --purple-2: #5801bb;
  --purple-3: #5801bb;
  --purple-4: #6c01e7;
  --purple-5: #7904ff;
  /* 
   * Base Purple CLR  
  */
  --base-purple: #861dfd;



  /* Greens */
  --green-0: #059669;
  --green-1: #019e6c;
  --green-2: #02af78;
  --green-3: #00bd81;
  --green-4: #00db96;
  --green-5: #40ffc3;
  /*
   * Base Green CLR 
  */
  --base-green: #009465;
  --light-green: #d0fff0;



  /* Greys */
  --gray-0: #f7f7f7;
  --gray-1: #f8fafc;
  --gray-2: #eeeeee;
  --gray-3: #dddddd;
  --gray-4: #cccccc;
  --gray-5: #aaaaaa;
  /*
   * Base Gey CLR
  */
  --base-gray: #f3f3f3;




  /* Text color Blue */
  --blue-clr-0: #0026a3;
  --blue-clr-1: #0047d6;
  --blue-clr-2: #0053fa;
  --blue-clr-3: #3EA6FF;
  --blue-clr-4: #3EA6FF;
  --blue-clr-5: #cae6ff;
  /* 
   * Base Blue CLR 
  */
  --base-blue-clr: #0e55e2;
  --base-light-blue: #eaf6ff;



  /** Prime Colors
  */
  --prime-0: #001638;
  --prime-1: #ff4000;
  /*
   * Base Prime CLR
  */
  --base-prime: #00ecfd;
  


  
  /** Base Anchor tags color 
  */
  --anchor-clr-0: #3176ff;
  --anchor-clr-1: #1462ff;










  /*
   * Frosted Background Color Properties
  */










  /** White Frosted Background
  */
  --frost-bg:
  linear-gradient(
    45deg,
    hsl(0, 0%, 100%, 0.08) 15%, 
    hsl(0, 0%, 100%, 0.2)
  );


  /** Red Frosted Background
  */
  --frost-red: 
  linear-gradient(
    45deg,
    hsl(0, 0%, 100%, 0.1) 10%, 
    hsl(0, 100%, 50%, 0.2)
  ); 


  /** Blue Frosted Background
  */
  --frost-blue:  
  linear-gradient(
    45deg,
    hsl(0, 0%, 100%, 0.1) 10%, 
    hsla(239, 100%, 50%, 0.15)
  );

  
  /* Green Frosted Background
  */
  --frost-green:  
  linear-gradient(
    45deg,
    hsl(0, 0%, 100%, 0.1) 10%, 
    hsla(113, 94%, 56%, 0.15)
  );











  /*
   * Color Invertion Properties
  */











  /** Invert color to dark 
   *
  */
  --invert-dark: 
  invert(12%) 
  sepia(44%) 
  saturate(794%) 
  hue-rotate(172deg) 
  brightness(100%) 
  contrast(100%);




  /** Invert color to white 
   *
  */
  --invert-white: 
  invert(100%) 
  sepia(0%) 
  saturate(7482%) 
  hue-rotate(122deg) 
  brightness(98%) 
  contrast(98%);




  /** Invert color to blue 
   *
  */
  --invert-blue: 
  invert(40%) 
  sepia(82%) 
  saturate(4388%) 
  hue-rotate(201deg) 
  brightness(105%) 
  contrast(101%);




  /** Invert color to green 
   *
  */
  --invert-green: 
  brightness(0) 
  saturate(100%) 
  invert(41%) 
  sepia(38%) 
  saturate(1044%) 
  hue-rotate(112deg) 
  brightness(96%) 
  contrast(100%);




  /** Invert color to red 
   *
  */
  --invert-red: 
  invert(16%) 
  sepia(56%) 
  saturate(7473%) 
  hue-rotate(359deg) 
  brightness(93%) 
  contrast(125%);




  /** Invert color to fire 
   *
  */
  --invert-fire: 
  invert(16%) 
  sepia(91%) 
  saturate(7500%) 
  hue-rotate(356deg) 
  brightness(101%) 
  contrast(121%);




  /** Invert color to grey 
   *
  */
  --invert-grey: 
  invert(99%) 
  sepia(4%) 
  saturate(451%) 
  hue-rotate(208deg) 
  brightness(117%) 
  contrast(79%);




  /** Invert color to purple 
   *
  */
  --invert-purple: 
  invert(12%) 
  sepia(81%) 
  saturate(7499%) 
  hue-rotate(281deg) 
  brightness(104%) 
  contrast(116%);




  /** Invert color to salmon clr 
   *
  */
  --invert-salmon: 
  invert(62%) 
  sepia(10%) 
  saturate(2567%) 
  hue-rotate(325deg) 
  brightness(95%) 
  contrast(97%);




  /** Invert color to Yellow 
   *
  */
  --invert-yellow: 
  invert(92%) 
  sepia(50%) 
  saturate(2334%) 
  hue-rotate(348deg) 
  brightness(97%) 
  contrast(108%);




  /** Invert color to lighter color ??? 
   *
  */
  --invert-light: 
  invert(87%) 
  sepia(61%) 
  saturate(4681%) 
  hue-rotate(176deg) 
  brightness(106%) 
  contrast(104%);




  /** Invert color to azul 
   *
  */
  --invert-azul: 
  invert(89%) 
  sepia(12%) 
  saturate(929%) 
  hue-rotate(146deg) 
  brightness(91%) 
  contrast(88%);











  /*
   * Default Backdrop Gradients
  */
  
  









  /** Red BG Gradient
   *   
  */
  --bg-gradient-red: linear-gradient(
    to bottom,
    hsla(210, 97%, 44%, 0) 10%,
    hsla(0, 100%, 49%, 0.8)
  );



  /** Firered BG Gradient 
   *  
  */
  --bg-gradient-fire: linear-gradient(
    to bottom,
    hsla(210, 97%, 44%, 0) 10%,
    hsla(17, 100%, 50%, 0.8)
  );


  
  /** Blue BG Gradient 
   *  
  */
  --bg-gradient-blue: linear-gradient(
    to bottom,
    hsla(210, 97%, 44%, 0) 10%,
    hsl(239, 100%, 25%)
  );


  
  /** Dark BG Gradient
   *   
  */
  --bg-gradient-purple: linear-gradient(
    to bottom,
    hsla(210, 97%, 44%, 0) 10%,
    hsla(278, 100%, 4%, 0.8)
  );


  
  /** Purple BG Gradient
   *   
  */
  --bg-gradient-purple: linear-gradient(
    to bottom,
    hsla(210, 97%, 44%, 0) 10%,
    hsla(278, 100%, 49%, 0.8)
  );


  
  /** Green BG Gradient
   *   
  */
  --bg-gradient-green: linear-gradient(
    to bottom,
    hsla(210, 97%, 44%, 0) 10%,
    hsla(110, 93%, 49%, 0.80)
  );


  
  /** Sunset BG Gradient
   *   
  */
  --bg-gradient-sunset: linear-gradient(
    to bottom,
    hsla(210, 97%, 44%, 0) 10%,
    hsla(45, 100%, 50%, 0.548)
  );











  /*
   * Box Shadows
  */











  /** Soft Shadow Property
  */
  --soft-shdw:hsla(0, 0%, 10%, 0.20);


  /** Default Shadow Property
  */
  --dark-shdw:hsla(0, 0%, 0%, 0.7);


  /** Default Button Shadow Property
  */
  --btn-shdw:hsl(0, 0%, 60%, 0.4);


  /** Button Shadow Properties 
  */
  --btn-shdw: 0px 0px 7px 2px hwb(0 39% 61% / 0.15);


  /** Base Shadow Properties 
  */
  --base-shdw-dark: 0px 20px 20px -3px hsla(0, 0%, 0%, 0.5);
  --base-shdw-soft: 0px 20px 20px -3px hsla(0, 0%, 10%, 0.3);
  

  /** Float Shadow Properties 
  */
  --float-shdw-dark: 0px 0px 30px 5px hsla(0, 0%, 0%, 0.5);
  --float-shdw-soft: 0px 0px 20px 5px hsla(0, 0%, 0%, 0.3);










  /*
   * Font Families
  */






  



  
  /** Default Font Family 
  */
  --def-font: "Arial", "Helvetica", "sans-serif";


  
  /** Base Font Family 
  */
  --base-font: "Segoe UI Emoji", "Segoe UI Symbol", "Arial", "Helvetica", "sans-serif";

  



























}