/**
 * Primitive tokens
 * ------------------------------------------------------------------------
 * Raw, mode-independent values exported from Figma ("Primitives" variable
 * collection, "Value" mode — see `Value.tokens.json`).
 */

:root {
  /* ---- primary (alias of blue) ---------------------------------- */
  --primary-color-0: var(--blue-0);
  --primary-color-1: var(--blue-1);
  --primary-color-2: var(--blue-2);
  --primary-color-3: var(--blue-3);
  --primary-color-4: var(--blue-4);
  --primary-color-5: var(--blue-5);
  --primary-color-6: var(--blue-6);
  --primary-color-7: var(--blue-7);
  --primary-color-8: var(--blue-8);
  --primary-color-9: var(--blue-9);
  --primary-opacity-10: var(--blue-opacity-10);
  --primary-opacity-12: var(--blue-opacity-12);
  --primary-opacity-15: var(--blue-opacity-15);
  --primary-opacity-20: var(--blue-opacity-20);

  /* ---- blue -------------------------------------------------------- */
  --blue-0: #f1f8fe;
  --blue-1: #d5e9fa;
  --blue-2: #bbdaf3;
  --blue-3: #a4c9ea;
  --blue-4: #71a7d6;
  --blue-5: #4f8ed0;
  --blue-6: #3073c7;
  --blue-7: #255baa;
  --blue-8: #1c448c;
  --blue-9: #13306d;
  --blue-opacity-10: rgb(48 115 199 / 10%);
  --blue-opacity-12: rgb(48 115 199 / 12%);
  --blue-opacity-15: rgb(48 115 199 / 15%);
  --blue-opacity-20: rgb(48 115 199 / 20%);

  /* ---- gray ---------------------------------------------------------- */
  --gray-0: #f5f9fd;
  --gray-1: #eef1f4;
  --gray-2: #c5cbd2;
  --gray-3: #aeb3b9;
  --gray-4: #98a0a7;
  --gray-5: #838a91;
  --gray-6: #6e7379;
  --gray-7: #464a4e;
  --gray-8: #2e3032;
  --gray-9: #202224;
  --gray-opacity-10: rgb(110 115 121 / 10%);
  --gray-opacity-12: rgb(110 115 121 / 12%);
  --gray-opacity-15: rgb(110 115 121 / 15%);
  --gray-opacity-20: rgb(110 115 121 / 20%);

  /* ---- red ------------------------------------------------------------ */
  --red-0: #fff1f0;
  --red-1: #ffd6d2;
  --red-2: #ffafa7;
  --red-3: #ff7d71;
  --red-4: #ff4b3b;
  --red-5: #ff210c;
  --red-6: #d81402;
  --red-7: #9f1609;
  --red-8: #6b160e;
  --red-9: #3c100b;
  --red-opacity-10: rgb(216 20 2 / 10%);
  --red-opacity-12: rgb(216 20 2 / 12%);
  --red-opacity-15: rgb(216 20 2 / 15%);
  --red-opacity-20: rgb(216 20 2 / 20%);

  /* ---- teal ------------------------------------------------------------ */
  --teal-0: #e6fcf5;
  --teal-1: #c3fadf;
  --teal-2: #96f2c4;
  --teal-3: #63e6a4;
  --teal-4: #38d988;
  --teal-5: #20c975;
  --teal-6: #12b865;
  --teal-7: #0ca659;
  --teal-8: #09924e;
  --teal-9: #087f44;
  --teal-opacity-10: rgb(18 184 101 / 10%);
  --teal-opacity-12: rgb(18 184 101 / 12%);
  --teal-opacity-15: rgb(18 184 101 / 15%);
  --teal-opacity-20: rgb(18 184 101 / 20%);

  /* ---- orange ----------------------------------------------------------- */
  --orange-0: #fff4e6;
  --orange-1: #ffe8cc;
  --orange-2: #ffd8a8;
  --orange-3: #ffc078;
  --orange-4: #ffa94d;
  --orange-5: #ff922b;
  --orange-6: #fd7e14;
  --orange-7: #f76707;
  --orange-8: #e8590c;
  --orange-9: #d9480f;
  --orange-opacity-10: rgb(253 126 20 / 10%);
  --orange-opacity-12: rgb(253 126 20 / 12%);
  --orange-opacity-15: rgb(253 126 20 / 15%);
  --orange-opacity-20: rgb(253 126 20 / 20%);

  /* ---- yellow ------------------------------------------------------------ */
  --yellow-0: #fff9db;
  --yellow-1: #fff3bf;
  --yellow-2: #ffec99;
  --yellow-3: #ffe066;
  --yellow-4: #ffd43b;
  --yellow-5: #fcc419;
  --yellow-6: #fab005;
  --yellow-7: #f59f00;
  --yellow-8: #f08c00;
  --yellow-9: #e67700;
  --yellow-opacity-10: rgb(250 176 5 / 10%);
  --yellow-opacity-12: rgb(250 176 5 / 12%);
  --yellow-opacity-15: rgb(250 176 5 / 15%);
  --yellow-opacity-20: rgb(250 176 5 / 20%);

  /* ---- color (absolutes) ---------------------------------------------- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: rgb(255 255 255 / 0%);

  /* ---- radius ----------------------------------------------------------- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-xxl: 32px;

  /* ---- padding --------------------------------------------------------- */
  --padding-3xs: 4px;
  --padding-xxs: 8px;
  --padding-xs: 12px;
  --padding-sm: 16px;
  --padding-md: 20px;
  --padding-lg: 24px;
  --padding-xl: 32px;

  /* ---- spacing -----------------------------------------------------------*/
  --spacing-none: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
}