:root {
  ////////////////////////////////////////////////////////////////////////////////////
  // Sizes. //////////////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////////////////////
  //
  // The reason why header height is set here instead of calculating it based on its
  // content is because header is sometimes fixed and we need to offset page content
  // by specific value... And that's the value.

  --header-height: 56px;
  --site-width: 1380px;

  ////////////////////////////////////////////////////////////////////////////////////
  // Spacing Units. //////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////////////////////
  //
  // List of spacing units to use across all our components.
  //  • $(negative-)spacing-units variables are used for
  //    generate-classes() function.

  --su-05: 0.125rem; // 2px
  --su-1: 0.25rem; // 4px
  --su-2: 0.5rem; // 8px
  --su-3: 0.75rem; // 12px
  --su-4: 1rem; // 16px
  --su-5: 1.25rem; // 20px
  --su-6: 1.5rem; // 24px
  --su-7: 2rem; // 32px
  --su-8: 3rem; // 48px
  --su-9: 4rem; // 64px
  --su-10: 8rem; // 128px

  ////////////////////////////////////////////////////////////////////////////////////
  // Border radius ///////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////////////////////

  --radius: 0.375rem;
  --radius-large: 0.75rem;
  --radius-xl: 2rem;
  // 1. this is a trick for conditional border-radius: https://ishadeed.com/article/conditional-border-radius/
  // 2. intentionally using uppercase Max and Min because SCSS have issues otherwise...
  --radius-auto: Max(0px, Min(var(--radius), calc((100vw - 4px - 100%) * 9999))) /
    var(--radius);
  --radius-large-auto: Max(
      0px,
      Min(var(--radius-large), calc((100vw - 4px - 100%) * 9999))
    ) / var(--radius-large);

  ////////////////////////////////////////////////////////////////////////////////////
  // Transitions /////////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////////////////////

  --transition-func: cubic-bezier(0.17, 0.67, 0.5, 0.71);
  --transition-time: 100ms;
  --transition-props: var(--transition-func) var(--transition-time);

  ////////////////////////////////////////////////////////////////////////////////////
  // Focus ring //////////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////////////////////

  --focus-ring: 0 0 0 2px var(--base-inverted), 0 0 0 4px var(--focus);

  ////////////////////////////////////////////////////////////////////////////////////
  // Typography. /////////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////////////////////
  //
  // List of variables for typography.
  //  • Font families
  //  • Font sizes
  //  • Font weights
  //  • Line heights

  // Font families

  --ff-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  --ff-monospace: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
    Courier, monospace;
  --ff-serif: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua',
    Georgia, serif;
  --ff-comic: 'Comic Sans MS', cursive, sans-serif;
  --ff-dyslexic: OpenDyslexic, sans-serif;

  ////////////////////////////////////////////////////////////////////////////////////

  // Font sizes

  --fs-2xs: 0.675rem; // 11px
  --fs-xs: 0.75rem; // 12px
  --fs-s: 0.875rem; // 14px
  --fs-base: 1rem; // 16px
  --fs-l: 1.125rem; // 18px
  --fs-xl: 1.25rem; // 20px
  --fs-2xl: 1.5rem; // 24px
  --fs-3xl: 1.875rem; // 30px
  --fs-4xl: 2.25rem; // 36px
  --fs-5xl: 3rem; // 48px

  ////////////////////////////////////////////////////////////////////////////////////

  // Font weights

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;

  ////////////////////////////////////////////////////////////////////////////////////

  // Line heights

  --lh-tight: 1.25; // 20px for 16px font-size
  --lh-base: 1.5; // 24px for 16px font-size

  // Opacity

  --opacity-0: 0.00001;
  --opacity-25: 0.25;
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-100: 1;

  ////////////////////////////////////////////////////////////////////////////////////
  // Z-indexes. //////////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////////////////////

  --z-negative: -1; // to hide something behind everything else
  --z-elevate: 1; // to elevate something, just a little, in relation to its sibling
  --z-sticky: 100; // header, mobile actions bar
  --z-drawer: 200; // sidebar sliding nav drawers
  --z-dropdown: 400; // all kinds of dropdowns
  --z-modal: 500; // modals
  --z-popover: 500; // tooltips, snackbars, etc.

  ////////////////////////////////////////////////////////////////////////////////////
  // Colors. /////////////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////////////////////

  --white: 255, 255, 255;
  --black: 0, 0, 0;

  --grey-50: 250, 250, 250;
  --grey-100: 246, 246, 246;
  --grey-200: 229, 229, 229;
  --grey-300: 212, 212, 212;
  --grey-400: 163, 163, 163;
  --grey-500: 115, 115, 115;
  --grey-600: 82, 82, 82;
  --grey-700: 64, 64, 64;
  --grey-800: 38, 38, 38;
  --grey-900: 23, 23, 23;

  --red-50: 254, 242, 242;
  --red-100: 254, 226, 226;
  --red-200: 254, 202, 202;
  --red-300: 252, 165, 165;
  --red-400: 248, 113, 113;
  --red-500: 239, 68, 68;
  --red-600: 220, 38, 38;
  --red-700: 185, 28, 28;
  --red-800: 153, 27, 27;
  --red-900: 127, 29, 29;

  --yellow-50: 255, 251, 235;
  --yellow-100: 254, 243, 199;
  --yellow-200: 253, 230, 138;
  --yellow-300: 252, 211, 77;
  --yellow-400: 251, 191, 36;
  --yellow-500: 245, 158, 11;
  --yellow-600: 217, 119, 6;
  --yellow-700: 180, 83, 9;
  --yellow-800: 146, 64, 14;
  --yellow-900: 120, 53, 15;

  --green-50: 236, 253, 245;
  --green-100: 209, 250, 229;
  --green-200: 167, 243, 208;
  --green-300: 110, 231, 183;
  --green-400: 52, 211, 153;
  --green-500: 16, 185, 129;
  --green-600: 5, 150, 105;
  --green-700: 4, 120, 87;
  --green-800: 6, 95, 70;
  --green-900: 6, 78, 59;

  --indigo-50: 238, 242, 255;
  --indigo-100: 224, 231, 255;
  --indigo-200: 199, 210, 254;
  --indigo-300: 165, 180, 252;
  --indigo-400: 129, 140, 248;
  --indigo-500: 99, 102, 241;
  --indigo-600: 79, 70, 229;
  --indigo-700: 67, 56, 202;
  --indigo-800: 55, 48, 163;
  --indigo-900: 49, 46, 129;

  --accent-brand-lighter-rgb: var(--indigo-500);
  --accent-brand-rgb: var(--indigo-600);
  --accent-brand-darker-rgb: var(--indigo-700);
}
