Mozzarella Covered Chorizo

CSS

:root {
  --mozzarella-covered-chorizo: #e39b7a;
  --mozzarella-covered-chorizo-rgb: 227 155 122;
  --mozzarella-covered-chorizo-oklch: oklch(0.753 0.098 45.4);
}

.element {
  color: var(--mozzarella-covered-chorizo);
  background-color: hsl(19 65% 68%);
  border-color: oklch(0.753 0.098 45.4);
}

Tailwind CSS v4

@theme {
  --color-mozzarella-covered-chorizo: #e39b7a;
  --color-mozzarella-covered-chorizo-50: #ffedde;
  --color-mozzarella-covered-chorizo-100: #ffdfcc;
  --color-mozzarella-covered-chorizo-200: #f9c8b1;
  --color-mozzarella-covered-chorizo-300: #e2a98c;
  --color-mozzarella-covered-chorizo-400: #cf8c6d;
  --color-mozzarella-covered-chorizo-500: #bb704d;
  --color-mozzarella-covered-chorizo-600: #9e5f42;
  --color-mozzarella-covered-chorizo-700: #7f4c34;
  --color-mozzarella-covered-chorizo-800: #5f3726;
  --color-mozzarella-covered-chorizo-900: #422519;
  --color-mozzarella-covered-chorizo-950: #2a140a;
}

SCSS

$mozzarella-covered-chorizo: #e39b7a;
$mozzarella-covered-chorizo-rgb: 227, 155, 122;
$mozzarella-covered-chorizo-light: mix(#fff, $mozzarella-covered-chorizo, 20%);
$mozzarella-covered-chorizo-dark: mix(#000, $mozzarella-covered-chorizo, 20%);

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