/* eom.dev: Catppuccin Latte (light) / Mocha (dark), matching dex.eom.dev.
 *
 * Funkwhale 2.x builds every neutral surface and text colour from the
 * --color-default-* scale: light mode reads step N as-is, dark mode reads
 * the mirrored step. Replace that scale with Latte on the light side and
 * Mocha on the dark side. Primary (mauve) and accent (lavender) come from
 * the ui__theme_*_color preferences, which generate full ramps.
 *
 * This CSS is unlayered, so it wins over Funkwhale's @layer'd styles. */
:root {
  /* Latte: base #eff1f5 at 200 (page), text #4c4f69 at 750. */
  --ctp-l-50: #ffffff;
  --ctp-l-100: #f8f9fb;
  --ctp-l-150: #f3f4f8;
  --ctp-l-200: #eff1f5;
  --ctp-l-250: #e6e9ef;
  --ctp-l-300: #dce0e8;
  --ctp-l-350: #ccd0da;
  --ctp-l-400: #bcc0cc;
  --ctp-l-450: #acb0be;
  --ctp-l-500: #9ca0b0;
  --ctp-l-550: #8c8fa1;
  --ctp-l-600: #7c7f93;
  --ctp-l-650: #6c6f85;
  --ctp-l-700: #5c5f77;
  --ctp-l-750: #4c4f69;
  --ctp-l-800: #41435a;
  --ctp-l-850: #363849;
  --ctp-l-900: #2a2b3a;
  --ctp-l-950: #1e1e2a;
  /* Mocha, as dark mode reads it: base #1e1e2e at 200, text #cdd6f4 at 750. */
  --ctp-d-50: #0b0b12;
  --ctp-d-100: #11111b;
  --ctp-d-150: #181825;
  --ctp-d-200: #1e1e2e;
  --ctp-d-250: #282839;
  --ctp-d-300: #313244;
  --ctp-d-350: #3b3d4f;
  --ctp-d-400: #45475a;
  --ctp-d-450: #585b70;
  --ctp-d-500: #6c7086;
  --ctp-d-550: #7f849c;
  --ctp-d-600: #9399b2;
  --ctp-d-650: #a6adc8;
  --ctp-d-700: #bac2de;
  --ctp-d-750: #cdd6f4;
  --ctp-d-800: #dce3f8;
  --ctp-d-850: #e8edfb;
  --ctp-d-900: #f2f5fd;
  --ctp-d-950: #ffffff;

  --color-default-50: light-dark(var(--ctp-l-50), var(--ctp-d-50));
  --color-default-100: light-dark(var(--ctp-l-100), var(--ctp-d-100));
  --color-default-150: light-dark(var(--ctp-l-150), var(--ctp-d-150));
  --color-default-200: light-dark(var(--ctp-l-200), var(--ctp-d-200));
  --color-default-250: light-dark(var(--ctp-l-250), var(--ctp-d-250));
  --color-default-300: light-dark(var(--ctp-l-300), var(--ctp-d-300));
  --color-default-350: light-dark(var(--ctp-l-350), var(--ctp-d-350));
  --color-default-400: light-dark(var(--ctp-l-400), var(--ctp-d-400));
  --color-default-450: light-dark(var(--ctp-l-450), var(--ctp-d-450));
  --color-default-500: light-dark(var(--ctp-l-500), var(--ctp-d-500));
  --color-default-550: light-dark(var(--ctp-l-550), var(--ctp-d-550));
  --color-default-600: light-dark(var(--ctp-l-600), var(--ctp-d-600));
  --color-default-650: light-dark(var(--ctp-l-650), var(--ctp-d-650));
  --color-default-700: light-dark(var(--ctp-l-700), var(--ctp-d-700));
  --color-default-750: light-dark(var(--ctp-l-750), var(--ctp-d-750));
  --color-default-800: light-dark(var(--ctp-l-800), var(--ctp-d-800));
  --color-default-850: light-dark(var(--ctp-l-850), var(--ctp-d-850));
  --color-default-900: light-dark(var(--ctp-l-900), var(--ctp-d-900));
  --color-default-950: light-dark(var(--ctp-l-950), var(--ctp-d-950));
}

