html {
  --version: "current-reader-dusk-mastodon-4.6";
  --variant-name: "Dusk";
  --variant: var(--variant-name);
  --meta: "Current Reader Dusk for Mastodon 4.6+";

  --color-white: #fff;
  --color-black: #000;
}

[data-color-scheme="light"] {
  color-scheme: light;

  --color-bg: #f5f3f8;
  --gradient-bg: linear-gradient(90deg, var(--color-bg), var(--color-bg));
  --color-fg: #2a2530;
  --color-fg-muted: #7f748d;
  --color-secondary-bg: #eeeaf5;
  --color-secondary-separator: rgb(122 104 160 / 16%);
  --color-content-bg: #ffffff;
  --color-content-fg: #2a2530;
  --color-content-fg-bold: #16141c;
  --color-content-fg-muted: #7f748d;
  --color-content-secondary-bg: #faf8fc;
  --color-content-secondary-separator: rgb(122 104 160 / 16%);
  --color-content-bg-focus: color-mix(in srgb, #7a68a0, #ffffff 92%);
  --color-accent: #7a68a0;
  --color-accent-focus: #675783;
  --color-accent-lines: color-mix(in srgb, #7a68a0, transparent 70%);
  --color-accent-bg: #eeeaf5;
  --color-accent-fg: #ffffff;
  --color-lines: rgb(122 104 160 / 16%);
  --color-lines-translucent: color-mix(in srgb, #2a2530, transparent 86%);
  --color-confirm: #459267;
  --color-confirm-bg: color-mix(in srgb, #459267, transparent 84%);
  --color-confirm-fg: #2b5f45;
  --color-reject: #be4368;
  --color-reject-bg: color-mix(in srgb, #be4368, transparent 86%);
  --color-fresh: #5b80c4;
  --color-warning: #dc8735;

  --color-text-primary: var(--color-content-fg);
  --color-text-secondary: var(--color-fg-muted);
  --color-text-tertiary: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 48%);
  --color-text-inverted: var(--color-white);
  --color-text-brand: var(--color-accent);
  --color-text-brand-soft: color-mix(in oklab, var(--color-text-primary), var(--color-text-brand));
  --color-text-on-brand-base: var(--color-accent-fg);
  --color-text-brand-on-inverted: var(--color-accent);
  --color-text-error: var(--color-reject);
  --color-text-on-error-base: var(--color-white);
  --color-text-warning: var(--color-warning);
  --color-text-on-warning-base: var(--color-white);
  --color-text-success: var(--color-confirm-fg);
  --color-text-on-success-base: var(--color-white);
  --color-text-disabled: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 70%);
  --color-text-on-disabled: var(--color-content-secondary-bg);
  --color-text-bookmark-highlight: var(--color-accent);
  --color-text-favourite-highlight: var(--color-warning);
  --color-text-on-media: var(--color-white);
  --color-text-status-links: var(--color-fresh);

  --color-bg-primary: var(--color-content-bg);
  --overlay-strength-secondary: 4%;
  --color-bg-secondary: var(--color-content-secondary-bg);
  --color-bg-tertiary: var(--color-secondary-bg);
  --color-bg-inverted: var(--color-text-inverted);
  --color-bg-overlay-base: rgb(0 0 0 / 62%);
  --color-bg-overlay-highlight: color-mix(in srgb, var(--color-content-fg), transparent 95%);
  --color-bg-overlay: var(--color-bg-primary);
  --color-bg-media-base: var(--color-black);
  --color-bg-media: rgb(0 0 0 / 65%);
  --color-bg-disabled: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 66%);
  --color-bg-brand-base: var(--color-accent);
  --color-bg-brand-base-hover: var(--color-accent-focus);
  --color-bg-brand-soft: var(--color-accent-bg);
  --color-bg-brand-softest: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 90%);
  --color-bg-error-base: var(--color-reject);
  --color-bg-error-base-hover: color-mix(in srgb, var(--color-reject), var(--color-black) 12%);
  --color-bg-error-soft: var(--color-reject-bg);
  --color-bg-error-softest: color-mix(in srgb, var(--color-reject), var(--color-content-bg) 91%);
  --color-bg-warning-base: var(--color-warning);
  --color-bg-warning-soft: color-mix(in srgb, var(--color-warning), var(--color-content-bg) 84%);
  --color-bg-warning-softest: color-mix(in srgb, var(--color-warning), var(--color-content-bg) 92%);
  --color-bg-success-base: var(--color-confirm);
  --color-bg-success-soft: var(--color-confirm-bg);
  --color-bg-success-softest: color-mix(in srgb, var(--color-confirm), var(--color-content-bg) 91%);

  --color-border-primary: var(--color-lines);
  --color-border-brand: var(--color-accent);
  --color-border-brand-soft: var(--color-accent-lines);
  --color-border-error: var(--color-reject);
  --color-border-media: rgb(252 248 255 / 15%);
  --color-border-error-soft: color-mix(in srgb, var(--color-reject), transparent 52%);
  --color-border-warning-soft: color-mix(in srgb, var(--color-warning), transparent 52%);
  --color-border-success-soft: color-mix(in srgb, var(--color-confirm), transparent 52%);

  --shadow-strength-primary: 24%;
  --color-shadow-primary: rgb(0 0 0 / var(--shadow-strength-primary));
  --dropdown-shadow: 0 20px 25px -5px var(--color-shadow-primary), 0 8px 10px -6px var(--color-shadow-primary);
  --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));

  --color-graph-primary-stroke: var(--color-text-brand);
  --color-graph-primary-fill: var(--color-bg-brand-softest);
  --color-graph-warning-stroke: var(--color-text-warning);
  --color-graph-warning-fill: var(--color-bg-warning-softest);
  --color-graph-disabled-stroke: var(--color-text-disabled);
  --color-graph-disabled-fill: var(--color-bg-disabled);

  --rich-text-container-color: var(--color-bg-secondary);
  --rich-text-text-color: var(--color-text-primary);
  --rich-text-decorations-color: var(--color-border-brand-soft);

  --background-color: var(--color-bg);
  --background-border-color: var(--color-border-primary);
  --modal-background-color: var(--color-bg-primary);
}

