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

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

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

  --color-bg: #faf8f5;
  --gradient-bg: linear-gradient(90deg, var(--color-bg), var(--color-bg));
  --color-fg: #2c2417;
  --color-fg-muted: #786450;
  --color-secondary-bg: #f5f0e8;
  --color-secondary-separator: rgb(120 100 80 / 18%);
  --color-content-bg: #fffdf9;
  --color-content-fg: #2c2417;
  --color-content-fg-bold: #1a1714;
  --color-content-fg-muted: #786450;
  --color-content-secondary-bg: #f7f1e8;
  --color-content-secondary-separator: rgb(120 100 80 / 18%);
  --color-content-bg-focus: color-mix(in srgb, #c4894a, #fffdf9 92%);
  --color-accent: #c4894a;
  --color-accent-focus: #a8783c;
  --color-accent-lines: color-mix(in srgb, #c4894a, transparent 70%);
  --color-accent-bg: #f5f0e8;
  --color-accent-fg: #fffdf9;
  --color-lines: rgb(120 100 80 / 18%);
  --color-lines-translucent: color-mix(in srgb, #2c2417, transparent 86%);
  --color-confirm: #408f50;
  --color-confirm-bg: color-mix(in srgb, #408f50, transparent 84%);
  --color-confirm-fg: #2b6037;
  --color-reject: #c05050;
  --color-reject-bg: color-mix(in srgb, #c05050, transparent 86%);
  --color-fresh: #4080c0;
  --color-warning: #c4894a;

  --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: #1a1714;
  --gradient-bg: linear-gradient(90deg, var(--color-bg), var(--color-bg));
  --color-fg: #f5f0e8;
  --color-fg-muted: #b9a184;
  --color-secondary-bg: #241c15;
  --color-secondary-separator: rgb(212 165 116 / 20%);
  --color-content-bg: #1a1714;
  --color-content-fg: #f5f0e8;
  --color-content-fg-bold: #fffdf9;
  --color-content-fg-muted: #b9a184;
  --color-content-secondary-bg: #241c15;
  --color-content-secondary-separator: rgb(212 165 116 / 20%);
  --color-content-bg-focus: color-mix(in srgb, #d4a574, #1a1714 86%);
  --color-accent: #d4a574;
  --color-accent-focus: #e9b86c;
  --color-accent-lines: color-mix(in srgb, #d4a574, transparent 66%);
  --color-accent-bg: #3a2b1f;
  --color-accent-fg: #1a1714;
  --color-lines: rgb(212 165 116 / 20%);
  --color-lines-translucent: color-mix(in srgb, #f5f0e8, transparent 86%);
  --color-confirm: #8bc99a;
  --color-confirm-bg: color-mix(in srgb, #8bc99a, transparent 84%);
  --color-confirm-fg: #8bc99a;
  --color-reject: #ffa790;
  --color-reject-bg: color-mix(in srgb, #ffa790, transparent 86%);
  --color-fresh: #7fb3e8;
  --color-warning: #d4a574;

  --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: #1a1714;
  --color-text-secondary: #2c2417;
  --color-text-tertiary: #786450;
  --color-border-primary: color-mix(in srgb, #c4894a, #2c2417 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: #fffdf9;
  --color-text-secondary: #f5f0e8;
  --color-text-status-links: var(--color-text-brand);
  --color-border-primary: color-mix(in srgb, #d4a574, #f5f0e8 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);
}