:root {
  --font-sans: 'general-sans', sans-serif;

  /* Font sizes */
  --font-size-xs: 1rem;
  --font-size-s: 1.5rem;

  /* Drupal administrative toolbar heights and width. */
  --toolbar-height: 2.4375rem;
  --toolbar-tray-height: 2.5rem;
  --toolbar-tray-vertical-width: 14.9375rem;

  /* Layout */
  --layout--max-width: 87.5rem;
  --scrollbar-width: 1rem;

  /* Layout helpers */
  --sp: 1rem; /*  16px. */
  --sp0-25: calc(0.25 * var(--sp));
  --sp0-5: calc(0.5 * var(--sp));
  --sp0-75: calc(0.75 * var(--sp));
  --sp1: calc(1 * var(--sp));
  --sp1-5: calc(1.5 * var(--sp));
  --sp2: calc(2 * var(--sp));
  --sp2-5: calc(2.5 * var(--sp));
  --sp3: calc(3 * var(--sp));
  --sp4: calc(4 * var(--sp));
  --sp5: calc(5 * var(--sp));

  /*  FLDC 25 */
  --color-black: black;
  --color-white: white;
  --teal: #93e7ff;
  --pink-lightest: #ffebf5;
  --pink-light: #ffa7d5;
  --pink-dark: #e70077;

  /**
   * Primary colors.
   *
   * Color number roughly corresponds to its luminosity.
   */
  --color--primary-hue: 202;
  --color--primary-saturation: 79%;
  --color--primary-lightness: 50;
  --color--primary-30: hsl(
    var(--color--primary-hue),
    var(--color--primary-saturation),
    calc(
      1% *
        (
          var(--color--primary-lightness) -
            (0.36 * var(--color--primary-lightness))
        )
    )
  ); /* Primary very dark */

  --color--primary-40: hsl(
    var(--color--primary-hue),
    var(--color--primary-saturation),
    calc(
      1% *
        (
          var(--color--primary-lightness) -
            (0.24 * var(--color--primary-lightness))
        )
    )
  ); /* Primary dark */

  --color--primary-50: hsl(
    var(--color--primary-hue),
    var(--color--primary-saturation),
    calc(1% * var(--color--primary-lightness))
  ); /* Primary as specified */

  --color--primary-60: hsl(
    var(--color--primary-hue),
    var(--color--primary-saturation),
    calc(
      1% *
        (
          var(--color--primary-lightness) +
            (0.24 * (100 - var(--color--primary-lightness)))
        )
    )
  ); /* Primary bright */

  --color--primary-80: hsl(
    var(--color--primary-hue),
    var(--color--primary-saturation),
    calc(
      1% *
        (
          var(--color--primary-lightness) +
            (0.85 * (100 - var(--color--primary-lightness)))
        )
    )
  ); /* Primary very bright */

  /**
   * Secondary colors.
   *
   * Color number roughly corresponds to its luminosity.
   */
  --color--secondary-hue: 202;
  --color--secondary-saturation: 79%;
  --color--secondary-lightness: 50;
  --color--secondary-30: hsl(
    var(--color--secondary-hue),
    var(--color--secondary-saturation),
    calc(
      1% *
        (
          var(--color--secondary-lightness) -
            (0.36 * var(--color--secondary-lightness))
        )
    )
  ); /* Secondary very dark */

  --color--secondary-40: hsl(
    var(--color--secondary-hue),
    var(--color--secondary-saturation),
    calc(
      1% *
        (
          var(--color--secondary-lightness) -
            (0.24 * var(--color--secondary-lightness))
        )
    )
  ); /* Secondary dark */

  --color--secondary-50: hsl(
    var(--color--secondary-hue),
    var(--color--secondary-saturation),
    calc(1% * var(--color--secondary-lightness))
  ); /* Secondary as specified */

  --color--secondary-60: hsl(
    var(--color--secondary-hue),
    var(--color--secondary-saturation),
    calc(
      1% *
        (
          var(--color--secondary-lightness) +
            (0.24 * (100 - var(--color--secondary-lightness)))
        )
    )
  ); /* Secondary bright */

  --color--secondary-80: hsl(
    var(--color--secondary-hue),
    var(--color--secondary-saturation),
    calc(
      1% *
        (
          var(--color--secondary-lightness) +
            (0.85 * (100 - var(--color--secondary-lightness)))
        )
    )
  ); /* Secondary very bright */

  --neutral-white: var(--color-white);
  --text-on-neutral-white: var(--color-black);
  --text-on-neutral-primary: var(--color--primary-50);
  --neutral-dark: var(--color-black);
  --text-on-neutral-dark: var(--color-white);
  --text-on-neutral-dark-primary: var(--color--primary-60);
  --text-on-neutral-dark-secondary: var(--color--secondary-50);
  --primary: var(--color--primary-60);
  --text-on-primary: var(--color-black);
  --secondary: var(--color--secondary-50);
  --text-on-secondary: var(--color-black);

  /*  Night */
  --color--night-0: hsl(0, 0%, 0%, 1);
  --color--night-5: hsl(200, 75%, 5%, 1);
  --color--night-15: hsl(200, 29%, 13%, 1);
  --color--night-20: hsl(201, 20%, 21%, 1);
  --color--night-30: hsl(202, 12%, 29%, 1);
  --color--night-35: hsl(202, 9%, 36%, 1);
  --color--night-40: hsl(202, 6%, 43%, 1);
  --color--night-50: hsl(202, 5%, 52%, 1);
  --color--night-60: hsl(202, 5%, 60%, 1);
  --color--night-70: hsl(202, 6%, 72%, 1);
  --color--night-90: hsl(202, 6%, 90%, 1);

  /*  Sky */
  --color--sky-50: hsl(194, 66%, 50%, 1);
  --color--sky-80: hsl(194, 66%, 80%, 1);
  --color--sky-86: hsl(194, 54%, 86%, 1);
  --color--sky-90: hsl(193, 65%, 90%, 1);
  --color--sky-94: hsl(195, 67%, 94%, 1);
  --color--sky-97: hsl(195, 86%, 97%, 1);

  /*  Ocean */
  --color--ocean-10: hsl(200, 59%, 13%, 1);
  --color--ocean-15: hsl(201, 100%, 16%, 1);
  --color--ocean-30: hsl(201, 100%, 29%, 1);
  --color--ocean-35: hsl(201, 100%, 37%, 1); /*  4.59 against white. */
  --color--ocean-40: hsl(202, 100%, 42%, 1);
  --color--ocean-55: hsl(201, 100%, 55%, 1);

  /*  Sun */
  --color--sun-30: hsl(18, 95%, 30%, 1); /*  7.81 against white. */
  --color--sun-40: hsl(18, 95%, 41%, 1); /*  4.85 against white. */
  --color--sun-45: hsl(18, 95%, 46%, 1); /*  3.97 against white. */
  --color--sun-55: hsl(19, 95%, 55%, 1);
  --color--sun-70: hsl(18, 95%, 71%, 1);
  --color--sun-80: hsl(18, 95%, 83%, 1);
  --color--sun-90: hsl(18, 96%, 91%, 1);

  /*  Named colors */
  --color--white: #fff;
  --color--red: red;
  --color--gold: gold;
  --color--green: green;
  --color--blue: blue;

  /*  Layouts */
  --grid-gap: var(--sp1-5);

  /*  Forms */
  --form-element-border: var(--color--night-50);

  /*  Misc */
  --focus-ring-color: currentColor;
  --jui-dialog-box-shadow: rgb(0, 0, 0, 0.4) 0 1rem 1.5rem;

  ::backdrop {
    --color-backdrop: hsl(200, 29%, 13%, 1);
  }

  @container style(--grid-max: true) {
    --grid-gap: var(--sp2);
  }
}