Encounter

CSS

:root {
  --encounter: #ff9552;
  --encounter-rgb: 255 149 82;
  --encounter-oklch: oklch(0.77 0.151 51);
}

.element {
  color: var(--encounter);
  background-color: hsl(23 100% 66%);
  border-color: oklch(0.77 0.151 51);
}

Tailwind CSS v4

@theme {
  --color-encounter: #ff9552;
  --color-encounter-50: #ffeace;
  --color-encounter-100: #ffdbb9;
  --color-encounter-200: #ffc397;
  --color-encounter-300: #f4a16b;
  --color-encounter-400: #e48142;
  --color-encounter-500: #d16100;
  --color-encounter-600: #b15300;
  --color-encounter-700: #8e4203;
  --color-encounter-800: #6a2f04;
  --color-encounter-900: #4b2004;
  --color-encounter-950: #310f00;
}

SCSS

$encounter: #ff9552;
$encounter-rgb: 255, 149, 82;
$encounter-light: mix(#fff, $encounter, 20%);
$encounter-dark: mix(#000, $encounter, 20%);

.element {
  color: $encounter;
  box-shadow: 0 0 0 2px rgba($encounter, 0.35);
}