/* From fluid-type-scale.com */

/* For browsers that support clamp and container queries */
@supports (font-size: clamp(1rem, 1cqi, 1rem)) {
    :root {
          --fs-xsm: clamp(0.64rem, 0.12cqi + 0.61rem, 0.7rem);
          --fs-sm: clamp(0.8rem, 0.25cqi + 0.74rem, 0.94rem);
          --fs: clamp(1rem, 0.45cqi + 0.89rem, 1.25rem);
          --fs-md: clamp(1.25rem, 0.76cqi + 1.06rem, 1.67rem);
          --fs-lg: clamp(1.56rem, 1.2cqi + 1.26rem, 2.22rem);
          --fs-xlg: clamp(1.95rem, 1.83cqi + 1.5rem, 2.96rem);
          --fs-xxlg: clamp(2.44rem, 2.74cqi + 1.76rem, 3.95rem);
          --fs-xxxlg: clamp(3.05rem, 4.02cqi + 2.05rem, 5.26rem);
    }
  }
  /* For browsers that don't support clamp or container queries */
  @supports not (font-size: clamp(1rem, 1cqi, 1rem)) {
    :root {
          --fs-xsm: 0.64rem;
          --fs-sm: 0.8rem;
          --fs: 1rem;
          --fs-md: 1.25rem;
          --fs-lg: 1.56rem;
          --fs-xlg: 1.95rem;
          --fs-xxlg: 2.44rem;
          --fs-xxxlg: 3.05rem;
    }
    @media screen and (min-width: 1280px) {
      :root {
              --fs-xsm: 0.7rem;
              --fs-sm: 0.94rem;
              --fs: 1.25rem;
              --fs-md: 1.67rem;
              --fs-lg: 2.22rem;
              --fs-xlg: 2.96rem;
              --fs-xxlg: 3.95rem;
              --fs-xxxlg: 5.26rem;
      }
    }
  }

:root {
    --red: #f00;
    --green: #0f0;
    --blue: #00f;
    --black: #000;
    --white: #fff;
    
    /* MDLS -> Express */
    
    /* Color Theme Swatches in Hex */
    --xdk: #31353D;
    --blue: #445878;
    --green: #323738;
    --green-lt: #8AA8B0;
    --nearwhite: #EEEFF7;
    --greyish: #677174;
    --orange: #F26101;
    
    /* Color Theme Swatches in RGBA
    .Express-1-rgba { color: rgba(49, 53, 61, 1); }
    .Express-2-rgba { color: rgba(68, 88, 120, 1); }
    .Express-3-rgba { color: rgba(50, 55, 56, 1); }
    .Express-4-rgba { color: rgba(138, 168, 176, 1); }
    .Express-5-rgba { color: rgba(238, 239, 247, 1); }
    .Express-6-rgba { color: rgba(103, 113, 116, 1); }
    .Express-7-rgba { color: rgba(242, 97, 1, 1); }
    */
    
    /* Adobe Color: #336699 MonoChromatic */
    
    --steelblue: #369;
    --steelblue-xlt: #91bbe5;
    --steelblue-lt: #4c99e5;
    --steelblue-dk: #246;    
    --steelblue-xdk: #246;
    
    --red-dk: #994842;
    
    --grey: #777;
    --grey-xxlt: #f8f8f8;
    --grey-xlt: #eee;
    --grey-lt: #aaa;
    --grey-dk: #444;
    --grey-xdk: #222;
    
    --text-clr: var(--xdk);
    
    --ff-s: 'Open Sans', sans-serif;
    
    --lh: 1.4;
    --lh-form: 1.15;
    
    --spc-xsm: 0.25rem;
    --spc-sm: 0.5rem;
    --spc: 1rem;
    --spc-lg: 1.25rem;
    --spc-xlg: 1.5rem;
    --spc-xxlg: 2rem;
    
    --bkpt-sm: 40rem; /* 640px */
    --bkpt-md: 55rem; /* 880px */
    --bkpt-lg: 70rem; /* 1120px */
}