/* Same type as dex.eom.dev, www.eom.dev and listmonk. */
body, .funkwhale, button, input, select, textarea {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Catppuccin peach focus rings, as on dex.eom.dev. */
:focus-visible {
  outline-color: light-dark(#fe640b, #fab387);
}

/* Links: mauve with a lavender hover, as on dex.eom.dev and www. fw.css
   sets these on :root and again on .color-default*, so match both. */
:root, .color-default, .color-default-solid, .color-default-ghost {
  --color-link: light-dark(#8839ef, #cba6f7);
  --color-link-hover: light-dark(#7287fd, #b4befe);
  --color-link-active: light-dark(#7287fd, #b4befe);
}

/* Primary buttons exactly as on dex.eom.dev: mauve with crust text in Mocha,
   Latte mauve with base text in Latte, lavender on hover. (fw.css derives
   them through inverted scales that a palette alone can't match.) */
:is(button, a, [role="button"]).color-primary-solid {
  background-color: light-dark(#8839ef, #cba6f7) !important;
  border-color: light-dark(#8839ef, #cba6f7) !important;
  color: light-dark(#eff1f5, #11111b) !important;
  --color-foreground: light-dark(#eff1f5, #11111b);
}
:is(button, a, [role="button"]).color-primary-solid:is(:hover, :focus-visible) {
  background-color: light-dark(#7287fd, #b4befe) !important;
  border-color: light-dark(#7287fd, #b4befe) !important;
}

/* "Deep" solid surfaces (the coloured feature cards on the welcome page,
   badges) come out mid-tone with low-contrast text in both modes. Give
   them a soft tint of their colour over the page base, with Latte/Mocha
   text, like Catppuccin's own callouts. */
[class*="-deep-solid"]:not(button, a) {
  background-color: color-mix(in oklch, var(--color-500) 25%, light-dark(#eff1f5, #1e1e2e)) !important;
  border-color: color-mix(in oklch, var(--color-500) 45%, light-dark(#eff1f5, #1e1e2e)) !important;
}
[class*="-deep-solid"]:not(button, a),
[class*="-deep-solid"]:not(button, a) :not(button, a, button *, a *) {
  color: light-dark(#4c4f69, #cdd6f4) !important;
}
[class*="-deep-solid"]:not(button, a) a {
  color: light-dark(#8839ef, #cba6f7) !important;
}

/* Destructive buttons: Catppuccin red, same treatment as primary. */
:is(button, a, [role="button"]).color-destructive-solid {
  background-color: light-dark(#d20f39, #f38ba8) !important;
  border-color: light-dark(#d20f39, #f38ba8) !important;
  color: light-dark(#eff1f5, #11111b) !important;
}
:is(button, a, [role="button"]).color-destructive-solid:is(:hover, :focus-visible) {
  background-color: light-dark(#e64553, #eba0ac) !important;
  border-color: light-dark(#e64553, #eba0ac) !important;
}

/* Leftover Fomantic-UI count badges (search results) are teal #00b5ad. */
.ui.circular.label, span.ui.circular {
  background-color: light-dark(#8839ef, #cba6f7) !important;
  color: light-dark(#eff1f5, #11111b) !important;
}

/* Welcome page (components/Home.vue). Its class names are CSS-module
   hashes (_banner_xxxxx_N), so match on the readable part. */
[class*="_banner_"] {
  color: light-dark(#4c4f69, #cdd6f4) !important;
}
/* Replaces the sky-blue gradient (or an instance banner image). */
[class*="_banner_"]::before {
  background-image:
    radial-gradient(circle at 85% 15%, light-dark(rgb(136 57 239 / 0.18), rgb(203 166 247 / 0.16)), transparent 50%),
    radial-gradient(circle at 10% 90%, light-dark(rgb(114 135 253 / 0.14), rgb(180 190 254 / 0.10)), transparent 45%),
    linear-gradient(160deg, light-dark(#eff1f5, #1e1e2e), light-dark(#e6e9ef, #181825)) !important;
}
/* The Funkwhale whale illustration; the eom.dev wordmark takes its place. */
[class*="_banner_"] img[class*="_logo_"] {
  content: url("https://dex.eom.dev/theme/logo.svg");
  aspect-ratio: 10 / 3 !important;
  object-fit: contain;
  align-self: center;
  width: min(22rem, 40%) !important;
}
[class*="_headerCard"], [class*="_headerCardGrid"] .shape-card {
  border: 1px solid light-dark(#9ca0b0, #585b70);
}
/* The login card is a solid primary block in stock Funkwhale; make it a
   regular surface so only the button inside carries the mauve. */
[class*="_loginCard_"] {
  --color-50: var(--color-default-50);
  --color-100: var(--color-default-100);
  --color-150: var(--color-default-150);
  --color-200: var(--color-default-200);
  --color-250: var(--color-default-250);
  --color-300: var(--color-default-300);
  --color-350: var(--color-default-350);
  --color-400: var(--color-default-400);
  --color-450: var(--color-default-450);
  --color-500: var(--color-default-500);
  --color-550: var(--color-default-550);
  --color-600: var(--color-default-600);
  --color-650: var(--color-default-650);
  --color-700: var(--color-default-700);
  --color-750: var(--color-default-750);
  --color-800: var(--color-default-800);
  --color-850: var(--color-default-850);
  --color-900: var(--color-default-900);
  --color-950: var(--color-default-950);
  --color-link: light-dark(#8839ef, #cba6f7);
  --color-link-hover: light-dark(#7287fd, #b4befe);
  --color-link-active: light-dark(#7287fd, #b4befe);
  background-color: light-dark(#e6e9ef, #181825) !important;
  color: light-dark(#4c4f69, #cdd6f4) !important;
  border: 1px solid light-dark(#9ca0b0, #585b70);
}
[class*="_loginCard_"] a {
  color: light-dark(#8839ef, #cba6f7) !important;
}

/* Firefox ESR 140 (and anything else without CSS @scope) drops the two
   @scope blocks in Funkwhale 2.x's fw.css that define --color-foreground-*
   and --color-background-*, so text falls back to black. /eom/compat.js adds
   .no-css-scope to <html> in those browsers; these rules are the same
   mappings as plain selectors (fw.css 2.0.13, "Filled surfaces with positive
   / negative scale"). Without @scope's proximity, later (negative) rules
   win over earlier ones, which matches every nesting Funkwhale uses. */

html.no-css-scope, html.no-css-scope :is(.color-default-solid, .color-accent-solid, .color-green-solid, .color-blue-solid, .color-ochre-solid, .color-purple-solid, .color-red-solid, .color-yellow-solid, :is(.color-default-ghost, .color-accent-ghost, .color-green-ghost, .color-blue-ghost, .color-ochre-ghost, .color-purple-ghost, .color-red-ghost, .color-yellow-ghost):is(:hover, :focus-visible, [aria-selected=true], [aria-pressed=true], [aria-expanded=true], [aria-checked=true], [aria-current]:not([aria-current=false]))) {
  --color-background-50: var(--color-50);
  --color-background-100: var(--color-100);
  --color-background-150: var(--color-150);
  --color-background-200: var(--color-200);
  --color-background-250: var(--color-250);
  --color-background-300: var(--color-300);
  --color-background-350: var(--color-350);
  --color-background-400: var(--color-400);
  --color-background-450: var(--color-450);
  --color-background-500: var(--color-500);
  --color-background-550: var(--color-550);
  --color-background-600: var(--color-600);
  --color-background-650: var(--color-650);
  --color-background-700: var(--color-700);
  --color-background-750: var(--color-750);
  --color-background-800: var(--color-800);
  --color-background-850: var(--color-850);
  --color-background-900: var(--color-900);
  --color-background-950: var(--color-950);
}

html.no-css-scope, html.no-css-scope :is(.color-default-solid, .color-accent-solid, .color-green-solid, .color-blue-solid, .color-ochre-solid, .color-purple-solid, .color-red-solid, .color-yellow-solid, :is(.color-default-ghost, .color-accent-ghost, .color-green-ghost, .color-blue-ghost, .color-ochre-ghost, .color-purple-ghost, .color-red-ghost, .color-yellow-ghost):is(:hover, :focus-visible, [aria-selected=true], [aria-pressed=true], [aria-expanded=true], [aria-checked=true], [aria-current]:not([aria-current=false]))), html.no-css-scope [class*="color-"] {
  --color-foreground-50: var(--color-50);
  --color-foreground-100: var(--color-100);
  --color-foreground-150: var(--color-150);
  --color-foreground-200: var(--color-200);
  --color-foreground-250: var(--color-250);
  --color-foreground-300: var(--color-300);
  --color-foreground-350: var(--color-350);
  --color-foreground-400: var(--color-400);
  --color-foreground-450: var(--color-450);
  --color-foreground-500: var(--color-500);
  --color-foreground-550: var(--color-550);
  --color-foreground-600: var(--color-600);
  --color-foreground-650: var(--color-650);
  --color-foreground-700: var(--color-700);
  --color-foreground-750: var(--color-750);
  --color-foreground-800: var(--color-800);
  --color-foreground-850: var(--color-850);
  --color-foreground-900: var(--color-900);
  --color-foreground-950: var(--color-950);
}

html.no-css-scope :is(.color-default-solid, .color-accent-solid, .color-green-solid, .color-blue-solid, .color-ochre-solid, .color-purple-solid, .color-red-solid, .color-yellow-solid, :is(.color-default-ghost, .color-accent-ghost, .color-green-ghost, .color-blue-ghost, .color-ochre-ghost, .color-purple-ghost, .color-red-ghost, .color-yellow-ghost):is(:hover, :focus-visible, [aria-selected=true], [aria-pressed=true], [aria-expanded=true], [aria-checked=true], [aria-current]:not([aria-current=false])))[class*="color-accent"] {
  --color-background-50: var(--color-default-50);
  --color-background-100: var(--color-default-100);
  --color-background-150: var(--color-default-150);
  --color-background-200: var(--color-default-200);
  --color-background-250: var(--color-default-250);
  --color-background-300: var(--color-default-300);
  --color-background-350: var(--color-default-350);
  --color-background-400: var(--color-default-400);
  --color-background-450: var(--color-default-450);
  --color-background-500: var(--color-default-500);
  --color-background-550: var(--color-default-550);
  --color-background-600: var(--color-default-600);
  --color-background-650: var(--color-default-650);
  --color-background-700: var(--color-default-700);
  --color-background-750: var(--color-default-750);
  --color-background-800: var(--color-default-800);
  --color-background-850: var(--color-default-850);
  --color-background-900: var(--color-default-900);
  --color-background-950: var(--color-default-950);
}

html.no-css-scope :is(.color-primary-solid, .color-destructive-solid, .color-green-deep-solid, .color-blue-deep-solid, .color-ochre-deep-solid, .color-purple-deep-solid, .color-red-deep-solid, .color-yellow-deep-solid, :is(.color-primary-ghost, .color-destructive-ghost, .color-green-deep-ghost, .color-blue-deep-ghost, .color-ochre-deep-ghost, .color-purple-deep-ghost, .color-red-deep-ghost, .color-yellow-deep-ghost):is(:hover, :focus-visible, [aria-selected=true], [aria-pressed=true], [aria-expanded=true], [aria-checked=true], [aria-current]:not([aria-current=false]))) {
  --color-background-50: var(--color-950);
  --color-background-100: var(--color-900);
  --color-background-150: var(--color-850);
  --color-background-200: var(--color-800);
  --color-background-250: var(--color-750);
  --color-background-300: var(--color-700);
  --color-background-350: var(--color-650);
  --color-background-400: var(--color-600);
  --color-background-450: var(--color-550);
  --color-background-500: var(--color-500);
  --color-background-550: var(--color-450);
  --color-background-600: var(--color-400);
  --color-background-650: var(--color-350);
  --color-background-700: var(--color-300);
  --color-background-750: var(--color-250);
  --color-background-800: var(--color-200);
  --color-background-850: var(--color-150);
  --color-background-900: var(--color-100);
  --color-background-950: var(--color-50);
}

html.no-css-scope :is(.color-primary-solid, .color-destructive-solid, .color-green-deep-solid, .color-blue-deep-solid, .color-ochre-deep-solid, .color-purple-deep-solid, .color-red-deep-solid, .color-yellow-deep-solid, :is(.color-primary-ghost, .color-destructive-ghost, .color-green-deep-ghost, .color-blue-deep-ghost, .color-ochre-deep-ghost, .color-purple-deep-ghost, .color-red-deep-ghost, .color-yellow-deep-ghost):is(:hover, :focus-visible, [aria-selected=true], [aria-pressed=true], [aria-expanded=true], [aria-checked=true], [aria-current]:not([aria-current=false]))), html.no-css-scope :is(.color-primary-solid, .color-destructive-solid, .color-green-deep-solid, .color-blue-deep-solid, .color-ochre-deep-solid, .color-purple-deep-solid, .color-red-deep-solid, .color-yellow-deep-solid, :is(.color-primary-ghost, .color-destructive-ghost, .color-green-deep-ghost, .color-blue-deep-ghost, .color-ochre-deep-ghost, .color-purple-deep-ghost, .color-red-deep-ghost, .color-yellow-deep-ghost):is(:hover, :focus-visible, [aria-selected=true], [aria-pressed=true], [aria-expanded=true], [aria-checked=true], [aria-current]:not([aria-current=false]))) [class*="color-"] {
  --color-foreground-50: var(--color-950);
  --color-foreground-100: var(--color-900);
  --color-foreground-150: var(--color-850);
  --color-foreground-200: var(--color-800);
  --color-foreground-250: var(--color-750);
  --color-foreground-300: var(--color-700);
  --color-foreground-350: var(--color-650);
  --color-foreground-400: var(--color-600);
  --color-foreground-450: var(--color-550);
  --color-foreground-500: var(--color-500);
  --color-foreground-550: var(--color-450);
  --color-foreground-600: var(--color-400);
  --color-foreground-650: var(--color-350);
  --color-foreground-700: var(--color-300);
  --color-foreground-750: var(--color-250);
  --color-foreground-800: var(--color-200);
  --color-foreground-850: var(--color-150);
  --color-foreground-900: var(--color-100);
  --color-foreground-950: var(--color-50);
}

html.no-css-scope :is(.color-primary-solid, .color-destructive-solid, .color-green-deep-solid, .color-blue-deep-solid, .color-ochre-deep-solid, .color-purple-deep-solid, .color-red-deep-solid, .color-yellow-deep-solid, :is(.color-primary-ghost, .color-destructive-ghost, .color-green-deep-ghost, .color-blue-deep-ghost, .color-ochre-deep-ghost, .color-purple-deep-ghost, .color-red-deep-ghost, .color-yellow-deep-ghost):is(:hover, :focus-visible, [aria-selected=true], [aria-pressed=true], [aria-expanded=true], [aria-checked=true], [aria-current]:not([aria-current=false])))[class*="color-primary"], html.no-css-scope :is(.color-primary-solid, .color-destructive-solid, .color-green-deep-solid, .color-blue-deep-solid, .color-ochre-deep-solid, .color-purple-deep-solid, .color-red-deep-solid, .color-yellow-deep-solid, :is(.color-primary-ghost, .color-destructive-ghost, .color-green-deep-ghost, .color-blue-deep-ghost, .color-ochre-deep-ghost, .color-purple-deep-ghost, .color-red-deep-ghost, .color-yellow-deep-ghost):is(:hover, :focus-visible, [aria-selected=true], [aria-pressed=true], [aria-expanded=true], [aria-checked=true], [aria-current]:not([aria-current=false])))[class*="color-destructive"] {
  --color-foreground-50: var(--color-default-950);
  --color-foreground-100: var(--color-default-900);
  --color-foreground-150: var(--color-default-850);
  --color-foreground-200: var(--color-default-800);
  --color-foreground-250: var(--color-default-750);
  --color-foreground-300: var(--color-default-700);
  --color-foreground-350: var(--color-default-650);
  --color-foreground-400: var(--color-default-600);
  --color-foreground-450: var(--color-default-550);
  --color-foreground-500: var(--color-default-500);
  --color-foreground-550: var(--color-default-450);
  --color-foreground-600: var(--color-default-400);
  --color-foreground-650: var(--color-default-350);
  --color-foreground-700: var(--color-default-300);
  --color-foreground-750: var(--color-default-250);
  --color-foreground-800: var(--color-default-200);
  --color-foreground-850: var(--color-default-150);
  --color-foreground-900: var(--color-default-100);
  --color-foreground-950: var(--color-default-50);
}

/* Funkwhale's colour palettes (alerts, tags, buttons), rebuilt from Catppuccin.
 * Generated by tools/gen-palettes.py; edit that, not this block. */
:root {
  /* blue: mauve */
  --fw-blue-50: color-mix(in oklch, #cba6f7 3%, #ffffff);
  --fw-blue-100: color-mix(in oklch, #cba6f7 9%, #ffffff);
  --fw-blue-150: color-mix(in oklch, #cba6f7 16%, #ffffff);
  --fw-blue-200: color-mix(in oklch, #cba6f7 25%, #ffffff);
  --fw-blue-250: color-mix(in oklch, #cba6f7 35%, #ffffff);
  --fw-blue-300: color-mix(in oklch, #cba6f7 46%, #ffffff);
  --fw-blue-350: color-mix(in oklch, #cba6f7 59%, #ffffff);
  --fw-blue-400: color-mix(in oklch, #cba6f7 72%, #ffffff);
  --fw-blue-450: color-mix(in oklch, #cba6f7 85%, #ffffff);
  --fw-blue-500: color-mix(in oklch, #8839ef, #cba6f7);
  --fw-blue-550: color-mix(in oklch, #8839ef 85%, #11111b);
  --fw-blue-600: color-mix(in oklch, #8839ef 72%, #11111b);
  --fw-blue-650: color-mix(in oklch, #8839ef 59%, #11111b);
  --fw-blue-700: color-mix(in oklch, #8839ef 46%, #11111b);
  --fw-blue-750: color-mix(in oklch, #8839ef 35%, #11111b);
  --fw-blue-800: color-mix(in oklch, #8839ef 25%, #11111b);
  --fw-blue-850: color-mix(in oklch, #8839ef 16%, #11111b);
  --fw-blue-900: color-mix(in oklch, #8839ef 9%, #11111b);
  --fw-blue-950: color-mix(in oklch, #8839ef 3%, #11111b);
  /* orange: peach */
  --fw-orange-50: color-mix(in oklch, #fab387 3%, #ffffff);
  --fw-orange-100: color-mix(in oklch, #fab387 9%, #ffffff);
  --fw-orange-150: color-mix(in oklch, #fab387 16%, #ffffff);
  --fw-orange-200: color-mix(in oklch, #fab387 25%, #ffffff);
  --fw-orange-250: color-mix(in oklch, #fab387 35%, #ffffff);
  --fw-orange-300: color-mix(in oklch, #fab387 46%, #ffffff);
  --fw-orange-350: color-mix(in oklch, #fab387 59%, #ffffff);
  --fw-orange-400: color-mix(in oklch, #fab387 72%, #ffffff);
  --fw-orange-450: color-mix(in oklch, #fab387 85%, #ffffff);
  --fw-orange-500: color-mix(in oklch, #fe640b, #fab387);
  --fw-orange-550: color-mix(in oklch, #fe640b 85%, #11111b);
  --fw-orange-600: color-mix(in oklch, #fe640b 72%, #11111b);
  --fw-orange-650: color-mix(in oklch, #fe640b 59%, #11111b);
  --fw-orange-700: color-mix(in oklch, #fe640b 46%, #11111b);
  --fw-orange-750: color-mix(in oklch, #fe640b 35%, #11111b);
  --fw-orange-800: color-mix(in oklch, #fe640b 25%, #11111b);
  --fw-orange-850: color-mix(in oklch, #fe640b 16%, #11111b);
  --fw-orange-900: color-mix(in oklch, #fe640b 9%, #11111b);
  --fw-orange-950: color-mix(in oklch, #fe640b 3%, #11111b);
  /* red: red */
  --fw-red-50: color-mix(in oklch, #f38ba8 3%, #ffffff);
  --fw-red-100: color-mix(in oklch, #f38ba8 9%, #ffffff);
  --fw-red-150: color-mix(in oklch, #f38ba8 16%, #ffffff);
  --fw-red-200: color-mix(in oklch, #f38ba8 25%, #ffffff);
  --fw-red-250: color-mix(in oklch, #f38ba8 35%, #ffffff);
  --fw-red-300: color-mix(in oklch, #f38ba8 46%, #ffffff);
  --fw-red-350: color-mix(in oklch, #f38ba8 59%, #ffffff);
  --fw-red-400: color-mix(in oklch, #f38ba8 72%, #ffffff);
  --fw-red-450: color-mix(in oklch, #f38ba8 85%, #ffffff);
  --fw-red-500: color-mix(in oklch, #d20f39, #f38ba8);
  --fw-red-550: color-mix(in oklch, #d20f39 85%, #11111b);
  --fw-red-600: color-mix(in oklch, #d20f39 72%, #11111b);
  --fw-red-650: color-mix(in oklch, #d20f39 59%, #11111b);
  --fw-red-700: color-mix(in oklch, #d20f39 46%, #11111b);
  --fw-red-750: color-mix(in oklch, #d20f39 35%, #11111b);
  --fw-red-800: color-mix(in oklch, #d20f39 25%, #11111b);
  --fw-red-850: color-mix(in oklch, #d20f39 16%, #11111b);
  --fw-red-900: color-mix(in oklch, #d20f39 9%, #11111b);
  --fw-red-950: color-mix(in oklch, #d20f39 3%, #11111b);
  /* pink: pink */
  --fw-pink-50: color-mix(in oklch, #f5c2e7 3%, #ffffff);
  --fw-pink-100: color-mix(in oklch, #f5c2e7 9%, #ffffff);
  --fw-pink-150: color-mix(in oklch, #f5c2e7 16%, #ffffff);
  --fw-pink-200: color-mix(in oklch, #f5c2e7 25%, #ffffff);
  --fw-pink-250: color-mix(in oklch, #f5c2e7 35%, #ffffff);
  --fw-pink-300: color-mix(in oklch, #f5c2e7 46%, #ffffff);
  --fw-pink-350: color-mix(in oklch, #f5c2e7 59%, #ffffff);
  --fw-pink-400: color-mix(in oklch, #f5c2e7 72%, #ffffff);
  --fw-pink-450: color-mix(in oklch, #f5c2e7 85%, #ffffff);
  --fw-pink-500: color-mix(in oklch, #ea76cb, #f5c2e7);
  --fw-pink-550: color-mix(in oklch, #ea76cb 85%, #11111b);
  --fw-pink-600: color-mix(in oklch, #ea76cb 72%, #11111b);
  --fw-pink-650: color-mix(in oklch, #ea76cb 59%, #11111b);
  --fw-pink-700: color-mix(in oklch, #ea76cb 46%, #11111b);
  --fw-pink-750: color-mix(in oklch, #ea76cb 35%, #11111b);
  --fw-pink-800: color-mix(in oklch, #ea76cb 25%, #11111b);
  --fw-pink-850: color-mix(in oklch, #ea76cb 16%, #11111b);
  --fw-pink-900: color-mix(in oklch, #ea76cb 9%, #11111b);
  --fw-pink-950: color-mix(in oklch, #ea76cb 3%, #11111b);
  /* pastel-blue: blue */
  --fw-pastel-blue-50: color-mix(in oklch, #89b4fa 3%, #ffffff);
  --fw-pastel-blue-100: color-mix(in oklch, #89b4fa 9%, #ffffff);
  --fw-pastel-blue-150: color-mix(in oklch, #89b4fa 16%, #ffffff);
  --fw-pastel-blue-200: color-mix(in oklch, #89b4fa 25%, #ffffff);
  --fw-pastel-blue-250: color-mix(in oklch, #89b4fa 35%, #ffffff);
  --fw-pastel-blue-300: color-mix(in oklch, #89b4fa 46%, #ffffff);
  --fw-pastel-blue-350: color-mix(in oklch, #89b4fa 59%, #ffffff);
  --fw-pastel-blue-400: color-mix(in oklch, #89b4fa 72%, #ffffff);
  --fw-pastel-blue-450: color-mix(in oklch, #89b4fa 85%, #ffffff);
  --fw-pastel-blue-500: color-mix(in oklch, #1e66f5, #89b4fa);
  --fw-pastel-blue-550: color-mix(in oklch, #1e66f5 85%, #11111b);
  --fw-pastel-blue-600: color-mix(in oklch, #1e66f5 72%, #11111b);
  --fw-pastel-blue-650: color-mix(in oklch, #1e66f5 59%, #11111b);
  --fw-pastel-blue-700: color-mix(in oklch, #1e66f5 46%, #11111b);
  --fw-pastel-blue-750: color-mix(in oklch, #1e66f5 35%, #11111b);
  --fw-pastel-blue-800: color-mix(in oklch, #1e66f5 25%, #11111b);
  --fw-pastel-blue-850: color-mix(in oklch, #1e66f5 16%, #11111b);
  --fw-pastel-blue-900: color-mix(in oklch, #1e66f5 9%, #11111b);
  --fw-pastel-blue-950: color-mix(in oklch, #1e66f5 3%, #11111b);
  /* pastel-green: green */
  --fw-pastel-green-50: color-mix(in oklch, #a6e3a1 3%, #ffffff);
  --fw-pastel-green-100: color-mix(in oklch, #a6e3a1 9%, #ffffff);
  --fw-pastel-green-150: color-mix(in oklch, #a6e3a1 16%, #ffffff);
  --fw-pastel-green-200: color-mix(in oklch, #a6e3a1 25%, #ffffff);
  --fw-pastel-green-250: color-mix(in oklch, #a6e3a1 35%, #ffffff);
  --fw-pastel-green-300: color-mix(in oklch, #a6e3a1 46%, #ffffff);
  --fw-pastel-green-350: color-mix(in oklch, #a6e3a1 59%, #ffffff);
  --fw-pastel-green-400: color-mix(in oklch, #a6e3a1 72%, #ffffff);
  --fw-pastel-green-450: color-mix(in oklch, #a6e3a1 85%, #ffffff);
  --fw-pastel-green-500: color-mix(in oklch, #40a02b, #a6e3a1);
  --fw-pastel-green-550: color-mix(in oklch, #40a02b 85%, #11111b);
  --fw-pastel-green-600: color-mix(in oklch, #40a02b 72%, #11111b);
  --fw-pastel-green-650: color-mix(in oklch, #40a02b 59%, #11111b);
  --fw-pastel-green-700: color-mix(in oklch, #40a02b 46%, #11111b);
  --fw-pastel-green-750: color-mix(in oklch, #40a02b 35%, #11111b);
  --fw-pastel-green-800: color-mix(in oklch, #40a02b 25%, #11111b);
  --fw-pastel-green-850: color-mix(in oklch, #40a02b 16%, #11111b);
  --fw-pastel-green-900: color-mix(in oklch, #40a02b 9%, #11111b);
  --fw-pastel-green-950: color-mix(in oklch, #40a02b 3%, #11111b);
  /* pastel-ochre: peach */
  --fw-pastel-ochre-50: color-mix(in oklch, #fab387 3%, #ffffff);
  --fw-pastel-ochre-100: color-mix(in oklch, #fab387 9%, #ffffff);
  --fw-pastel-ochre-150: color-mix(in oklch, #fab387 16%, #ffffff);
  --fw-pastel-ochre-200: color-mix(in oklch, #fab387 25%, #ffffff);
  --fw-pastel-ochre-250: color-mix(in oklch, #fab387 35%, #ffffff);
  --fw-pastel-ochre-300: color-mix(in oklch, #fab387 46%, #ffffff);
  --fw-pastel-ochre-350: color-mix(in oklch, #fab387 59%, #ffffff);
  --fw-pastel-ochre-400: color-mix(in oklch, #fab387 72%, #ffffff);
  --fw-pastel-ochre-450: color-mix(in oklch, #fab387 85%, #ffffff);
  --fw-pastel-ochre-500: color-mix(in oklch, #fe640b, #fab387);
  --fw-pastel-ochre-550: color-mix(in oklch, #fe640b 85%, #11111b);
  --fw-pastel-ochre-600: color-mix(in oklch, #fe640b 72%, #11111b);
  --fw-pastel-ochre-650: color-mix(in oklch, #fe640b 59%, #11111b);
  --fw-pastel-ochre-700: color-mix(in oklch, #fe640b 46%, #11111b);
  --fw-pastel-ochre-750: color-mix(in oklch, #fe640b 35%, #11111b);
  --fw-pastel-ochre-800: color-mix(in oklch, #fe640b 25%, #11111b);
  --fw-pastel-ochre-850: color-mix(in oklch, #fe640b 16%, #11111b);
  --fw-pastel-ochre-900: color-mix(in oklch, #fe640b 9%, #11111b);
  --fw-pastel-ochre-950: color-mix(in oklch, #fe640b 3%, #11111b);
  /* pastel-purple: lavender */
  --fw-pastel-purple-50: color-mix(in oklch, #b4befe 3%, #ffffff);
  --fw-pastel-purple-100: color-mix(in oklch, #b4befe 9%, #ffffff);
  --fw-pastel-purple-150: color-mix(in oklch, #b4befe 16%, #ffffff);
  --fw-pastel-purple-200: color-mix(in oklch, #b4befe 25%, #ffffff);
  --fw-pastel-purple-250: color-mix(in oklch, #b4befe 35%, #ffffff);
  --fw-pastel-purple-300: color-mix(in oklch, #b4befe 46%, #ffffff);
  --fw-pastel-purple-350: color-mix(in oklch, #b4befe 59%, #ffffff);
  --fw-pastel-purple-400: color-mix(in oklch, #b4befe 72%, #ffffff);
  --fw-pastel-purple-450: color-mix(in oklch, #b4befe 85%, #ffffff);
  --fw-pastel-purple-500: color-mix(in oklch, #7287fd, #b4befe);
  --fw-pastel-purple-550: color-mix(in oklch, #7287fd 85%, #11111b);
  --fw-pastel-purple-600: color-mix(in oklch, #7287fd 72%, #11111b);
  --fw-pastel-purple-650: color-mix(in oklch, #7287fd 59%, #11111b);
  --fw-pastel-purple-700: color-mix(in oklch, #7287fd 46%, #11111b);
  --fw-pastel-purple-750: color-mix(in oklch, #7287fd 35%, #11111b);
  --fw-pastel-purple-800: color-mix(in oklch, #7287fd 25%, #11111b);
  --fw-pastel-purple-850: color-mix(in oklch, #7287fd 16%, #11111b);
  --fw-pastel-purple-900: color-mix(in oklch, #7287fd 9%, #11111b);
  --fw-pastel-purple-950: color-mix(in oklch, #7287fd 3%, #11111b);
  /* pastel-red: maroon */
  --fw-pastel-red-50: color-mix(in oklch, #eba0ac 3%, #ffffff);
  --fw-pastel-red-100: color-mix(in oklch, #eba0ac 9%, #ffffff);
  --fw-pastel-red-150: color-mix(in oklch, #eba0ac 16%, #ffffff);
  --fw-pastel-red-200: color-mix(in oklch, #eba0ac 25%, #ffffff);
  --fw-pastel-red-250: color-mix(in oklch, #eba0ac 35%, #ffffff);
  --fw-pastel-red-300: color-mix(in oklch, #eba0ac 46%, #ffffff);
  --fw-pastel-red-350: color-mix(in oklch, #eba0ac 59%, #ffffff);
  --fw-pastel-red-400: color-mix(in oklch, #eba0ac 72%, #ffffff);
  --fw-pastel-red-450: color-mix(in oklch, #eba0ac 85%, #ffffff);
  --fw-pastel-red-500: color-mix(in oklch, #e64553, #eba0ac);
  --fw-pastel-red-550: color-mix(in oklch, #e64553 85%, #11111b);
  --fw-pastel-red-600: color-mix(in oklch, #e64553 72%, #11111b);
  --fw-pastel-red-650: color-mix(in oklch, #e64553 59%, #11111b);
  --fw-pastel-red-700: color-mix(in oklch, #e64553 46%, #11111b);
  --fw-pastel-red-750: color-mix(in oklch, #e64553 35%, #11111b);
  --fw-pastel-red-800: color-mix(in oklch, #e64553 25%, #11111b);
  --fw-pastel-red-850: color-mix(in oklch, #e64553 16%, #11111b);
  --fw-pastel-red-900: color-mix(in oklch, #e64553 9%, #11111b);
  --fw-pastel-red-950: color-mix(in oklch, #e64553 3%, #11111b);
  /* pastel-yellow: yellow */
  --fw-pastel-yellow-50: color-mix(in oklch, #f9e2af 3%, #ffffff);
  --fw-pastel-yellow-100: color-mix(in oklch, #f9e2af 9%, #ffffff);
  --fw-pastel-yellow-150: color-mix(in oklch, #f9e2af 16%, #ffffff);
  --fw-pastel-yellow-200: color-mix(in oklch, #f9e2af 25%, #ffffff);
  --fw-pastel-yellow-250: color-mix(in oklch, #f9e2af 35%, #ffffff);
  --fw-pastel-yellow-300: color-mix(in oklch, #f9e2af 46%, #ffffff);
  --fw-pastel-yellow-350: color-mix(in oklch, #f9e2af 59%, #ffffff);
  --fw-pastel-yellow-400: color-mix(in oklch, #f9e2af 72%, #ffffff);
  --fw-pastel-yellow-450: color-mix(in oklch, #f9e2af 85%, #ffffff);
  --fw-pastel-yellow-500: color-mix(in oklch, #df8e1d, #f9e2af);
  --fw-pastel-yellow-550: color-mix(in oklch, #df8e1d 85%, #11111b);
  --fw-pastel-yellow-600: color-mix(in oklch, #df8e1d 72%, #11111b);
  --fw-pastel-yellow-650: color-mix(in oklch, #df8e1d 59%, #11111b);
  --fw-pastel-yellow-700: color-mix(in oklch, #df8e1d 46%, #11111b);
  --fw-pastel-yellow-750: color-mix(in oklch, #df8e1d 35%, #11111b);
  --fw-pastel-yellow-800: color-mix(in oklch, #df8e1d 25%, #11111b);
  --fw-pastel-yellow-850: color-mix(in oklch, #df8e1d 16%, #11111b);
  --fw-pastel-yellow-900: color-mix(in oklch, #df8e1d 9%, #11111b);
  --fw-pastel-yellow-950: color-mix(in oklch, #df8e1d 3%, #11111b);
  /* gray: Latte surfaces, then Mocha surfaces. */
  --fw-gray-50: var(--ctp-l-50);
  --fw-gray-100: var(--ctp-l-100);
  --fw-gray-150: var(--ctp-l-150);
  --fw-gray-200: var(--ctp-l-200);
  --fw-gray-250: var(--ctp-l-250);
  --fw-gray-300: var(--ctp-l-300);
  --fw-gray-350: var(--ctp-l-350);
  --fw-gray-400: var(--ctp-l-400);
  --fw-gray-450: var(--ctp-l-450);
  --fw-gray-500: var(--ctp-l-500);
  --fw-gray-550: var(--ctp-d-450);
  --fw-gray-600: var(--ctp-d-400);
  --fw-gray-650: var(--ctp-d-350);
  --fw-gray-700: var(--ctp-d-300);
  --fw-gray-750: var(--ctp-d-250);
  --fw-gray-800: var(--ctp-d-200);
  --fw-gray-850: var(--ctp-d-150);
  --fw-gray-900: var(--ctp-d-100);
  --fw-gray-950: var(--ctp-d-50);
}