@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;

  
  --white: #fff;
  --black: #000;
  
  --blue: #5d87a1; /* base blue. rgb(93, 135, 161) in logo; oklch(0.603 0.061 236.3) as a pure conversion */
  --blue-xxlt: #d4dfe6;

  --reddish: #994842;
  
  --grey: #808080; /* in logo */
  --grey-xxlt: #f7f7f7;
  --grey-xlt: #e3e3e3;
  --grey-lt: #c6c6c6;
  --grey-dk: #585858; /* in logo */
  --grey-xdk: #333;
  
  /* Blues from OKLCH.fyi */
  --blue-xxxdk: oklch(0.203 0.021 236.3);
  --blue-xxdk: oklch(0.296 0.030 236.3);
  --blue-xdk: oklch(0.389 0.039 236.3);
  --blue-dk: oklch(0.483 0.049 236.3);
  --blue-base: oklch(0.576 0.058 236.3); /*  #5d87a1 in this shades context */
  --blue-lt: oklch(0.670 0.068 236.3);
  --blue-xlt: oklch(0.763 0.066 236.3);
  --blue-xxlt: oklch(0.857 0.038 236.3);
  --blue-xxxlt: oklch(0.950 0.013 236.3);
  
  --church-year-blue: #1F0DA6;
  --church-year-green: #00630D;
  --church-year-purple: #701D8F;
  --church-year-red: #A3050A;
  --church-year-white: #FFBF00;
  
  --ff-s: 'PT Sans', 'Helvetica Neue', Arial, Sans-serif;
  --ff: 'PT Serif', 'Times New Roman', Serif;
  
  --spc: 1rem;
  --spc-lg: 2rem;
  
  --fs-sm: calc(var(--fs) * 0.75);
  --fs: 18px;
  --fs-bitlg: clamp(1.1rem,2cqi,1.25rem);      
  --fs-lg: clamp(1.25rem,3cqi,1.5rem);
  --fs-xlg: clamp(1.5rem,4cqi,2rem);
  --fs-xxlg: clamp(2rem,6cqi,3rem);

  --fs-100: clamp(0.84rem, calc(0.94rem + -0.13vw), 0.91rem);
  --fs-200: clamp(1.09rem, calc(1.08rem + 0.06vw), 1.13rem);
  --fs-300: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem);
  --fs-400: clamp(1.58rem, calc(1.41rem + 0.83vw), 2rem);
  --fs-500: clamp(1.89rem, calc(1.59rem + 1.51vw), 2.67rem);
  --fs-600: clamp(2.27rem, calc(1.77rem + 2.51vw), 3.55rem);
  --fs-700: clamp(2.72rem, calc(1.94rem + 3.93vw), 4.74rem);
  --fs-800: clamp(3.27rem, calc(2.08rem + 5.95vw), 6.31rem);

  --text-clr: var(--grey-xdk);
  
  --lh-form: 1.15;
  --lh: 1.4;
  --lh-md: 1.5;

  --spc-xsm: 0.25rem;
  --spc-sm: 0.5rem;
  --spc: 1rem;
  --spc-lg: 1.25rem;
  --spc-xlg: 1.5rem;
  --spc-xxlg: 2rem;
  --spc-xxxlg: 2.5rem;
  
  --bkpt-xsm: 30rem; /* 480px */
  --bkpt-sm: 40rem; /* 640px */
  --bkpt-md: 48rem; /* 768px */
  --bkpt-lg: 60rem; /* 960px */
}