:root {
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-gray: 96% 0.004 131;
  --lch-gray-dark: 92% 0.004 131;
  --lch-gray-darker: 75% 0.004 131;
  --lch-gray-darkest: 65% 0.004 131;
  --lch-almost-black: 35% 0.006 131;
  --lch-accent: 55% 0.12 131;
  --lch-accent-light: 95% 0.025 131;
  --lch-accent-dark: 78% 0.07 131;
  --lch-orange: 70% 0.2 44;
  --lch-red: 51% 0.2 31;
  --lch-red-light: 98% 0.08 22;
  --lch-primary: 55% 0.125 131;
  --lch-purple: 45% 0.32 282;
  --lch-always-black: 0% 0 0;
  --lch-always-white: 100% 0 0;

  --color-negative: oklch(var(--lch-red));
  --color-positive: oklch(var(--lch-primary));
  --color-link: oklch(var(--lch-accent));
  --color-bg: oklch(var(--lch-white));
  --color-bg-negative: oklch(var(--lch-red-light));
  --color-message-bg: oklch(var(--lch-gray));
  --color-text: oklch(var(--lch-black));
  --color-text-lighter: oklch(var(--lch-almost-black));
  --color-text-reversed: oklch(var(--lch-white));
  --color-border: oklch(var(--lch-gray));
  --color-border-dark: oklch(var(--lch-gray-dark));
  --color-border-darker: oklch(var(--lch-gray-darker));
  --color-border-darkest: oklch(var(--lch-gray-darkest));
  --color-selected: oklch(var(--lch-accent-light));
  --color-selected-dark: oklch(var(--lch-accent-dark));
  --color-alert: oklch(var(--lch-orange));
  --color-contrast: oklch(var(--lch-purple));
  /* Over a picture, not over the page, so the same in both themes: white on 60% black holds 5.7:1 even over a white frame (45% gave 3.4:1). */
  --media-badge: oklch(var(--lch-always-black) / 0.6);
  --on-media: oklch(var(--lch-always-white));
  /* The topbar's foot: a hairline a shade off its own ground, as WhatsApp's header reads by tone; the border alone drew a bright rule in the dark theme (1.6:1). */
  --topbar-divider: light-dark(color-mix(in oklch, var(--ds-border) 60%, var(--ds-bg-sidebar)), color-mix(in oklch, var(--ds-border) 35%, var(--ds-bg-sidebar)));
  --msg-in: light-dark(#ffffff, oklch(0.24 0.01 145));
  --msg-in-text: light-dark(oklch(0.2 0 0), oklch(0.95 0 0));
  --msg-note: light-dark(#e7e0fb, oklch(0.34 0.05 288));
  --msg-note-text: light-dark(oklch(0.2 0 0), oklch(0.95 0 0));
  --warning: light-dark(oklch(52% 0.13 66), oklch(80% 0.12 72));
  --warning-text: light-dark(oklch(45% 0.12 62), oklch(80% 0.12 72));
  --scrim: light-dark(oklch(0 0 0 / 0.28), oklch(0 0 0 / 0.5));
  --panel-band: light-dark(oklch(94.5% 0.006 145), oklch(11.5% 0.010 145));

  @media (prefers-color-scheme: dark) {
    --lch-black: 96% 0.004 145;
    --lch-white: 17% 0.012 145;
    --lch-gray: 24% 0.010 145;
    --lch-gray-dark: 29% 0.010 145;
    --lch-gray-darker: 43% 0.008 145;
    --lch-gray-darkest: 63% 0.006 145;
    --lch-almost-black: 85% 0.005 145;
    --lch-accent: 72% 0.12 131;
    --lch-accent-light: 27% 0.035 131;
    --lch-accent-dark: 42% 0.06 131;
    --lch-red: 73.8% 0.184 29.18;
    --lch-red-light: 28% 0.05 20;
    --lch-primary: 75% 0.14 131;
    --lch-purple: 70% 0.32 282;
  }
}

/* Text on the paper: the account color, darkened in light only as far as AA on every account needs. */
@supports (color: light-dark(oklch(from red min(l, 0.48) c h), red)) {
  :root {
    --color-positive: light-dark(oklch(from oklch(var(--lch-primary)) min(l, 0.48) c h), oklch(var(--lch-primary)));
    --color-link: light-dark(oklch(from oklch(var(--lch-accent)) min(l, 0.48) c h), oklch(var(--lch-accent)));
  }
}