:root, :host {
  /* _Notes:
   *  - The color space used is okhsl (see https://bottosson.github.io/posts/colorpicker/)
   *  - Medium elevation shadows are used (see https://www.joshwcomeau.com/shadow-palette/) */

  /* Colors */

  /** Surfaces **/
  --color-white: #ffffff; /* H0 C0 L1 */
  --color-black: #000000; /* H0 C0 L0 */
  --color-surface-palegray: #f9f9f9; /* H0 S0 L0.98 */
  --color-surface-lightgray: #f4f4f4; /* H0 S0 L0.96 */
  --color-surface-gray: #eeeeee; /* H0 S0 L0.94 */
  --color-surface-deepgray: #e2e2e2; /* H0 S0 L0.9 */
  --color-surface-lightpurple: #6642e7; /* H285 S0.9 L0.45 */
  --color-surface-purple: #5b33d6; /* H285 S0.9 L0.4 */
  --color-surface-deeppurple: #4f29bf; /* H285 S0.9 L0.35 */
  --color-surface-lightred: #c02046; /* H15 S0.9 L0.45 */
  --color-surface-red: #ab1a3d; /* H15 S0.9 L0.4 */

  /** Shadows **/
  --color-surface-white-shadow: #a1a1a15c; /* H0 S0 L0.63 36% */
  --color-surface-palegray-shadow: #9999995c; /* H0 S0 L0.60 36% */

  /** Text **/
  --color-text-gray: #ababab; /* H0 S0 L0.7 */
  --color-text-deepgray: #848484; /* H0 S0 L0.55 */
  --color-text-lightpurple: #7155f1; /* H285 S0.9 L0.5 */
  --color-text-purple: #5b33d6; /* H285 S0.9 L0.4 */
  --color-text-deeppurple: #38198e; /* H285 S0.9 L0.25 */
  --color-text-red: #aa144e; /* H6 S0.9 L0.4 */

  /* Theme */

  /** Areas **/
  --theme-color-body: var(--color-white);
  --theme-color-body-content: var(--color-black);

  --theme-color-group: var(--color-surface-palegray);
  --theme-color-group-content: var(--color-black);
  --theme-color-group-outline: var(--color-surface-lightgray);
  --theme-color-group-shadow: var(--color-surface-white-shadow);

  --theme-color-subgroup: var(--color-surface-lightgray);
  --theme-color-subgroup-content: var(--color-black);
  --theme-color-subgroup-outline: var(--color-surface-gray);
  --theme-color-subgroup-shadow: var(--color-surface-palegray-shadow);

  /** Elements **/

  /*** Active ***/
  --theme-color-active: var(--color-surface-purple);
  --theme-color-active-content: var(--color-white);
  --theme-color-active-outline: var(--color-surface-purple);

  --theme-color-active-highlight: var(--color-surface-lightpurple);
  --theme-color-active-highlight-content: var(--color-white);
  --theme-color-active-highlight-outline: var(--color-surface-lightpurple);

  --theme-color-active-hit: var(--color-surface-deeppurple);
  --theme-color-active-hit-content: var(--color-white);
  --theme-color-active-hit-outline: var(--color-surface-deeppurple);

  /*** Neutral ***/
  --theme-color-neutral: transparent;
  --theme-color-neutral-content: var(--color-black);
  --theme-color-neutral-content-hint: var(--color-text-gray);
  --theme-color-neutral-outline: var(--color-black);

  --theme-color-neutral-highlight: transparent;
  --theme-color-neutral-highlight-content: var(--color-black);
  --theme-color-neutral-highlight-outline: var(--color-surface-lightpurple);

  --theme-color-neutral-hit: transparent;
  --theme-color-neutral-hit-content: var(--color-black);
  --theme-color-neutral-hit-outline: var(--color-surface-deeppurple);

  --theme-color-neutral-disabled: transparent;
  --theme-color-neutral-disabled-content: var(--color-text-deepgray);
  --theme-color-neutral-disabled-outline: var(--color-surface-deepgray);

  --theme-color-neutral-error: transparent;
  --theme-color-neutral-error-content: var(--color-black);
  --theme-color-neutral-error-outline: var(--color-surface-red);

  --theme-color-neutral-error-highlight: transparent;
  --theme-color-neutral-error-highlight-content: var(--color-black);
  --theme-color-neutral-error-highlight-outline: var(--color-surface-lightred);

  /** Text **/
  --theme-color-text-active: var(--color-text-purple);
  --theme-color-text-highlight: var(--color-text-lightpurple);
  --theme-color-text-hit: var(--color-text-deeppurple);
  --theme-color-text-error: var(--color-text-red);
}