:root {
  --border-transparent: var(--size-2) solid transparent;
  --border-light-border: var(--size-2) solid var(--color-neutral-40);
  --border-primary-border: var(--size-2) solid var(--color-neutral-70);
  --border-blockquote: var(--size-4) solid var(--color-neutral-70);
  --border-table-border: var(--size-2) solid var(--color-neutral-50);

  --border-radius-default: 0.5rem;

  --link-text-decoration-offset: var(--size-4);

  --color-link-color: #0342a4;
  --color-link-visited-color: #561c4a;

  --color-neutral-inverted-transparent-70: rgba(255 255 255 0.7);
  --color-neutral-inverted: #fff;

  --color-neutral-10: #f4f4f4;
  --color-neutral-20: #d5d5d5;
  --color-neutral-30: #bababa;
  --color-neutral-40: #a4a4a4;
  --color-neutral-50: #8a8a8a;
  --color-neutral-60: #6d6d6d;
  --color-neutral-70: #4e4e4e;
  --color-neutral-80: #343434;
  --color-neutral-90: #1b1b1b;

  --color-green-10: #d0f1de;
  --color-green-20: #78ebb1;
  --color-green-30: #00d58b;
  --color-green-40: #00bc7a;
  --color-green-50: #009e66;
  --color-green-60: #007d50;
  --color-green-70: #005a38;
  --color-green-80: #003d24;
  --color-green-90: #002011;

  --color-yellow-10: #fbec74;
  --color-yellow-20: #e6d75b;
  --color-yellow-30: #cbbd30;
  --color-yellow-40: #b4a700;
  --color-yellow-50: #978c00;
  --color-yellow-60: #786e00;
  --color-yellow-70: #575000;
  --color-yellow-80: #3a3500;
  --color-yellow-90: #1e1b00;

  --color-red-10: #fae4e5;
  --color-red-20: #f8c9ca;
  --color-red-30: #fba3a4;
  --color-red-40: #ff7d7e;
  --color-red-50: #ff4044;
  --color-red-60: #db000e;
  --color-red-70: #a30008;
  --color-red-80: #700003;
  --color-red-90: #3f0001;

  --color-critical-border: var(--color-red-60);
  --color-valid-border: var(--color-green-60);
  --color-warning-border: var(--color-yellow-50);

  --color-critical-outline: var(--color-red-40);
  --color-valid-outline: var(--color-green-40);
  --color-warning-outline: var(--color-yellow-40);

  /* Gradients */
  --color-gradient-standard: linear-gradient(
    to right,
    var(--color-neutral-30),
    var(--color-neutral-10)
  );

  --color-gradient-light-gray: linear-gradient(
    to bottom,
    var(--color-neutral-10),
    var(--color-neutral-20)
  );

  --figure-border: var(--size-4) solid var(--color-neutral-80);
  --figcaption-background-color: var(--color-neutral-20);
  --figcaption-overlap-background-color: var(
    --color-neutral-inverted-transparent-70
  );
  --figcaption-foreground-color: var(--color-neutral-80);
  --figcaption-overlap-foreground-color: var(--color-neutral-80);
  --figcaption-spacing: var(--size-8);

  /** Links */
  --link-color: var(--color-link-color);
  --link-color-visited: var(--color-link-visited-color);
  --link-focus-visible-box-shadow: 0 0 0 var(--size-2)
    var(--color-neutral-inverted);
  --link-focus-visible-outline: var(--size-2) solid var(--color-neutral-80);
  --link-focus-visible-outline-offset: var(--size-4);

  --icon-default-size: 1.5rem; /* 24px */

  --overlay-background-color: rgba(0 0 0 0.5);

  /* shadows */
  --shadow-button-active-state: 1px 1px 0 3px var(--color-neutral-30),
    -1px -1px 0 3px var(--color-neutral-30);
  --shadow-light-gray: 0 1px 2px 1px var(--color-neutral-20);

  /* Assuming a base of 16px */
  --size-112: 7rem; /* 112px */
  --size-96: 6rem; /* 96px */
  --size-80: 5rem; /* 80px */
  --size-64: 4rem; /* 64px */
  --size-48: 3rem; /* 48px */
  --size-32: 2rem; /* 32px */
  --size-24: 1.5rem; /* 24px */
  --size-16: 1rem; /* 16px */
  --size-12: 0.75rem; /* 12px */
  --size-8: 0.5rem; /* 8px */
  --size-6: 0.375rem; /* 6px */
  --size-4: 0.25rem; /* 4px */
  --size-2: 0.125rem; /* 2px */
  --size-1: 0.0625rem; /* 1px */

  --section-top-margin: var(--spacing-wide);

  /* Table styles */
  --table-border: var(--size-4) solid var(--color-neutral-80);
  --table-width: 100%;

  --table-caption-align: start;
  --table-caption-font-size: var(--typography-size-medium);
  --table-caption-margin-block-end: var(--size-12);

  --table-thead-bg-color: var(--color-neutral-80);
  --table-thead-color: var(--color-neutral-10);
  --table-thead-align: start;

  --table-cell-border: var(--size-1) solid var(--color-neutral-80);
  --table-cell-padding: var(--size-8);

  --table-tbody-bg-odd: var(--color-neutral-10);
  --table-tbody-bg-even: var(--color-neutral-inverted);

  --table-tfoot-bg-color: var(--color-neutral-20);
  --table-tfoot-color: var(--color-neutral-80);
  --table-tfoot-padding-block: var(--size-16);
  --table-tfoot-padding-inline: var(--size-8);

  /* typography - https://systemfontstack.com */
  --minimalist-typography-heading-family: iowan old style, apple garamond,
    baskerville, times new roman, droid serif, times, source serif pro, serif,
    apple color emoji, segoe ui emoji, segoe ui symbol;
  --minimalist-typography-body-family: -apple-system, blinkmacsystemfont,
    avenir next, avenir, segoe ui, helvetica neue, helvetica, cantarell, ubuntu,
    roboto, noto, arial, sans-serif;
  --minimalist-typography-code-family: menlo, consolas, monaco, liberation mono,
    lucida console, monospace;

  --minimalist-typography-scale-mobile: 1.25;

  --typography-size-default: 1rem; /* 16px */

  --typography-size-small-medium: calc(
    var(--typography-size-default) * var(--minimalist-typography-scale-mobile)
  ); /* 20px */
  --typography-size-medium: calc(
    var(--typography-size-small-medium) *
      var(--minimalist-typography-scale-mobile)
  ); /* 25px */
  --typography-size-large: calc(
    var(--typography-size-medium) * var(--minimalist-typography-scale-mobile)
  ); /* 31px */
  --typography-size-xl: calc(
    var(--typography-size-large) * var(--minimalist-typography-scale-mobile)
  ); /* 39px */
  --typography-size-xxl: calc(
    var(--typography-size-xl) * var(--minimalist-typography-scale-mobile)
  ); /* 49px */
  --typography-size-display: calc(
    var(--typography-size-xxl) * var(--minimalist-typography-scale-mobile)
  ); /* 61px */
  --typography-size-small: calc(
    var(--typography-size-default) / var(--minimalist-typography-scale-mobile)
  ); /* 12px */
  --typography-size-tiny: calc(
    var(--typography-size-small) / var(--minimalist-typography-scale-mobile)
  ); /* 9px */

  --minimalist-typography-document-line-height: 1.75;
  --minimalist-typography-code-example-line-height: 1.4;
  --minimalist-typography-heading-line-height: 1.2;

  /* reduced line height for interactive elements */
  --minimalist-typography-interactive-line-height: 1.1;

  /* z-index scale */
  --send-to-back: -1;
  --bring-to-front: 9999;
  --bottom-layer: 100;
  --middle-layer: 200;
  --top-layer: 300;
}

@media only screen and (width >= 63.9375rem) {
  :root {
    --minimalist-typography-scale-desktop: 1.33;

    --typography-size-small-medium: calc(
      var(--typography-size-default) *
        var(--minimalist-typography-scale-desktop)
    ); /* 21px */
    --typography-size-medium: calc(
      var(--typography-size-small-medium) *
        var(--minimalist-typography-scale-desktop)
    ); /* 28px */
    --typography-size-large: calc(
      var(--typography-size-medium) * var(--minimalist-typography-scale-desktop)
    ); /* 38px */
    --typography-size-xl: calc(
      var(--typography-size-large) * var(--minimalist-typography-scale-desktop)
    ); /* 50px */
    --typography-size-xxl: calc(
      var(--typography-size-xl) * var(--minimalist-typography-scale-desktop)
    ); /* 67px */
    --typography-size-display: calc(
      var(--typography-size-xxl) * var(--minimalist-typography-scale-desktop)
    ); /* 90px */
  }
}