/* returnfast — primary color override on top of TailGrids Play.
 * TailGrids sets --primary to a blue/violet. We override to returnfast green.
 * Note: --primary is stored as RGB triplet (no commas) so it composes with
 * rgb() / hsl() / oklch() callers consistently across Tailwind v4.
 */
:root {
  --primary: 0 128 96;          /* #008060 in R G B */
  --primary-hover: 0 110 82;     /* #006E52 */
}

.bg-primary { background-color: rgb(var(--primary)) !important; }
.bg-primary\/10 { background-color: rgb(var(--primary) / 0.1) !important; }
.bg-primary\/60 { background-color: rgb(var(--primary) / 0.6) !important; }
.text-primary { color: rgb(var(--primary)) !important; }
.border-primary { border-color: rgb(var(--primary)) !important; }
.ring-primary { --tw-ring-color: rgb(var(--primary)) !important; }
.from-primary {
  --tw-gradient-from: rgb(var(--primary)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-primary {
  --tw-gradient-to: rgb(var(--primary)) var(--tw-gradient-to-position);
}
.hover\:bg-primary\/90:hover { background-color: rgb(var(--primary) / 0.9) !important; }
.hover\:bg-primary:hover { background-color: rgb(var(--primary-hover)) !important; }
.hover\:text-primary:hover { color: rgb(var(--primary)) !important; }
.focus\:ring-primary:focus { --tw-ring-color: rgb(var(--primary)) !important; }

.rf-lang-toggle {
  align-items: center;
  gap: 2px;
  min-height: 36px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  padding: 3px;
  color: #fff;
}

.rf-lang-toggle-mobile {
  display: inline-flex;
  border-color: rgb(0 0 0 / 0.1);
  background: rgb(0 0 0 / 0.04);
  color: #111827;
}

.rf-lang-option {
  min-width: 34px;
  height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
  color: currentColor;
  opacity: 0.72;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    opacity 150ms ease;
}

.rf-lang-option:hover,
.rf-lang-option.is-active {
  background: #fff;
  color: rgb(var(--primary));
  opacity: 1;
}

.sticky .rf-lang-toggle {
  border-color: rgb(0 0 0 / 0.1);
  background: rgb(0 0 0 / 0.04);
  color: #111827;
}

.dark .sticky .rf-lang-toggle,
.dark .rf-lang-toggle-mobile {
  border-color: rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}