:root {
  /**
   * Root
   */

  --root-size: 16px;

  /**
   * Body
   */

  --body-font-family: var(--font-family);
  --body-font-weight: var(--font-weight);
  --body-color: var(--color);
  --body-line-height: var(--line-height);
  --body-letter-spacing: var(--letter-spacing);
  --body-background: var(--background);

  /**
   * Icon
   */

  --icon-xxl-size: 6rem;
  --icon-xl-size: 5rem;
  --icon-l-size: 4rem;
  --icon-m-size: 3rem;
  --icon-s-size: 2rem;
  --icon-xs-size: 1.5rem;
  --icon-xxs-size: 1rem;
  --icon-size: var(--icon-m-size);

  /**
   * Print
   */

  --print-page-size: A4;
  --print-page-margin: 1.5cm 2cm;

  /**
   * Focus Outline
   */

  --focus-outline: 0.125rem solid var(--info);
  --focus-outline-offset: 0.125rem;

  /**
   * Container
   */

  --container-gutter: 1rem;
  --container-xxl: 80rem;
  --container-xl: 80rem;
  --container-l: 80rem;
  --container-m: 70rem;
  --container-s: 100%;
  --container-xs: 100%;
  --container-xxs: 100%;

  /**
   * Group
   */

  --group-xxl-space: 0.875rem;
  --group-xl-space: 0.75rem;
  --group-l-space: 0.625rem;
  --group-m-space: 0.5rem;
  --group-s-space: 0.375rem;
  --group-xs-space: 0.25rem;
  --group-xxs-space: 0.125rem;

  /**
   * Color
   */

  --color: var(--dark);

  /**
   * Background
   */

  --background: var(--white);

  /**
   * Border
   */

  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--light);
  --border: var(--border-width) var(--border-style) var(--border-color);

  /**
   * Border Radius
   */

  --border-radius: 0.25em;

  /**
   * Box Shadow
   */

  --box-shadow: none;
  --box-shadow-color: color-mod(var(--dark) alpha(10%));
  --hover-box-shadow: none;
  --focus-box-shadow: none;
  --active-box-shadow: none;

  /**
   * Box Shadow Sizes
   */

  --box-shadow-xxl: 0 1px 10px 1px var(--box-shadow-color);
  --box-shadow-xl: 0 1px 8px 1px var(--box-shadow-color);
  --box-shadow-l: 0 1px 6px 1px var(--box-shadow-color);
  --box-shadow-m: 0 1px 4px 1px var(--box-shadow-color);
  --box-shadow-s: 0 1px 2px 1px var(--box-shadow-color);
  --box-shadow-xs: 0 1px 1px 1px var(--box-shadow-color);
  --box-shadow-xxs: 0 0px 1px var(--box-shadow-color);

  /**
   * Z-Index
   */

  --z-index-high: 999;
  --z-index-medium: 99;
  --z-index-low: 9;

  /**
   * Speed
   */

  --speed-fast: 200ms;
  --speed-medium: 300ms;
  --speed-slow: 500ms;
  --speed: var(--speed-fast);

  /**
   * Height
   */

  --height-xxl: 3.25rem;
  --height-xl: 3rem;
  --height-l: 2.75rem;
  --height-m: 2.5rem;
  --height-s: 2.25rem;
  --height-xs: 2rem;
  --height-xxs: 1.75rem;

  /**
   * Space
   */

  --space-xxl: 4rem;
  --space-xl: 3rem;
  --space-l: 2rem;
  --space-m: 1.5rem;
  --space-s: 1rem;
  --space-xs: 0.75rem;
  --space-xxs: 0.5rem;

  /**
   * Max Width
   */

  --max-width-xxl: 70rem;
  --max-width-xl: 60rem;
  --max-width-l: 50rem;
  --max-width-m: 40rem;
  --max-width-s: 30rem;
  --max-width-xs: 20rem;
  --max-width-xxs: 10rem;

  /**
   * Font
   */

  --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-serif: Georgia, 'Times New Roman', Times, serif;
  --font-family-monospace: Monaco, Menlo, Consolas, 'Courier New', monospace;
  --font-family: var(--font-family-system);

  /**
   * Font Weights
   */

  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;
  --font-weight: normal;

  /**
   * Font Sizes
   */

  --font-size-xxl: 1.5rem;
  --font-size-xl: 1.25rem;
  --font-size-l: 1.125rem;
  --font-size-m: 1rem;
  --font-size-s: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-size-xxs: 0.625rem;
  --font-size: var(--font-size-m);

  /**
   * Line height
   */

  --line-height-xxl: 2;
  --line-height-xl: 1.75;
  --line-height-l: 1.625;
  --line-height-m: 1.5;
  --line-height-s: 1.375;
  --line-height-xs: 1.25;
  --line-height-xxs: 1;
  --line-height: var(--line-height-s);

  /**
   * Letter Spacing
   */

  --letter-spacing-xxl: 0.1em;
  --letter-spacing-xl: 0.0825em;
  --letter-spacing-l: 0.075em;
  --letter-spacing-m: 0.05em;
  --letter-spacing-s: 0.0375em;
  --letter-spacing-xs: 0.025em;
  --letter-spacing-xxs: 0.0125em;
  --letter-spacing: 0;
}
