:root {
  /* Colors */
  --body-bg: var(--gray-lightest);
  --body-text: #111;
  --component-bg: #fff;
  --preview-placeholder-color: var(--gray-lighter);
  --component-border-color: color(var(--gray) lightness(+ 30%));
  --component-box-shadow-base: var(--gray-base);
  --component-box-shadow: 0 0 2px 0
      color(var(--component-box-shadow-base) a(12%)),
    0 2px 5px 0 color(var(--component-box-shadow-base) a(15%)),
    0 1px 1px 1px color(var(--component-box-shadow-base) a(10%));
  --component-box-shadow--hover: 0 1px 2px 0
      color(var(--component-box-shadow-base) a(15%)),
    0 2px 5px 0 color(var(--component-box-shadow-base) a(17%)),
    0 1px 1px 1px color(var(--component-box-shadow-base) a(15%));
  --component-box-shadow--focus: 0 0 2px 0
      color(var(--input-border-color-focus) a(42%)),
    0 0 5px 0 color(var(--input-border-color-focus) a(65%)),
    0 0 1px 1px color(var(--input-border-color-focus) a(80%));
  --component-box-shadow--error: 0 0 2px 0
      color(var(--state-danger-color) a(42%)),
    0 2px 5px 0 color(var(--state-danger-color) a(45%)),
    0 0 1px 1px color(var(--state-danger-color) a(80%));
  --backdrop-background-color: color(var(--gray-base) a(40%));
  --main-navigation-background-color: color(
    var(--brand-primary) shade(70%) saturation(20%)
  );
  --header-height: 3rem;

  /* Border radius */
  --border-radius-base: 3px;
  --border-radius-large: 5px;
  --border-radius-small: 2px;

  /* Padding */
  --extra-small-padding: 0.25rem;
  --small-padding: 0.5rem;
  --medium-padding: 1rem;
  --large-padding: 1.5rem;
  --extra-large-padding: 3rem;
  --extra-small-padding--em: 0.25em;
  --small-padding--em: 0.5em;
  --medium-padding--em: 1em;
  --large-padding--em: 1.5em;
  --extra-large-padding--em: 3em;
  --text-selection-color: color(var(--brand-primary) alpha(20%));
}