/* Design tokens for fedya.co. Every page loads this before the Webflow CSS.
   Source of truth: tokens/tokens.json is generated from this file (npm run tokens). */
:root {
  /* Colour */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey-25: #f8f8f8;
  --color-grey-50: #f3f3f3;
  --color-grey-100: #e6e6e6;
  --color-grey-125: #dfdfdf;
  --color-grey-150: #d9d9d9;
  --color-grey-200: #cfcfcf;
  --color-grey-225: #c7c7c7;
  --color-grey-300: #b4b4b4;
  --color-grey-325: #adadad;
  --color-grey-375: #9e9e9e;
  --color-grey-450: #8e8e8e;
  --color-grey-475: #858585;
  --color-grey-525: #7c7c7c;
  --color-grey-550: #727272;
  --color-grey-600: #666666;
  --color-grey-725: #484849;
  --color-grey-750: #444444;
  --color-grey-775: #3d3d3d;
  --color-grey-800: #363636;
  --color-grey-850: #292929;
  --color-grey-875: #242424;
  --color-grey-900: #1e1e1e;
  --color-grey-925: #181818;
  --color-grey-950: #101010;
  --color-grey-975: #0b0b0b;
  --color-blue-50: #edeefb;
  --color-blue-200: #adb1ff;
  --color-blue-250: #99b3ff;
  --color-blue-300: #9db5f4;
  --color-blue-400: #4164e1;
  --color-blue-800: #0c276d;
  --color-cyan-100: #e4f6f9;
  --color-cyan-150: #d5f3f6;
  --color-cyan-200: #c8f0ff;
  --color-green-200: #9fff98;
  --color-lime-400: #defb2c;
  --color-lime-600: #b7d600;
  --color-lime-900: #263504;
  --color-purple-700: #6d0483;
  --color-red-100: #ffdcdc;
  --color-red-200: #faacae;
  --color-red-250: #e9afa3;
  --color-red-500: #cc4949;
  --color-red-700: #752121;
  --color-red-800: #78070a;
  --color-sky-300: #8cc8f0;
  --color-sky-500: #0a87fd;
  --color-sky-550: #3b79c3;
  --color-sky-600: #0093fd;
  --color-sky-650: #0074e8;
  --color-sky-700: #0061c2;
  --color-slate-700: #4b5563;
  --color-teal-300: #7ee2d2;
  --color-teal-700: #14856c;
  --color-violet-300: #bb94e5;
  --color-violet-350: #b096e2;
  --color-violet-800: #37165b;
  --color-yellow-100: #fff9bf;

  /* Theme: the light and dark sides of the site. In Figma these are one collection with two modes. */
  --light-background: var(--color-grey-25);
  --light-surface: var(--color-white);
  --light-text: var(--color-black);
  --light-button: var(--color-black);
  --light-button-text: var(--color-white);
  --light-toggle-offset: 64px;
  --dark-background: var(--color-black);
  --dark-surface: var(--color-grey-950);
  --dark-text: var(--color-white);
  --dark-button: var(--color-lime-400);
  --dark-button-text: var(--color-white);
  --dark-toggle-offset: 0px;

  /* Type */
  --font-family-inter: Inter, sans-serif;
  --font-family-roboto: Roboto, sans-serif;
  --font-family-roslindale-display: "Roslindalevariable Vf Display Testing", sans-serif;
  --font-family-roslindale: "Roslindalevariable Vf Testing", sans-serif;
  --font-family-roslindale-text: "Roslindale Testing", sans-serif;
  --font-family-montserrat: Montserrat, sans-serif;
  --font-family-bricolage: "Bricolagegrotesque Variablefont Opsz Wdth Wght", sans-serif;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-56: 56px;
  --font-size-64: 64px;
  --font-size-72: 72px;
  --font-size-80: 80px;
  --font-size-96: 96px;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Corner radius */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-64: 64px;

  /* Space: padding, margin and gaps */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-104: 104px;
  --space-120: 120px;
  --space-160: 160px;
}