/*
  Global CSS custom properties overrides.
*/

/* stylelint-disable */

:root {
  /* Typography helpers from Olivero.
  --font-size-base: 1rem;
  --font-size-l: 1.125rem;
  --font-size-s: 0.875rem;
  --font-size-xs: 0.8125rem;
  --font-size-xxs: 0.75rem;
  --line-height-base: 1.6875rem;
  --line-height-s: 1.125rem;
  */
  --font-size-base2: calc(var(--font-size-base) * 2);
  --font-size-xl: calc(var(--font-size-base) * 1.25);
  --content-left: 2.5rem;

  --color--quiptracks-hue: 26deg;
  --color--quiptracks-saturation: 100%;
  --color--quiptracks-lightness: 56%;
  --color--quiptracks-10: 
    hsl(var(--color--quiptracks-hue), 
        var(--color--quiptracks-saturation), 
        calc(1% * (var(--color--quiptracks-lightness) - 
                    (0.6 * var(--color--quiptracks-lightness))
                  )
            )
       );
  --color--quiptracks-20: hsl(var(--color--quiptracks-hue), var(--color--quiptracks-saturation), calc( 1.6 * var(--color--quiptracks-lightness)));
  --color--quiptracks-30: hsl(var(--color--quiptracks-hue), var(--color--quiptracks-saturation), calc( 1.4 * var(--color--quiptracks-lightness)));
  --color--quiptracks-40: hsl(var(--color--quiptracks-hue), var(--color--quiptracks-saturation), calc( 1.2 * var(--color--quiptracks-lightness)));
  --color--quiptracks-50: hsl(var(--color--quiptracks-hue), var(--color--quiptracks-saturation), var(--color--quiptracks-lightness));
  --color--quiptracks-60: hsl(var(--color--quiptracks-hue), var(--color--quiptracks-saturation), calc( 0.8 * var(--color--quiptracks-lightness)));
  --color--quiptracks-70: hsl(var(--color--quiptracks-hue), var(--color--quiptracks-saturation), calc( 0.6 * var(--color--quiptracks-lightness)));
  --color--quiptracks-80: hsl(var(--color--quiptracks-hue), var(--color--quiptracks-saturation), calc( 0.4 * var(--color--quiptracks-lightness)));
  --color--quiptracks-90: hsl(var(--color--quiptracks-hue), var(--color--quiptracks-saturation), calc( 0.2 * var(--color--quiptracks-lightness)));
  --color--quiptracks: var(--color--quiptracks-50);

  --color--content-link: #964113;

  /**
   * Primary colors.
   *
   * Color number roughly corresponds to its luminosity.
   */
  --color--primary-hue: 202;
  --color--primary-saturation: 79%;
  --color--primary-lightness: 50;
  --color--primary-10: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.6 * var(--color--primary-lightness)))));
  --color--primary-20: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.46 * var(--color--primary-lightness)))));
  --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
  --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* dark */
  --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* medium */
  --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)))))); /* Blue bright */
  --color--primary-70: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.44 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
  --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.65 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */
  --color--primary-90: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.8 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */
}
/**
 * Gray colors.
 * These are defined in the Olivero theme. Copied here for reference.
 *
 * Color number roughly corresponds to its luminosity.
 *
 *  --color--gray-10
 *  --color--gray-20 Black 2
 *  --color--gray-45 Gray Dark
 *  --color--gray-60 Gray medium
 *  --color--gray-65 Black 4
 *  --color--gray-70 Gray medium 2
 *  --color--gray-90 Gray light
 *  --color--gray-95 Gray light 1
 *  --color--gray-100 Gray light 2 
 */