// chappe
//
// Copyright 2022, Crisp IM SAS
// Author: Valerian Saliou <valerian@valeriansaliou.name>

.appearance
  // Palette
  --color-white: #{$color-white}
  --color-black: #{$color-black}
  --color-grey: #{$color-grey}
  --color-grey-light: #{$color-grey-light}
  --color-grey-dark: #{$color-grey-dark}
  --color-blue-black: #{$color-blue-black}
  --color-blue-grey: #{$color-blue-grey}
  --color-blue-grey-light: #{$color-blue-grey-light}
  --color-blue-grey-dark: #{$color-blue-grey-dark}
  --color-green: #{$color-green}
  --color-red: #{$color-red}

  // Base
  --color-base: #{$color-base}
  --color-base-background: #{$color-base-background}

  // Selection
  --color-selection-default: #{$color-selection-default}

  // Buttons
  --color-button-default: var(--color-accent-base)
  --color-button-active: var(--color-accent-active)
  --color-button-shadow: #{rgba($color-black, .1)}

  // Badges
  --color-badge-black: #{$color-badge-black}
  --color-badge-white: #{$color-badge-white}
  --color-badge-blue: #{$color-badge-blue}
  --color-badge-green: #{$color-badge-green}
  --color-badge-yellow: #{$color-badge-yellow}
  --color-badge-red: #{$color-badge-red}
  --color-badge-special-background: #{rgba($color-badge-special-dark, .15)}
  --color-badge-special-border: #{rgba($color-white, .25)}
  --color-badge-special-text: #{$color-badge-special-light}

  // Methods
  --color-method-get-head-light: #{$color-method-get-head-light}
  --color-method-get-head-dark: #{$color-method-get-head-dark}
  --color-method-post-light: #{$color-method-post-light}
  --color-method-post-dark: #{$color-method-post-dark}
  --color-method-put-patch-light: #{$color-method-put-patch-light}
  --color-method-put-patch-dark: #{$color-method-put-patch-dark}
  --color-method-delete-light: #{$color-method-delete-light}
  --color-method-delete-dark: #{$color-method-delete-dark}

  // Status
  --color-status-default-text: #{$color-status-default}
  --color-status-healthy-text: #{$color-status-healthy}
  --color-status-sick-text: #{$color-status-sick}
  --color-status-dead-text: #{$color-status-dead}

  // Viewer
  --color-viewer-panes-footer-border: #{rgba($color-grey, .5)}

  // Markdown
  --color-markdown-title-small-text: var(--color-blue-black)
  --color-markdown-list-item-bullet: var(--color-blue-black)
  --color-markdown-code-inline-background: #{$color-markdown-code-inline-light}
  --color-markdown-code-inline-border: #{$color-markdown-code-inline}
  --color-markdown-code-inline-text: #{$color-markdown-code-inline-dark}
  --color-markdown-code-block-background: #{$color-markdown-code-block}
  --color-markdown-code-block-text: #{$color-white}
  --color-markdown-code-block-clipboard-background-default: #{lighten($color-markdown-code-block, 3%)}
  --color-markdown-code-block-clipboard-background-hover: #{lighten($color-markdown-code-block, 7%)}
  --color-markdown-code-block-clipboard-background-active: #{lighten($color-markdown-code-block, 5%)}
  --color-markdown-code-block-clipboard-border-default: #{rgba($color-blue-grey-light, .25)}
  --color-markdown-code-block-clipboard-border-hover: #{rgba($color-blue-grey-light, .5)}
  --color-markdown-code-block-clipboard-border-active: #{rgba($color-blue-grey-light, .35)}
  --color-markdown-code-block-clipboard-border-copied: #{lighten($color-green, 7%)}
  --color-markdown-code-block-clipboard-icon-background-default: #{$color-blue-grey-light}
  --color-markdown-code-block-clipboard-icon-background-copied: var(--color-markdown-code-block-clipboard-border-copied)
  --color-markdown-code-selection: #{rgba($color-selection-code, .25)}
  --color-markdown-figure-text: var(--color-blue-grey)
  --color-markdown-figure-border: #{rgba($color-grey, .9)}
  --color-markdown-table-head-background: var(--color-base)
  --color-markdown-table-head-text: var(--color-blue-black)
  --color-markdown-table-body-row-background-hover: #{rgba($color-blue-grey-light, .08)}
  --color-markdown-table-cell-border: #{rgba($color-blue-grey-light, .65)}
  --color-markdown-blockquote-background: var(--color-base)
  --color-markdown-blockquote-text: var(--color-blue-black)
  --color-markdown-blockquote-border: #{$color-markdown-blockquote}
  --color-markdown-embed-wrap-background: #{$color-black}
  --color-markdown-emphasis-warning-background: #{$color-markdown-emphasis-warning-light}
  --color-markdown-emphasis-warning-border: #{$color-markdown-emphasis-warning-dark}
  --color-markdown-emphasis-info-background: #{$color-markdown-emphasis-info-light}
  --color-markdown-emphasis-info-border: #{$color-markdown-emphasis-info-dark}
  --color-markdown-emphasis-notice-background: #{$color-markdown-emphasis-notice-light}
  --color-markdown-emphasis-notice-border: #{$color-markdown-emphasis-notice-dark}

  // Code
  --color-code-selection: #{rgba($color-selection-code, .3)}
  --color-code-border-hover: #{rgba($color-white, .25)}
  --color-code-header-default: #{$color-code-header-light}
  --color-code-header-hover: #{$color-code-header-dark}
  --color-code-language-text: #{rgba($color-white, .6)}
  --color-code-action-background: #{$color-white}
  --color-code-metas-background: #{$color-code-metas}
  --color-code-meta-name-border: #{rgba($color-white, .06)}
  --color-code-meta-name-text: #{rgba($color-white, .8)}
  --color-code-meta-type-text: #{rgba($color-white, .4)}
  --color-code-content-background: #{$color-code-content}
  --color-code-content-text: #{rgba($color-white, .4)}
  --color-code-select-text-default: #{rgba($color-white, .5)}
  --color-code-select-text-hover: #{rgba($color-white, .8)}
  --color-code-select-border-default: #{rgba($color-white, .075)}
  --color-code-select-border-hover: #{rgba($color-white, .15)}

  // Highlight
  --color-highlight-main: #{$color-highlight-main}
  --color-highlight-entity-light: #{$color-highlight-entity-light}
  --color-highlight-entity-dark: #{$color-highlight-entity-dark}
  --color-highlight-comment: #{$color-highlight-comment}
  --color-highlight-punctuation: #{$color-highlight-punctuation}
  --color-highlight-variable: #{$color-highlight-variable}
  --color-highlight-number: #{$color-highlight-number}
  --color-highlight-class: #{$color-highlight-class}
  --color-highlight-property: #{$color-highlight-property}
  --color-highlight-regex: #{$color-highlight-regex}
  --color-highlight-function: #{$color-highlight-function}
  --color-highlight-keyword: #{$color-highlight-keyword}
  --color-highlight-doctype: #{$color-highlight-doctype}

  // Search
  --color-search-lock-background: #{rgba($color-search-lock, .45)}
  --color-search-spotlight-shadow: #{rgba($color-black, .1)}
  --color-search-spotlight-shortcut-text: #{$color-search-spotlight-shortcut}
  --color-search-spotlight-field-background: #{rgba($color-base, .65)}
  --color-search-spotlight-field-placeholder: var(--color-blue-grey-dark)
  --color-search-spotlight-field-spinner-border: var(--color-blue-grey-dark)
  --color-search-spotlight-entry-link-background-default: var(--color-accent-base)
  --color-search-spotlight-entry-link-background-active: var(--color-accent-active)

  // Header
  --color-header-background: #{rgba($color-white, .85)}
  --color-header-border: #{rgba($color-grey, .65)}
  --color-header-shadow: #{rgba($color-black, .06)}
  --color-header-dropdown-border: #{rgba($color-grey, .65)}
  --color-header-dropdown-shadow: #{rgba($color-black, .05)}
  --color-header-dropdown-link-background-hover: var(--color-accent-base)
  --color-header-dropdown-link-background-active: var(--color-accent-active)
  --color-header-search-background-default: var(--color-base)
  --color-header-search-background-clear: var(--color-white)
  --color-header-search-border-default: var(--color-grey-dark)
  --color-header-search-border-hover: #{darken($color-grey-dark, 10%)}
  --color-header-search-border-active: #{darken($color-grey-dark, 14%)}
  --color-header-search-border-clear-default: #{$color-header-search-border-clear}
  --color-header-search-border-clear-hover: #{darken($color-header-search-border-clear, 6%)}
  --color-header-search-border-clear-active: #{darken($color-header-search-border-clear, 9%)}
  --color-header-search-shadow: #{rgba($color-grey-dark, .25)}
  --color-header-search-placeholder-text: var(--color-blue-grey-dark)
  --color-header-search-shortcut-text: #{$color-header-search-shortcut-text-dark}
  --color-header-search-shortcut-border: #{$color-header-search-border-clear}
  --color-header-search-shortcut-shadow: #{$color-header-search-shortcut-text-light}
  --color-header-coloring-background-default: #{lighten($color-grey-light, 1%)}
  --color-header-coloring-background-clear: #{rgba($color-white, .7)}
  --color-header-coloring-toggle-border-default: #{rgba(darken($color-grey-dark, 50%), .2)}
  --color-header-coloring-toggle-border-hover: #{rgba(darken($color-grey-dark, 50%), .225)}
  --color-header-coloring-toggle-border-active: #{rgba(darken($color-grey-dark, 50%), .175)}
  --color-header-coloring-toggle-shadow-default: #{rgba($color-black, .04)}
  --color-header-coloring-toggle-shadow-hover: #{rgba($color-black, .06)}
  --color-header-coloring-toggle-shadow-active: #{rgba($color-black, .02)}
  --color-header-coloring-toggle-icon-light-background: #{$color-header-coloring-toggle-icon-light}
  --color-header-coloring-toggle-icon-dark-background: #{$color-header-coloring-toggle-icon-dark}

  // Content
  --color-content-navigation-background: #{rgba($color-base, .25)}
  --color-content-navigation-border-default: var(--color-blue-grey-light)
  --color-content-navigation-border-active: #{darken($color-blue-grey-light, 5%)}
  --color-content-navigation-shadow-outset: #{rgba($color-blue-grey-light, .25)}
  --color-content-navigation-shadow-inset: #{rgba($color-white, .75)}
  --color-content-navigation-shadow-active: #{rgba($color-blue-grey-light, .4)}
  --color-content-navigation-label-text: var(--color-blue-grey)
  --color-content-bulletpoint-label-text: var(--color-blue-grey)
  --color-content-sidebar-left-background-default: #{rgba($color-base, .65)}
  --color-content-sidebar-left-background-small: #{rgba($color-base, .9)}
  --color-content-sidebar-left-background-tiny: var(--color-base)
  --color-content-sidebar-left-shadow-small: #{rgba($color-black, .04)}
  --color-content-sidebar-right-background: #{$color-content-sidebar-right}
  --color-content-sidebar-toggler-background: #{rgba($color-white, .85)}
  --color-content-sidebar-toggler-shadow-default: #{rgba($color-black, .1)}
  --color-content-sidebar-toggler-shadow-hover: #{rgba($color-black, .125)}
  --color-content-sidebar-toggler-shadow-active: #{rgba($color-black, .2)}
  --color-content-sidebar-toggler-icon-background: var(--color-blue-black)
  --color-content-sidebar-nest-navigate-link-background-hover: #{lighten($color-grey-light, 3%)}
  --color-content-sidebar-nest-navigate-link-background-active: #{lighten($color-grey-light, 1%)}
  --color-content-sidebar-nest-navigate-link-default-toggle-background-hover: #{darken($color-grey-light, 3%)}
  --color-content-sidebar-nest-navigate-link-default-toggle-background-active: #{darken($color-grey-light, 7%)}
  --color-content-sidebar-nest-navigate-link-active-toggle-background-hover: #{rgba($color-white, .15)}
  --color-content-sidebar-nest-navigate-link-active-toggle-background-active: #{rgba($color-white, .2)}
  --color-content-sidebar-nest-navigate-slice-text: var(--color-blue-black)
  --color-content-sidebar-nest-navigate-slice-icon-background-default: var(--color-blue-black)
  --color-content-sidebar-nest-navigate-slice-icon-background-active: var(--color-white)

  // Footer
  --color-footer-brand-separator: #{rgba($color-footer-text, .3)}
  --color-footer-link-target-text: #{$color-footer-link-target}
  --color-footer-copyright-text: #{$color-footer-copyright}
  --color-footer-engine-text: #{$color-footer-text}
  --color-footer-status-border-default: #{rgba($color-footer-text, .45)}
  --color-footer-status-border-hover: #{rgba($color-footer-text, .65)}
  --color-footer-status-time-text: #{$color-footer-status-time}

  // Guides
  --color-guides-details-border: #{rgba($color-grey, .65)}
  --color-guides-details-inner-text: var(--color-blue-black)

  // References
  --color-references-separator-content: #{rgba($color-grey, .65)}
  --color-references-separator-sidebar: #{rgba($color-grey, .15)}
  --color-references-details-updated-text: var(--color-blue-black)
  --color-references-group-origin-text: var(--color-blue-black)
  --color-references-request-target-url-background: var(--color-base)
  --color-references-request-target-url-border-default: #{darken($color-grey-light, 8%)}
  --color-references-request-target-url-border-hover: #{darken($color-grey, 16%)}
  --color-references-request-target-url-border-active: #{darken($color-grey, 24%)}
  --color-references-request-format-type-text: var(--color-blue-black)
  --color-references-request-format-required-text: #{$color-references-request-format-required}
  --color-references-request-format-optional-text: #{$color-references-request-format-optional}
  --color-references-request-format-label-text: #{$color-references-request-format-label}
  --color-references-request-format-keys-depth-border-zero: #{lighten($color-grey-light, 10%)}
  --color-references-request-format-keys-depth-border-one: #{lighten($color-grey-light, 5%)}
  --color-references-request-format-keys-depth-border-two: var(--color-grey-light)
  --color-references-request-format-keys-depth-border-three: #{darken($color-grey-light, 5%)}
  --color-references-request-format-keys-depth-border-four: #{darken($color-grey-light, 10%)}
  --color-references-request-format-keys-depth-border-infinity: #{darken($color-grey-light, 15%)}
  --color-references-request-format-toggle-count-text: #{lighten($color-black, 12.5%)}
  --color-references-request-format-toggle-count-background: #{lighten($color-grey-light, 2%)}
  --color-references-request-format-toggle-button-border: #{darken($color-grey-dark, 8%)}
  --color-references-request-format-toggle-button-shadow: #{rgba($color-grey-dark, .25)}
  --color-references-examples-selection: #{rgba($color-selection-code, .2)}
  --color-references-examples-detail-value-text: #{$color-references-examples-detail-value}
  --color-references-examples-detail-segment-text: #{$color-references-examples-detail-segment}
  --color-references-examples-detail-parameter-text: #{$color-references-examples-detail-parameter}

  // Changes
  --color-changes-notice-background: var(--color-base)
  --color-changes-navigate-link-background-hover: #{lighten($color-grey-light, 6%)}
  --color-changes-navigate-link-background-active: #{lighten($color-grey-light, 4%)}
  --color-changes-month-event-border: #{rgba($color-grey, .65)}
  --color-changes-month-event-group-text: var(--color-blue-grey-dark)
  --color-changes-month-event-deprecated-background: #{$color-changes-month-event-deprecated}

  &[data-appearance="dark"]
    // Overrides (Dark Mode)
    $color-white: #10131c
    $color-black: #ffffff
    $color-grey: #474b5e
    $color-grey-light: #4c4f62
    $color-grey-dark: #3e4255
    $color-blue-black: #cdd3db
    $color-blue-grey: #a3a5ae
    $color-blue-grey-light: $color-grey
    $color-blue-grey-dark: #71757d
    $color-green: #21fb52
    $color-red: #ff7e7e

    $color-base: #1e202b
    $color-base-background: #191c25

    $color-markdown-code-block: #2a2d39
    $color-markdown-blockquote: #516071
    $color-markdown-emphasis-warning-light: #ffb300
    $color-markdown-emphasis-warning-dark: #c87c00
    $color-markdown-emphasis-info-light: #ffef00
    $color-markdown-emphasis-info-dark: #c4b500
    $color-markdown-emphasis-notice-light: #87ff73
    $color-markdown-emphasis-notice-dark: #30bb17

    $color-code-header-light: #16171c
    $color-code-header-dark: #121317
    $color-code-metas: #1e1f24
    $color-code-content: #24252b

    $color-search-lock: #434959

    $color-header-coloring-background: #5161b7
    $color-header-coloring-toggle-border: $color-header-coloring-background

    $color-content-sidebar-right: #292a31

    $color-references-request-format-required: #ff6d5a
    $color-references-request-format-optional: #8f99a6
    $color-references-request-format-label: #8d98a4

    $color-changes-month-event-deprecated: #ff7b98

    // Palette (Dark Mode)
    --color-white: #{$color-white}
    --color-black: #{$color-black}
    --color-grey: #{$color-grey}
    --color-grey-light: #{$color-grey-light}
    --color-grey-dark: #{$color-grey-dark}
    --color-blue-black: #{$color-blue-black}
    --color-blue-grey: #{$color-blue-grey}
    --color-blue-grey-light: #{$color-blue-grey-light}
    --color-blue-grey-dark: #{$color-blue-grey-dark}
    --color-green: #{$color-green}
    --color-red: #{$color-red}

    // Base (Dark Mode)
    --color-base: #{$color-base}
    --color-base-background: #{$color-base-background}

    // Selection (Dark Mode)
    --color-selection-default: #{rgba($color-black, .25)}

    // Badges (Dark Mode)
    --color-badge-black: #{lighten($color-badge-black, 10%)}
    --color-badge-blue: #{lighten($color-badge-blue, 10%)}
    --color-badge-green: #{lighten($color-badge-green, 10%)}
    --color-badge-yellow: #{lighten($color-badge-yellow, 10%)}
    --color-badge-red: #{lighten($color-badge-red, 10%)}

    // Methods (Dark Mode)
    --color-method-get-head-light: #{rgba($color-method-get-head-light, .3)}
    --color-method-get-head-dark: #{lighten($color-method-get-head-dark, 6%)}
    --color-method-post-light: #{rgba($color-method-post-light, .3)}
    --color-method-post-dark: #{lighten($color-method-post-dark, 6%)}
    --color-method-put-patch-light: #{rgba($color-method-put-patch-light, .3)}
    --color-method-put-patch-dark: #{lighten($color-method-put-patch-dark, 6%)}
    --color-method-delete-light: #{rgba($color-method-delete-light, .3)}
    --color-method-delete-dark: #{lighten($color-method-delete-dark, 6%)}

    // Viewer (Dark Mode)
    --color-viewer-panes-footer-border: #{rgba($color-black, .1)}

    // Markdown (Dark Mode)
    --color-markdown-code-inline-background: #{rgba($color-black, .15)}
    --color-markdown-code-inline-border: #{rgba($color-black, .35)}
    --color-markdown-code-inline-text: #{$color-black}
    --color-markdown-figure-border: #{rgba($color-grey, .9)}
    --color-markdown-table-body-row-background-hover: #{rgba($color-blue-grey-light, .12)}
    --color-markdown-table-cell-border: var(--color-grey)
    --color-markdown-blockquote-border: #{$color-markdown-blockquote}
    --color-markdown-emphasis-warning-background: #{rgba($color-markdown-emphasis-warning-light, .25)}
    --color-markdown-emphasis-warning-border: #{$color-markdown-emphasis-warning-dark}
    --color-markdown-emphasis-info-background: #{rgba($color-markdown-emphasis-info-light, .25)}
    --color-markdown-emphasis-info-border: #{$color-markdown-emphasis-info-dark}
    --color-markdown-emphasis-notice-background: #{rgba($color-markdown-emphasis-notice-light, .25)}
    --color-markdown-emphasis-notice-border: #{$color-markdown-emphasis-notice-dark}

    // Code (Dark Mode)
    --color-code-header-default: #{$color-code-header-light}
    --color-code-header-hover: #{$color-code-header-dark}
    --color-code-metas-background: #{$color-code-metas}
    --color-code-content-background: #{$color-code-content}

    // Search (Dark Mode)
    --color-search-lock-background: #{rgba($color-search-lock, .4)}
    --color-search-spotlight-field-background: #{rgba($color-base, .65)}

    // Header (Dark Mode)
    --color-header-background: #{rgba($color-white, .9)}
    --color-header-border: #{rgba($color-black, .075)}
    --color-header-dropdown-border: #{rgba($color-grey, .65)}
    --color-header-search-background-clear: var(--color-header-search-background-default)
    --color-header-search-border-hover: #{lighten($color-grey-dark, 10%)}
    --color-header-search-border-active: #{lighten($color-grey-dark, 14%)}
    --color-header-search-border-clear-default: var(--color-header-search-border-default)
    --color-header-search-border-clear-hover: var(--color-header-search-border-hover)
    --color-header-search-border-clear-active: var(--color-header-search-border-active)
    --color-header-search-shadow: var(--color-white)
    --color-header-search-shortcut-text: var(--color-blue-grey-dark)
    --color-header-search-shortcut-border: var(--color-blue-grey-dark)
    --color-header-search-shortcut-shadow: var(--color-white)
    --color-header-coloring-background-default: #{darken($color-header-coloring-background, 16%)}
    --color-header-coloring-background-clear: var(--color-header-coloring-background-default)
    --color-header-coloring-toggle-border-default: #{rgba($color-header-coloring-toggle-border, .85)}
    --color-header-coloring-toggle-border-hover: #{$color-header-coloring-toggle-border}
    --color-header-coloring-toggle-border-active: #{rgba($color-header-coloring-toggle-border, .95)}

    // Content (Dark Mode)
    --color-content-navigation-background: var(--color-base)
    --color-content-navigation-border-default: var(--color-grey)
    --color-content-navigation-border-active: #{lighten($color-grey, 6%)}
    --color-content-navigation-shadow-outset: #{rgba($color-white, .25)}
    --color-content-navigation-shadow-inset: #{rgba($color-black, .05)}
    --color-content-navigation-shadow-active: #{rgba($color-white, .4)}
    --color-content-sidebar-left-background-default: var(--color-base)
    --color-content-sidebar-left-background-small: var(--color-base)
    --color-content-sidebar-right-background: #{$color-content-sidebar-right}
    --color-content-sidebar-toggler-background: #{rgba($color-base, .9)}
    --color-content-sidebar-nest-navigate-link-background-hover: #{darken($color-grey-light, 3%)}
    --color-content-sidebar-nest-navigate-link-background-active: #{darken($color-grey-light, 1%)}
    --color-content-sidebar-nest-navigate-link-default-toggle-background-hover: #{lighten($color-grey-light, 3%)}
    --color-content-sidebar-nest-navigate-link-default-toggle-background-active: #{lighten($color-grey-light, 7%)}

    // Guides (Dark Mode)
    --color-guides-details-border: #{rgba($color-grey, .45)}

    // References (Dark Mode)
    --color-references-separator-content: #{rgba($color-grey, .45)}
    --color-references-separator-sidebar: #{rgba($color-grey, .35)}
    --color-references-request-target-url-border-default: transparent
    --color-references-request-target-url-border-hover: #{rgba($color-black, .45)}
    --color-references-request-target-url-border-active: #{rgba($color-black, .6)}
    --color-references-request-format-required-text: #{$color-references-request-format-required}
    --color-references-request-format-optional-text: #{$color-references-request-format-optional}
    --color-references-request-format-label-text: #{$color-references-request-format-label}
    --color-references-request-format-keys-depth-border-zero: #{darken($color-grey-light, 10%)}
    --color-references-request-format-keys-depth-border-one: #{darken($color-grey-light, 5%)}
    --color-references-request-format-keys-depth-border-three: #{lighten($color-grey-light, 5%)}
    --color-references-request-format-keys-depth-border-four: #{lighten($color-grey-light, 10%)}
    --color-references-request-format-keys-depth-border-infinity: #{lighten($color-grey-light, 15%)}
    --color-references-request-format-toggle-count-text: #{darken($color-black, 12.5%)}
    --color-references-request-format-toggle-count-background: #{darken($color-grey-light, 2%)}
    --color-references-request-format-toggle-button-border: #{lighten($color-grey-dark, 8%)}
    --color-references-request-format-toggle-button-shadow: #{rgba($color-white, .25)}

    // Changes (Dark Mode)
    --color-changes-navigate-link-background-hover: #{darken($color-grey-light, 6%)}
    --color-changes-navigate-link-background-active: #{darken($color-grey-light, 4%)}
    --color-changes-month-event-border: #{rgba($color-grey, .65)}
    --color-changes-month-event-deprecated-background: #{rgba($color-changes-month-event-deprecated, .3)}

    // Images (Dark Mode)
    .logo
      .logo-image
        filter: grayscale(1) invert(1) brightness(10)

    .illustration
      filter: saturate(.15) invert(1)