/* Wide gamut colors */
/* Usage: color(display-p3(sRGB 0-1.0)) */
/* https://easyrgb.com/en/convert.php#inputFORM */

:root {
  --rgb-black: 0 0 0;
  --rgb-white: 1 1 1;
  --rgb-blue: 0 0.39216 0.90196;
  --rgb-red: 0.685 0.182 0.107;
  --rbg-always-black: 0 0 0;
  --rbg-warm-grey: 0.948 0.953 0.936;

  --color-bg: color(display-p3 var(--rgb-white));
  --color-negative: color(display-p3 var(--rgb-red));
  --color-link: color(display-p3 var(--rgb-blue));

  --color-text: color(display-p3 var(--rgb-black));
  --color-text--reversed: color(display-p3 var(--rgb-white));

  --color-border: color(display-p3 var(--rbg-warm-grey));
  --color-border--heavy: color-mix(in oklch, color(display-p3 var(--rgb-black)), color(display-p3 var(--rgb-white)) 75%);

  --color-message-background: color(display-p3 var(--rbg-warm-grey));

  @media (prefers-color-scheme: dark) {
    --rgb-black: 1 1 1;
    --rgb-white: 0 0 0;
    --rgb-blue: 0.36863 0.66275 1;
    --rgb-red: 0.971 0.492 0.415;

    --color-border: color-mix(in oklch, color(display-p3 var(--rgb-white)), color(display-p3 var(--rgb-black)) 25%);
    --color-border--heavy: color-mix(in oklch, color(display-p3 var(--rgb-white)), color(display-p3 var(--rgb-black)) 45%);

    --color-message-background: var(--color-border);
  }
}

/* Colorize */
/* https://isotropic.co/tool/hex-color-to-css-filter/ */

.colorize--white {
  filter: invert(100%);

  @media (prefers-color-scheme: dark) {
    filter: invert(0%);
  }
}

.colorize--black {
  filter: invert(0%);

  @media (prefers-color-scheme: dark) {
    filter: invert(100%);
  }
}