/* 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;
    --black: #000;
    --white: #fff;
    
    /* MDLS -> Express */
    
    /* Color Theme Swatches in Hex */
    --xdk: oklch(0.226 0.0083 264.39); /* #1A1C20 */
    --blue: oklch(0.458 0.058 259.6); /* #445878 */
    --green: oklch(0.391 0.008 211.0); /* #323738 */
    --green-lt: oklch(0.7117 0.035 215.71); /* #8AA8B0 */
    --nearwhite: oklch(0.9537 0.0107 280.47); /* #EEEFF7 */
    --greyish: oklch(0.5412 0.013 217.63); /* #677174 */
    --orange: oklch(0.6696 0.1958 43.63); /* #F26101 */
    
    --blue-xxdk: oklch(0.058 0.007 259.6);
    --blue-xdk: oklch(0.191 0.024 259.6);
    --blue-dk: oklch(0.324 0.041 259.6);
    --blue-lt: oklch(0.591 0.061 259.6);
    --blue-xlt: oklch(0.724 0.039 259.6);
    --blue--xlt: oklch(0.858 0.019 259.6);

    --green2-xxdk: oklch(0.221 0.005 211.0);
    --green2-xdk: oklch(0.306 0.007 211.0);
    --green2-dk: oklch(0.391 0.008 211.0);
    --green2: oklch(0.476 0.010 211.0);
    --green2-lt: oklch(0.562 0.012 211.0);
    --green2-xlt: oklch(0.647 0.014 211.0);
    --green2-xxlt: oklch(0.732 0.016 211.0);
    
    --red-dk: oklch(0.5032 0.1098 26.04); /* #994842 */ 
    
    /* --grey: #777;
    --grey-xxlt: #f8f8f8;
    --grey-xlt: #eee;
    --grey-lt: #aaa;
    --grey-dk: #444;
    --grey-xdk: #222; */
    
    --grey-xxdk: oklch(0.169 0.000 0.0);
    --grey-xdk: oklch(0.299 0.000 0.0);
    --grey-dk: oklch(0.430 0.000 0.0);
    --grey: oklch(0.560 0.000 0.0);
    --grey-lt: oklch(0.690 0.000 0.0);
    --grey-xlt: oklch(0.820 0.000 0.0);
    --grey-xxlt: oklch(0.950 0.000 0.0);
    
    --text-clr: var(--xdk);
    
    --ff-s: Inter, 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 */
}