:root, :host {
  /* Color palette (light mode) */

  /** Primary colors **/
  --color-magic-purple: #622ade; /* H287 S0.93 L0.41 */
  --color-deep-blue: #060338; /* H272 S0.97 L0.07 */
  --color-black: #000000; /* H0 S0 L0 */
  --color-white: #ffffff; /* H0 S0 L1 */

  /** Accent colors **/
  --color-bright-teal: #00b9af; /* H188 S1 L0.66 */
  --color-bright-blue: #5591c9; /* H248 S0.59 L0.58 */
  --color-bright-pink: #ff6b97; /* H4 S1 L0.68 */
  --color-bright-purple: #b195ef; /* H297 S0.74 L0.69 */

  /** Supporting colors **/
  --color-solid-purple: #7562af; /* H293 S0.52 L0.48 */
  --color-solid-gray: #7f7f7f; /* H0 S0 L0.53 */
  --color-light-gray: #f1f1f1; /* H0 S0 L0.95 */

  /** Derived colors **/

  /*** Surfaces ***/
  --color-lightness-surface-highlight: 0.04;
  --color-lightness-surface-hit: -0.04;

  --color-magic-purple-surface-highlight:
    oklch(
      from var(--color-magic-purple) calc(l + var(--color-lightness-surface-highlight)) c h
    );
  --color-magic-purple-surface-hit:
    oklch(
      from var(--color-magic-purple) calc(l + var(--color-lightness-surface-hit)) c h
    );

  --color-bright-pink-surface-highlight:
    oklch(
      from var(--color-bright-pink) calc(l + var(--color-lightness-surface-highlight)) c h
    );
  --color-bright-pink-surface-hit:
    oklch(
      from var(--color-bright-pink) calc(l + var(--color-lightness-surface-hit)) c h
    );

  /*** Content ***/
  --color-lightness-content-highlight: 0.1;
  --color-lightness-content-hit: -0.1;

  --color-magic-purple-content-highlight:
    oklch(
      from var(--color-magic-purple) calc(l + var(--color-lightness-content-highlight)) c h
    );
  --color-magic-purple-content-hit:
    oklch(
      from var(--color-magic-purple) calc(l + var(--color-lightness-content-hit)) c h
    );

  /* Color theme (light mode) */

  /** Areas **/
  --theme-color-body: var(--color-white);
  --theme-color-body-content: var(--color-black);
  --theme-color-body-content-active: var(--color-magic-purple);
  --theme-color-body-content-active-highlight: var(--color-magic-purple-content-highlight);
  --theme-color-body-content-active-hit: var(--color-magic-purple-content-hit);
  --theme-color-body-content-disabled: var(--color-solid-gray);
  --theme-color-body-outline: transparent;

  --theme-color-section: var(--color-deep-blue);
  --theme-color-section-content: var(--color-white);
  --theme-color-section-outline: transparent;

  --theme-color-popover: var(--color-light-gray);
  --theme-color-popover-content: var(--color-black);
  --theme-color-popover-outline: var(--color-light-gray);

  /** Elements **/

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

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

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

  /*** Danger ***/
  --theme-color-danger: var(--color-bright-pink);
  --theme-color-danger-content: var(--color-white);
  --theme-color-danger-outline: var(--color-bright-pink);

  --theme-color-danger-highlight: var(--color-bright-pink-surface-highlight);
  --theme-color-danger-highlight-content: var(--color-white);
  --theme-color-danger-highlight-outline: var(--color-bright-pink-surface-highlight);

  --theme-color-danger-hit: var(--color-bright-pink-surface-hit);
  --theme-color-danger-hit-content: var(--color-white);
  --theme-color-danger-hit-outline: var(--color-bright-pink-surface-hit);

  /*** Neutral ***/
  --theme-color-neutral: transparent;
  --theme-color-neutral-content: var(--color-black);
  --theme-color-neutral-content-hint: var(--color-solid-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-magic-purple-surface-highlight);

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

  --theme-color-neutral-disabled: var(--color-light-gray);
  --theme-color-neutral-disabled-content: var(--color-solid-gray);
  --theme-color-neutral-disabled-outline: var(--color-solid-gray);

  --theme-color-neutral-error: transparent;
  --theme-color-neutral-error-content: var(--color-black);
  --theme-color-neutral-error-outline: var(--color-bright-pink);

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