[data-color-scheme="dark"],
html:not([data-color-scheme]) {
  color-scheme: dark;

  --color-bg: #16141c;
  --gradient-bg: linear-gradient(90deg, var(--color-bg), var(--color-bg));
  --color-fg: #eae6f2;
  --color-fg-muted: #a99bbb;
  --color-secondary-bg: #211d29;
  --color-secondary-separator: rgb(160 144 200 / 18%);
  --color-content-bg: #16141c;
  --color-content-fg: #eae6f2;
  --color-content-fg-bold: #ffffff;
  --color-content-fg-muted: #a99bbb;
  --color-content-secondary-bg: #211d29;
  --color-content-secondary-separator: rgb(160 144 200 / 18%);
  --color-content-bg-focus: color-mix(in srgb, #a090c8, #16141c 86%);
  --color-accent: #a090c8;
  --color-accent-focus: #c7badd;
  --color-accent-lines: color-mix(in srgb, #a090c8, transparent 66%);
  --color-accent-bg: #332d40;
  --color-accent-fg: #16141c;
  --color-lines: rgb(160 144 200 / 18%);
  --color-lines-translucent: color-mix(in srgb, #eae6f2, transparent 86%);
  --color-confirm: #86c7a3;
  --color-confirm-bg: color-mix(in srgb, #86c7a3, transparent 84%);
  --color-confirm-fg: #86c7a3;
  --color-reject: #f7a3b6;
  --color-reject-bg: color-mix(in srgb, #f7a3b6, transparent 86%);
  --color-fresh: #8faee6;
  --color-warning: #ffc06d;

  --color-text-primary: var(--color-content-fg);
  --color-text-secondary: var(--color-fg-muted);
  --color-text-tertiary: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 48%);
  --color-text-inverted: var(--color-black);
  --color-text-brand: var(--color-accent);
  --color-text-brand-soft: color-mix(in oklab, var(--color-text-primary), var(--color-text-brand));
  --color-text-on-brand-base: var(--color-accent-fg);
  --color-text-brand-on-inverted: var(--color-accent);
  --color-text-error: var(--color-reject);
  --color-text-on-error-base: var(--color-white);
  --color-text-warning: var(--color-warning);
  --color-text-on-warning-base: var(--color-white);
  --color-text-success: var(--color-confirm-fg);
  --color-text-on-success-base: var(--color-white);
  --color-text-disabled: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 70%);
  --color-text-on-disabled: var(--color-content-secondary-bg);
  --color-text-bookmark-highlight: var(--color-accent);
  --color-text-favourite-highlight: var(--color-warning);
  --color-text-on-media: var(--color-white);
  --color-text-status-links: var(--color-fresh);

  --color-bg-primary: var(--color-content-bg);
  --overlay-strength-secondary: 4%;
  --color-bg-secondary: var(--color-content-secondary-bg);
  --color-bg-tertiary: var(--color-secondary-bg);
  --color-bg-inverted: var(--color-text-inverted);
  --color-bg-overlay-base: rgb(0 0 0 / 62%);
  --color-bg-overlay-highlight: color-mix(in srgb, var(--color-content-fg), transparent 95%);
  --color-bg-overlay: var(--color-bg-primary);
  --color-bg-media-base: var(--color-black);
  --color-bg-media: rgb(0 0 0 / 65%);
  --color-bg-disabled: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 66%);
  --color-bg-brand-base: var(--color-accent);
  --color-bg-brand-base-hover: var(--color-accent-focus);
  --color-bg-brand-soft: var(--color-accent-bg);
  --color-bg-brand-softest: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 90%);
  --color-bg-error-base: var(--color-reject);
  --color-bg-error-base-hover: color-mix(in srgb, var(--color-reject), var(--color-black) 12%);
  --color-bg-error-soft: var(--color-reject-bg);
  --color-bg-error-softest: color-mix(in srgb, var(--color-reject), var(--color-content-bg) 91%);
  --color-bg-warning-base: var(--color-warning);
  --color-bg-warning-soft: color-mix(in srgb, var(--color-warning), var(--color-content-bg) 84%);
  --color-bg-warning-softest: color-mix(in srgb, var(--color-warning), var(--color-content-bg) 92%);
  --color-bg-success-base: var(--color-confirm);
  --color-bg-success-soft: var(--color-confirm-bg);
  --color-bg-success-softest: color-mix(in srgb, var(--color-confirm), var(--color-content-bg) 91%);

  --color-border-primary: var(--color-lines);
  --color-border-brand: var(--color-accent);
  --color-border-brand-soft: var(--color-accent-lines);
  --color-border-error: var(--color-reject);
  --color-border-media: rgb(252 248 255 / 15%);
  --color-border-error-soft: color-mix(in srgb, var(--color-reject), transparent 52%);
  --color-border-warning-soft: color-mix(in srgb, var(--color-warning), transparent 52%);
  --color-border-success-soft: color-mix(in srgb, var(--color-confirm), transparent 52%);

  --shadow-strength-primary: 78%;
  --color-shadow-primary: rgb(0 0 0 / var(--shadow-strength-primary));
  --dropdown-shadow: 0 20px 25px -5px var(--color-shadow-primary), 0 8px 10px -6px var(--color-shadow-primary);
  --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));

  --color-graph-primary-stroke: var(--color-text-brand);
  --color-graph-primary-fill: var(--color-bg-brand-softest);
  --color-graph-warning-stroke: var(--color-text-warning);
  --color-graph-warning-fill: var(--color-bg-warning-softest);
  --color-graph-disabled-stroke: var(--color-text-disabled);
  --color-graph-disabled-fill: var(--color-bg-disabled);

  --rich-text-container-color: var(--color-bg-secondary);
  --rich-text-text-color: var(--color-text-primary);
  --rich-text-decorations-color: var(--color-border-brand-soft);

  --background-color: var(--color-bg);
  --background-border-color: var(--color-border-primary);
  --modal-background-color: var(--color-bg-primary);
}

[data-contrast="high"] [data-color-scheme="light"],
[data-color-scheme="light"][data-contrast="high"],
[data-color-scheme="light"] [data-contrast="high"] {
  --color-text-primary: #16141c;
  --color-text-secondary: #2a2530;
  --color-text-tertiary: #7f748d;
  --color-border-primary: color-mix(in srgb, #7a68a0, #2a2530 20%);
}

[data-contrast="high"] [data-color-scheme="dark"],
[data-color-scheme="dark"][data-contrast="high"],
html:not([data-color-scheme])[data-contrast="high"],
html:not([data-color-scheme]) [data-contrast="high"] {
  --color-text-primary: #ffffff;
  --color-text-secondary: #eae6f2;
  --color-text-status-links: var(--color-text-brand);
  --color-border-primary: color-mix(in srgb, #a090c8, #eae6f2 20%);
}

.app-body,
body {
  background: var(--gradient-bg);
  color: var(--color-text-primary);
}

.app-body {
  --background-color: var(--color-bg);
  --background-border-color: var(--color-border-primary);
  --modal-background-color: var(--color-bg-primary);
}