/* stylelint-disable scale-unlimited/declaration-strict-value */

:--theme-light {
  /* Page */
  --page-background: var(--grey-1);
  --page-text-color: var(--grey-7);
  --page-link-color: var(--red-4);
  --page-content-background: var(--white);
  --focus-outline: 3px solid var(--blue-1);

  /* Cards */
  --card-background: var(--white);
  --card-border: 1px solid var(--grey-3);
  --card-shadow: 0 2px 6px rgba(0 0 0 5%);

  /* Header */
  --header-primary-background: var(--kitsu-purple-5);
  --header-secondary-background: var(--kitsu-purple-6);
  --header-text-color: var(--grey-2);
  --header-skeleton-background: #00000033;
  --header-search-background: #00000033;
  --header-search-text-color: var(--kitsu-purple-2);
  --header-notifications-background: var(--red-4);
  --header-notifications-text-color: var(--white);

  /* Modals */
  --modal-scrim-background: #000000aa;
  --modal-page-background: var(--kitsu-purple-6);
  --modal-background: var(--grey-2);
  --modal-close-button-color: var(--white);
  --modal-shadow: 0 3px 5px 2px rgba(0 0 0 40%);

  /* Rules */
  --rule-text: var(--kitsu-purple-3);
  --rule-background: var(--kitsu-purple-2);

  /* Dropdowns */
  --dropdown-background: var(--white);
  --dropdown-shadow: 0 2px 16px 2px #00000022;
  --dropdown-text-color: var(--black);
  --dropdown-divider-color: var(--grey-2);
  --dropdown-item-hover-background: var(--grey-1);

  /* Inputs */
  --input-background: var(--white);
  --input-text-color: var(--grey-7);
  --input-border: 1px solid var(--grey-3);
  --input-sidecar-background: var(--grey-2);
  --input-invalid-border: 1px solid var(--red-4);

  /* Buttons */
  --button-disabled-solid-bg: var(--grey-3);
  --button-disabled-outline-color: var(--grey-3);
  --button-disabled-borderless-fg: var(--grey-3);

  /* Tags */
  --tag-fg: var(--white);
  --tag-red-bg: var(--red-3);
  --tag-red-hover-bg: var(--red-4);
  --tag-red-action-bg: var(--red-5);
  --tag-pink-bg: var(--pink-3);
  --tag-pink-hover-bg: var(--pink-4);
  --tag-pink-action-bg: var(--pink-5);
  --tag-yellow-bg: var(--yellow-3);
  --tag-yellow-hover-bg: var(--yellow-4);
  --tag-yellow-action-bg: var(--yellow-5);
  --tag-green-bg: var(--green-3);
  --tag-green-hover-bg: var(--green-4);
  --tag-green-action-bg: var(--green-5);
  --tag-blue-bg: var(--blue-3);
  --tag-blue-hover-bg: var(--blue-4);
  --tag-blue-action-bg: var(--blue-5);
  --tag-purple-bg: var(--purple-3);
  --tag-purple-hover-bg: var(--purple-4);
  --tag-purple-action-bg: var(--purple-5);
  --tag-kitsu-purple-bg: var(--kitsu-purple-4);
  --tag-kitsu-purple-hover-bg: var(--kitsu-purple-5);
  --tag-kitsu-purple-action-bg: var(--kitsu-purple-6);
  --tag-grey-bg: var(--grey-4);
  --tag-grey-hover-bg: var(--grey-5);
  --tag-grey-action-bg: var(--grey-6);

  /* Tabs */
  --tab-text-color: var(--grey-2);
  --tab-inactive-opacity: 0.8;
  --tab-active-gradient: linear-gradient(to right, #ed485f 0%, #f27c36 100%);

  /* Alerts */
  --alert-success-background: var(--green-1);
  --alert-success-border: 1px solid var(--green-3);
  --alert-success-text-color: var(--green-6);
  --alert-info-background: var(--grey-2);
  --alert-info-border: 1px solid var(--grey-3);
  --alert-info-text-color: var(--grey-6);
  --alert-warning-background: var(--yellow-1);
  --alert-warning-border: 1px solid var(--yellow-3);
  --alert-warning-text-color: var(--yellow-6);
  --alert-error-background: var(--red-1);
  --alert-error-border: 1px solid var(--red-3);
  --alert-error-text-color: var(--red-6);

  /* Toasts */
  --toast-background: var(--grey-2);
  --toast-border: 1px solid var(--grey-3);
  --toast-shadow: 0 2px 6px rgb(0 0 0 / 25%);
  --toast-close-color: var(--kitsu-purple-3);

  /* Group Box */
  --group-box-border: 1px solid var(--grey-3);
  --group-box-title-color: var(--kitsu-purple-3);
  --group-box-details-button-text-color: var(--grey-5);

  /* Banner Images */
  --banner-image-fade: rgb(0 0 0 / 50%);

  /* Section Headers */
  --section-header-text-color: var(--kitsu-purple-3);
  --section-header-link-color: var(--kitsu-purple-2);

  /* Reaction Cards */
  --reaction-byline-color: var(--grey-4);

  /***** Non-Color Stuff *****/
  --radius-small: 3px;
  --radius-medium: 5px;
  --radius-large: 8px;
}
