Security

CSS

:root {
  --security: #d6e1c2;
  --security-rgb: 214 225 194;
  --security-oklch: oklch(0.893 0.043 123.2);
}

.element {
  color: var(--security);
  background-color: hsl(81 34% 82%);
  border-color: oklch(0.893 0.043 123.2);
}

Tailwind CSS v4

@theme {
  --color-security: #d6e1c2;
  --color-security-50: #f2f8ea;
  --color-security-100: #e4ebdb;
  --color-security-200: #d0d8c4;
  --color-security-300: #b2bca4;
  --color-security-400: #99a387;
  --color-security-500: #808b6c;
  --color-security-600: #6d765b;
  --color-security-700: #575e49;
  --color-security-800: #404534;
  --color-security-900: #2c3024;
  --color-security-950: #191c12;
}

SCSS

$security: #d6e1c2;
$security-rgb: 214, 225, 194;
$security-light: mix(#fff, $security, 20%);
$security-dark: mix(#000, $security, 20%);

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