:root {
  --fb-action: #27272a;
  --fb-action-hover: #18181b;
  --fb-accent: #0f766e;
  --fb-accent-strong: #115e59;
  --fb-accent-deep: #134e4a;
  --fb-accent-soft: #f0fdfa;
  --fb-accent-soft-hover: #ccfbf1;
  --fb-accent-border: #99f6e4;
  --fb-accent-border-strong: #5eead4;
  --fb-accent-on-dark: #5eead4;
  --fb-accent-on-dark-hover: #99f6e4;
  --fb-accent-ring: rgb(15 118 110 / 35%);
  --fb-accent-ring-strong: rgb(15 118 110 / 55%);
}

::selection {
  background: var(--fb-accent-soft-hover);
  color: var(--fb-accent-deep);
}

*,
::before,
::after {
  --tw-ring-color: var(--fb-accent-ring);
}

::backdrop {
  --tw-ring-color: var(--fb-accent-ring);
}

/* Tailwind/Flowbite blue utilities are retained in markup for compatibility,
   but rendered through the Formibook Graphite + Petrol palette. */
.bg-blue-50 {
  background-color: var(--fb-accent-soft) !important;
}

.bg-blue-100 {
  background-color: var(--fb-accent-soft-hover) !important;
}

.bg-blue-500,
.bg-blue-600,
.bg-blue-700 {
  background-color: var(--fb-accent) !important;
}

.bg-blue-950 {
  background-color: #042f2e !important;
}

.bg-blue-950\/20 {
  background-color: rgb(4 47 46 / 20%) !important;
}

button.bg-blue-600,
button.bg-blue-700,
a.bg-blue-600,
a.bg-blue-700,
input[type="button"].bg-blue-600,
input[type="button"].bg-blue-700,
input[type="submit"].bg-blue-600,
input[type="submit"].bg-blue-700 {
  background-color: var(--fb-action) !important;
}

.border-blue-100,
.border-blue-200 {
  border-color: var(--fb-accent-border) !important;
}

.border-blue-300 {
  border-color: var(--fb-accent-border-strong) !important;
}

.border-blue-500,
.border-blue-600,
.border-blue-700 {
  border-color: var(--fb-accent) !important;
}

.border-blue-700\/70 {
  border-color: rgb(15 118 110 / 70%) !important;
}

.border-l-blue-600 {
  border-left-color: var(--fb-accent) !important;
}

.text-blue-300 {
  color: var(--fb-accent-on-dark-hover) !important;
}

.text-blue-400,
.text-blue-500 {
  color: var(--fb-accent-on-dark) !important;
}

.text-blue-600,
.text-blue-700 {
  color: var(--fb-accent) !important;
}

.text-blue-800,
.text-blue-900 {
  color: var(--fb-accent-deep) !important;
}

input.text-blue-500,
input.text-blue-600,
input.text-blue-700 {
  accent-color: var(--fb-accent);
}

.hover\:bg-blue-50:hover,
.hover\:bg-blue-100:hover {
  background-color: var(--fb-accent-soft-hover) !important;
}

.hover\:bg-blue-500:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover {
  background-color: var(--fb-accent-strong) !important;
}

.hover\:bg-blue-950:hover {
  background-color: #134e4a !important;
}

button.hover\:bg-blue-500:hover,
button.hover\:bg-blue-800:hover,
a.hover\:bg-blue-500:hover,
a.hover\:bg-blue-800:hover,
input[type="button"].hover\:bg-blue-500:hover,
input[type="button"].hover\:bg-blue-800:hover,
input[type="submit"].hover\:bg-blue-500:hover,
input[type="submit"].hover\:bg-blue-800:hover {
  background-color: var(--fb-action-hover) !important;
}

.hover\:border-blue-300:hover {
  border-color: var(--fb-accent-border-strong) !important;
}

.hover\:border-blue-500:hover,
.hover\:border-blue-600:hover {
  border-color: var(--fb-accent) !important;
}

.hover\:text-blue-200:hover {
  color: var(--fb-accent-on-dark-hover) !important;
}

.hover\:text-blue-600:hover,
.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover {
  color: var(--fb-accent-strong) !important;
}

.focus\:border-blue-500:focus {
  border-color: var(--fb-accent) !important;
}

.focus\:ring-blue-100:focus,
.focus\:ring-blue-300:focus {
  --tw-ring-color: var(--fb-accent-ring) !important;
}

.focus\:ring-blue-500:focus,
.focus\:ring-blue-600:focus,
.focus\:ring-blue-800:focus {
  --tw-ring-color: var(--fb-accent-ring-strong) !important;
}

.dark\:border-blue-500:is(.dark *) {
  border-color: var(--fb-accent-on-dark) !important;
}

.dark\:bg-blue-600:is(.dark *) {
  background-color: var(--fb-accent) !important;
}

.dark\:text-blue-500:is(.dark *) {
  color: var(--fb-accent-on-dark) !important;
}

.dark\:hover\:bg-blue-700:hover:is(.dark *) {
  background-color: var(--fb-accent-strong) !important;
}

.dark\:hover\:text-blue-500:hover:is(.dark *) {
  color: var(--fb-accent-on-dark-hover) !important;
}

/* A graphite primary action would disappear into the admin shell. */
.bg-gray-950 button.bg-blue-600,
.bg-gray-950 button.bg-blue-700,
.bg-gray-950 a.bg-blue-600,
.bg-gray-950 a.bg-blue-700 {
  background-color: var(--fb-accent) !important;
}

.bg-gray-950 button.hover\:bg-blue-500:hover,
.bg-gray-950 button.hover\:bg-blue-800:hover,
.bg-gray-950 a.hover\:bg-blue-500:hover,
.bg-gray-950 a.hover\:bg-blue-800:hover {
  background-color: var(--fb-accent-strong) !important;
}