castopod/app/Resources/styles/themes.css

/* Castopod's brand color */
.theme-pine {
  --color-accent-base: 174 100% 29%;
  --color-accent-hover: 172 100% 17%;
  --color-accent-muted: 131 100% 12%;
  --color-accent-contrast: 0 0% 100%;

  --color-heading-foreground: 172 100% 17%;
  --color-heading-background: 111 64% 94%;

  --color-background-elevated: 0 0% 100%;
  --color-background-base: 173 44% 96%;
  --color-background-navigation: 172 100% 17%;
  --color-background-header: 172 100% 17%;
  --color-background-highlight: 111 64% 94%;
  --color-background-backdrop: 0 0% 50%;

  --color-border-subtle: 111 42% 86%;
  --color-border-contrast: 0 0% 0%;
  --color-border-navigation: 131 100% 12%;

  --color-text-base: 158 8% 3%;
  --color-text-muted: 172 8% 38%;
}

/* Red / Rose color */
.theme-crimson {
  --color-accent-base: 350 87% 61%;
  --color-accent-hover: 348 75% 40%;
  --color-accent-muted: 348 73% 32%;
  --color-accent-contrast: 0 0% 100%;

  --color-heading-foreground: 348 73% 32%;
  --color-heading-background: 344 79% 96%;

  --color-background-elevated: 0 0% 100%;
  --color-background-base: 350 44% 96%;
  --color-background-header: 348 75% 40%;
  --color-background-highlight: 344 79% 96%;
  --color-background-backdrop: 0 0% 50%;

  --color-border-subtle: 348 42% 86%;
  --color-border-contrast: 0 0% 0%;

  --color-text-base: 340 8% 3%;
  --color-text-muted: 345 8% 38%;
}

/* Blue color */
.theme-lake {
  --color-accent-base: 194 100% 44%;
  --color-accent-hover: 194 100% 22%;
  --color-accent-muted: 195 100% 11%;
  --color-accent-contrast: 0 0% 100%;

  --color-heading-foreground: 194 100% 22%;
  --color-heading-background: 195 100% 92%;

  --color-background-elevated: 0 0% 100%;
  --color-background-base: 196 44% 96%;
  --color-background-header: 194 100% 22%;
  --color-background-highlight: 195 100% 92%;
  --color-background-backdrop: 0 0% 50%;

  --color-border-subtle: 195 42% 86%;
  --color-border-contrast: 0 0% 0%;

  --color-text-base: 194 8% 3%;
  --color-text-muted: 195 8% 38%;
}

/* Orange color */
.theme-amber {
  --color-accent-base: 17 100% 57%;
  --color-accent-hover: 17 100% 35%;
  --color-accent-muted: 17 100% 24%;
  --color-accent-contrast: 0 0% 100%;

  --color-heading-foreground: 17 100% 35%;
  --color-heading-background: 17 100% 89%;

  --color-background-elevated: 0 0% 100%;
  --color-background-base: 15 44% 96%;
  --color-background-header: 17 100% 35%;
  --color-background-highlight: 17 100% 89%;
  --color-background-backdrop: 0 0% 50%;

  --color-border-subtle: 17 42% 86%;
  --color-border-contrast: 0 0% 0%;

  --color-text-base: 15 8% 3%;
  --color-text-muted: 17 8% 38%;
}

/* Violet color */
.theme-jacaranda {
  --color-accent-base: 254 72% 52%;
  --color-accent-hover: 254 73% 30%;
  --color-accent-muted: 254 71% 19%;
  --color-accent-contrast: 0 0% 100%;

  --color-heading-foreground: 254 73% 30%;
  --color-heading-background: 254 73% 84%;

  --color-background-elevated: 0 0% 100%;
  --color-background-base: 253 44% 96%;
  --color-background-header: 254 73% 30%;
  --color-background-highlight: 254 88% 91%;
  --color-background-backdrop: 0 0% 50%;

  --color-border-subtle: 254 42% 86%;
  --color-border-contrast: 0 0% 0%;

  --color-text-base: 253 8% 3%;
  --color-text-muted: 254 8% 38%;
}

/* Black color */
.theme-onyx {
  --color-accent-base: 240 17% 2%;
  --color-accent-hover: 240 17% 17%;
  --color-accent-muted: 240 17% 17%;
  --color-accent-contrast: 0 0% 100%;

  --color-heading-foreground: 240 17% 17%;
  --color-heading-background: 240 17% 94%;

  --color-background-elevated: 0 0% 100%;
  --color-background-base: 240 17% 96%;
  --color-background-header: 240 12% 17%;
  --color-background-highlight: 240 17% 94%;
  --color-background-backdrop: 0 0% 50%;

  --color-border-subtle: 240 17% 86%;
  --color-border-contrast: 0 0% 0%;

  --color-text-base: 240 8% 3%;
  --color-text-muted: 240 8% 38%;
}