/**
 * The "right way" to add a dark mode would be to:
 * 1. Define a standard dark version of a color, e.g. --color--gray-5 gets a
 *    --color--gray-5--dark dark version.
 * 2. Replace every _usage_ of a color with a light-dark() function, e.g.
 *    replace: var(--color--gray-5)
 *    with: light-dark(var(--color--gray-5), var(--color--gray-5--dark))
 * 3. Check every usage to see if the component actually looks good and, if not,
 *    replace the "standard dark version" with a color that works better, e.g.
 *    light-dark(var(--color--gray-5), var(--color--gray-70))
 *
 * Currently, we aren't using the right way, we are doing it the expeditious way.
 * In other words, every color _definition_ is replaced with light-dark() instead
 * of every color _usage_ being replaced.
 */

:root {
  /**
   * Gray colors.
   *
   * Color number roughly corresponds to its luminosity.
   */
  --color--gray-5--light: hsl(var(--color--gray-hue) var(--color--gray-saturation) 5%); /* Black */
  --color--gray-5--dark: white;
  --color--gray-5: light-dark(var(--color--gray-5--light), var(--color--gray-5--dark));
  --color--gray-10--light: hsl(var(--color--gray-hue) var(--color--gray-saturation) 11%);
  --color--gray-10--dark: var(--color--gray-100--light);
  --color--gray-10: light-dark(var(--color--gray-10--light), var(--color--gray-10--dark));
  --color--gray-20--light: hsl(var(--color--gray-hue) var(--color--gray-saturation) 20%); /* Black 2 */
  --color--gray-20--dark: var(--color--gray-95--light);
  --color--gray-20: light-dark(var(--color--gray-20--light), var(--color--gray-20--dark));
  --color--gray-45--light: hsl(var(--color--gray-hue) var(--color--gray-saturation) 44%); /* Gray Dark */
  --color--gray-45--dark: var(--color--gray-90--light);
  --color--gray-45: light-dark(var(--color--gray-45--light), var(--color--gray-45--dark));
  --color--gray-60--light: hsl(var(--color--gray-hue) var(--color--gray-saturation) 57%); /* Gray medium */
  --color--gray-60--dark: var(--color--gray-70--light);
  --color--gray-60: light-dark(var(--color--gray-60--light), var(--color--gray-60--dark));
  --color--gray-65--light: hsl(var(--color--gray-hue) var(--color--gray-saturation) 63%); /* Black 4 */
  --color--gray-65--dark: var(--color--gray-65--light);
  --color--gray-65: light-dark(var(--color--gray-65--light), var(--color--gray-65--dark));
  --color--gray-70--light: hsl(var(--color--gray-hue) var(--color--gray-saturation) 72%); /* Gray medium 2 */
  --color--gray-70--dark: var(--color--gray-60--light);
  --color--gray-70: light-dark(var(--color--gray-70--light), var(--color--gray-70--dark));
  --color--gray-90--light: hsl(var(--color--gray-hue) var(--color--gray-saturation) 88%); /* Gray light */
  --color--gray-90--dark: var(--color--gray-45--light);
  --color--gray-90: light-dark(var(--color--gray-90--light), var(--color--gray-90--dark));
  --color--gray-95--light: hsl(var(--color--gray-hue) var(--color--gray-saturation) 93%); /* Gray light 1 */
  --color--gray-95--dark: var(--color--gray-20--light);
  --color--gray-95: light-dark(var(--color--gray-95--light), var(--color--gray-95--dark));
  --color--gray-100--light: hsl(var(--color--gray-hue) var(--color--gray-saturation) 97%); /* Gray light 2 */
  --color--gray-100--dark: var(--color--gray-10--light);
  --color--gray-100: light-dark(var(--color--gray-100--light), var(--color--gray-100--dark));

  /**
   * Primary colors.
   *
   * Color number roughly corresponds to its luminosity.
   */
  --color--primary-30--light: hsl(var(--color--primary-hue) var(--color--primary-saturation) calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
  --color--primary-30--dark: var(--color--primary-80--light);
  --color--primary-30: light-dark(var(--color--primary-30--light), var(--color--primary-30--dark));
  --color--primary-40--light: hsl(var(--color--primary-hue) var(--color--primary-saturation) calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */
  --color--primary-40--dark: var(--color--primary-60--light);
  --color--primary-40: light-dark(var(--color--primary-40--light), var(--color--primary-40--dark));
  --color--primary-50: hsl(var(--color--primary-hue) var(--color--primary-saturation) calc(1% * var(--color--primary-lightness))); /* Blue medium */
  --color--primary-60--light: 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-60--dark: var(--color--primary-40--light);
  --color--primary-60: light-dark(var(--color--primary-60--light), var(--color--primary-60--dark));
  --color--primary-80--light: hsl(var(--color--primary-hue) var(--color--primary-saturation) calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */
  --color--primary-80--dark: var(--color--primary-30--light);
  --color--primary-80: light-dark(var(--color--primary-80--light), var(--color--primary-80--dark));

  /**
   * Named Colors.
   */
  --color--black-a08: color(from var(--color--black) sRGB r g b / 0.08);
  --color--black: light-dark(#000, #fff); /* Black */
  --color--white: light-dark(#fff, #000); /* White */
}