Tokens

/* css tokens - 🚧 WIP */
:root {
  /* dialog */
  --prs-dialog-backdrop: 0 0 0 / .5;
  
  /* gray */
  --prs-c-gray-900: #080808; /* blackish */
  --prs-c-gray-800: #242424; /* ultra-dark */
  --prs-c-gray-700: #383838; /* very-dark */
  --prs-c-gray-600: #686868; /* dark */
  --prs-c-gray-500: #989898; /* medium-dark */
  --prs-c-gray: var(--prs-c-gray-500);
  --prs-c-gray-400: #C8C8C8; /* medium */
  --prs-c-gray-300: #DDDDDD; /* light */
  --prs-c-gray-200: #F3F3F3; /* very-light */
  --prs-c-gray-100: #F8F8F8; /* off-white */
  /* aqua */
  --prs-c-aqua-600: #205460; /* dark */
  --prs-c-aqua-500: #00758E; /* DEFAULT */
  --prs-c-aqua: var(--prs-c-aqua-500);
  --prs-c-aqua-400: #45A5B5; /* medium */
  --prs-c-aqua-300: #A2D6DD; /* light */
  --prs-c-aqua-200: #CFF3F9; /* very-light */
  /* red */
  --prs-c-red-600: #A51426; /* dark */
  --prs-c-red-500: #DA1B2C; /* DEFAULT */
  --prs-c-red: var(--prs-c-red-500);
  --prs-c-red-400: #EF5656; /* medium */
  --prs-c-red-300: #FFAFAF; /* light */
  --prs-c-red-200: #FFE7E5; /* very-light */
  /* green */
  --prs-c-green-600: #2C5E20; /* dark */
  --prs-c-green-500: #3B822E; /* DEFAULT */
  --prs-c-green: var(--prs-c-green-500);
  --prs-c-green-400: #68B75F; /* medium */
  --prs-c-green-300: #ACDBA2; /* light */
  --prs-c-green-200: #DAF4D4; /* very-light */
  /* blue */
  --prs-c-blue-600: #004C72; /* dark */
  --prs-c-blue-500: #006EB8; /* DEFAULT */
  --prs-c-blue: var(--prs-c-blue-500);
  --prs-c-blue-400: #3192D3; /* medium */
  --prs-c-blue-300: #B0DAFF; /* light */
  --prs-c-blue-200: #E0F1FF; /* very-light */
  /* orange */
  --prs-c-orange-600: #A83D0E; /* dark */
  --prs-c-orange-500: #DD5714; /* DEFAULT */
  --prs-c-orange: var(--prs-c-orange-500);
  --prs-c-orange-400: #FF8A57; /* medium */
  --prs-c-orange-300: #FFC196; /* light */
  --prs-c-orange-200: #FFE5D3; /* very-light */
  /* teal */
  --prs-c-teal-600: #16664B; /* dark */
  --prs-c-teal-500: #218466; /* DEFAULT */
  --prs-c-teal: var(--prs-c-teal-500);
  --prs-c-teal-400: #5FB79C; /* medium */
  --prs-c-teal-300: #AEE5D3; /* light */
  --prs-c-teal-200: #DBFFF3; /* very-light */
  /* yellow */
  --prs-c-yellow-600: #74600C; /* dark */
  --prs-c-yellow-500: #B79E25; /* DEFAULT */
  --prs-c-yellow: var(--prs-c-yellow-500);
  --prs-c-yellow-400: #E5D676; /* medium */
  --prs-c-yellow-300: #FAF2A9; /* light */
  --prs-c-yellow-200: #FFFBD7; /* very-light */
  /* purple */
  --prs-c-purple-600: #543B50; /* dark */
  --prs-c-purple-500: #865F7F; /* DEFAULT */
  --prs-c-purple: var(--prs-c-purple-500);
  --prs-c-purple-400: #B286AF; /* medium */
  --prs-c-purple-300: #E5C6E3; /* light */
  --prs-c-purple-200: #FFE6FD; /* very-light */
  /* magenta */
  --prs-c-magenta-600: #562135; /* dark */
  --prs-c-magenta-500: #882345; /* DEFAULT */
  --prs-c-magenta: var(--prs-c-magenta-500);
  --prs-c-magenta-400: #B26487; /* medium */
  --prs-c-magenta-300: #EDB0CE; /* light */
  --prs-c-magenta-200: #FFE6F3; /* very-light */  
  /* typography */
  --prs-sans: 'Source Sans Pro';
  /* heading */
  --prs-heading-xl-fs: 32px;
  --prs-heading-xl-fl: 48px;
  --prs-heading-xl-fw: semibold;
  --prs-heading-lg-fs: 24px;
  --prs-heading-lg-fl: 32px;
  --prs-heading-lg-fw: semibold;
  --prs-heading-md-fs: 18px;
  --prs-heading-md-fl: 24px;
  --prs-heading-md-fw: semibold;
  --prs-heading-sm-fs: 16px;
  --prs-heading-sm-fl: 20px;
  --prs-heading-sm-fw: semibold;
  /* content */
  --prs-content-paragraph-fs: 17px;
  --prs-content-paragraph-fl: 27px;
  --prs-content-paragraph-fw: normal;
  --prs-content-footnote-fs: 13px;
  --prs-content-footnote-fl: 20px;
  --prs-content-footnote-fw: normal;
  /* ui */
  --prs-ui-lg-fs: 18px;
  --prs-ui-lg-fl: 24px;
  --prs-ui-lg-fw: normal;
  --prs-ui-base-fs: 16px;
  --prs-ui-base-fl: 24px;
  --prs-ui-base-fw: normal;
  --prs-ui-sm-fs: 14px;
  --prs-ui-sm-fl: 20px;
  --prs-ui-sm-fw: normal;
  --prs-ui-subtext-fs: 13px;
  --prs-ui-subtext-fl: 18px;
  --prs-ui-subtext-fw: normal;
  /* button */
  --prs-button-lg-fs: 18px;
  --prs-button-lg-fl: 20px;
  --prs-button-lg-fw: normal;
  --prs-button-md-fs: 15px;
  --prs-button-md-fl: 20px;
  --prs-button-md-fw: normal;
  --prs-button-sm-fs: 12px;
  --prs-button-sm-fl: 20px;
  --prs-button-sm-fw: normal;
}