:root {
  --font-family: "Alexandria", system-ui, sans-serif;
  --font-size-h1: 24px;
  --font-size-h2: 20px;
  --font-size-h3: 18px;
  --font-size-t-h: 15px;
  --font-size-p: 14px;
  --font-size-t: 12px;
  --line-height-h1: 32px;
  --line-height-h2: 30px;
  --line-height-h3: 30px;
  --line-height-t-h: 26px;
  --line-height-p: 24px;
  --line-height-t: 18px;
  --weight-100: 100;
  --weight-200: 200;
  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;
  --weight-800: 800;
  --weight-900: 900;

  --p100: #FFECEA;
  --p200: #FFD8D4;
  --p300: #FFC4BF;
  --p400: #FEB1AB;
  --p500: #FB9C96;
  --p600: #F78882;
  --p700: #F3726E;
  --p800: #EE5A59;
  --p900: #E83E44;
  --p1000: #E10F2D;
  --p1100: #C40B26;
  --p1200: #A7081F;
  --p1300: #8B0518;
  --p1400: #700311;
  --p1500: #56020B;
  --p1600: #3E0106;
  --p1700: #270002;
  --p1800: #120001;
  --p1900: #020000;
  --s100: #F2F2F3;
  --s200: #E5E5E7;
  --s300: #D8D9DB;
  --s400: #CBCCCF;
  --s500: #BEC0C3;
  --s600: #B1B4B8;
  --s700: #A5A8AC;
  --s800: #999CA1;
  --s900: #8D9196;
  --s1000: #81858b;
  --s1100: #6F7378;
  --s1200: #5E6166;
  --s1300: #4E5054;
  --s1400: #3E4043;
  --s1500: #2E3032;
  --s1600: #1F2123;
  --s1700: #121314;
  --s1800: #060607;
  --s1900: #010101;
  --t100: #E6E7EC;
  --t200: #CECFDA;
  --t300: #B6B8C8;
  --t400: #9EA1B6;
  --t500: #888BA4;
  --t600: #727692;
  --t700: #5C6181;
  --t800: #484C70;
  --t900: #35385F;
  --t1000: #23254E;
  --t1100: #1D1F43;
  --t1200: #171938;
  --t1300: #11132D;
  --t1400: #0C0D23;
  --t1500: #070819;
  --t1600: #04040F;
  --t1700: #010207;
  --t1800: #000002;
  --t1900: #000000;
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 20px;
    --font-size-h2: 18px;
    --font-size-h3: 16px;
    --font-size-t-h: 13px;
    --font-size-p: 12px;
    --font-size-t: 10px;
    --line-height-h1: 30px;
    --line-height-h2: 30px;
    --line-height-h3: 24px;
    --line-height-t-h: 22px;
    --line-height-p: 15px;
    --line-height-t: 12px;

  }
}

/* everything inside ONE variable (style, variant, weight, stretch, size/line-height, family) */
/* full 'font' shorthand in one variable. No quotes around the whole value. */
:root {
  --h1: normal normal var(--weight-800) normal var(--font-size-h1) / var(--line-height-h1) var(--font-family);
  --h1-l: normal normal var(--weight-300) normal var(--font-size-h1) / var(--line-height-h1) var(--font-family);
  --h2: normal normal var(--weight-700) normal var(--font-size-h2) / var(--line-height-h2) var(--font-family);
  --h3: normal normal var(--weight-700) normal var(--font-size-h3) / var(--line-height-h3) var(--font-family);
  --t-h: normal normal var(--weight-700) normal var(--font-size-t-h) / var(--line-height-t-h) var(--font-family);
  --p-b: normal normal var(--weight-700) normal var(--font-size-p) / var(--line-height-p) var(--font-family);
  --p: normal normal var(--weight-400) normal var(--font-size-p) / var(--line-height-p) var(--font-family);
  --t-b: normal normal var(--weight-700) normal var(--font-size-t) / var(--line-height-t) var(--font-family);
  --t: normal normal var(--weight-400) normal var(--font-size-t) / var(--line-height-t) var(--font-family);
}