@layer themes {
  .ui-themed {
    --fp-color-brand-primary: var(--ui-primary, var(--fp-color-brand-primary));
    --fp-color-brand-primary-strong: var(--ui-primary, var(--fp-color-brand-primary-strong));
    --fp-color-brand-accent: var(--ui-accent, var(--fp-color-brand-accent));
    --fp-color-bg-page: var(--ui-bg, var(--fp-color-bg-page));
    --fp-color-bg-surface: var(--ui-surface, var(--fp-color-bg-surface));
    --fp-color-bg-surface-raised: var(--ui-surface-strong, var(--fp-color-bg-surface-raised));
    --fp-color-bg-surface-strong: var(--ui-surface-strong, var(--fp-color-bg-surface-strong));
    --fp-color-text-primary: var(--ui-text, var(--fp-color-text-primary));
    --fp-color-text-muted: var(--ui-muted, var(--fp-color-text-muted));
    --fp-color-border-subtle: var(--ui-border, var(--fp-color-border-subtle));
    --fp-font-heading: var(--ui-font-heading, var(--fp-font-heading));
    --fp-font-body: var(--ui-font-body, var(--fp-font-body));
  }

  .league-themed {
    --fp-color-brand-primary: var(--league-primary, var(--fp-color-brand-primary));
    --fp-color-brand-accent: var(--league-accent, var(--fp-color-brand-accent));
    --fp-color-bg-page: var(--league-bg, var(--fp-color-bg-page));
    --fp-color-bg-surface: var(--league-surface, var(--fp-color-bg-surface));
    --fp-color-bg-surface-raised: color-mix(in srgb, var(--league-surface, var(--fp-color-bg-surface)) 84%, var(--league-primary, #28a745));
    --fp-color-text-primary: var(--league-text, var(--fp-color-text-primary));
    --fp-color-text-muted: var(--league-muted, var(--fp-color-text-muted));
    --fp-color-border-subtle: var(--league-border, var(--fp-color-border-subtle));
  }
}