:root {
  --public-background: 210 24% 98%;
  --public-foreground: 220 38% 12%;
  --public-card: 0 0% 100%;
  --public-muted: 215 24% 95%;
  --public-muted-foreground: 220 14% 39%;
  --public-border: 214 20% 88%;
}

html.dark {
  color-scheme: dark;
  --public-background: 224 40% 6%;
  --public-foreground: 214 32% 94%;
  --public-card: 222 34% 10%;
  --public-muted: 222 28% 14%;
  --public-muted-foreground: 216 17% 70%;
  --public-border: 222 22% 22%;
}

html.dark { background: hsl(var(--public-background)); }

body.public-site {
  margin-bottom: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}


html.dark body.public-site {
  background: hsl(var(--public-background));
  color: hsl(var(--public-foreground));
}

/* Existing public views use Tailwind's neutral palette. These mappings keep old
   templates legible without requiring every content block to be rewritten. */
html.dark .bg-white { background-color: hsl(var(--public-card)); }
html.dark .bg-gray-50 { background-color: hsl(var(--public-muted)); }
html.dark .bg-gray-100 { background-color: hsl(var(--public-muted) / 0.9); }
html.dark .bg-gray-200 { background-color: hsl(var(--public-border)); }
html.dark .bg-white\/90 { background-color: hsl(var(--public-card) / 0.92); }
html.dark .bg-white\/80 { background-color: hsl(var(--public-card) / 0.84); }
html.dark .bg-white\/70 { background-color: hsl(var(--public-card) / 0.76); }
html.dark .bg-white\/60 { background-color: hsl(var(--public-card) / 0.68); }
html.dark .bg-white\/50 { background-color: hsl(var(--public-card) / 0.6); }

html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 { color: hsl(var(--public-foreground)); }
html.dark .text-gray-600,
html.dark .text-gray-500 { color: hsl(var(--public-muted-foreground)); }
html.dark .text-gray-400 { color: hsl(216 14% 62%); }
html.dark .text-primary { color: hsl(210 92% 70%); }
html.dark .text-accent { color: hsl(0 88% 69%); }

html.dark .bg-primary { background-color: hsl(210 100% 31%); }
html.dark .bg-accent { background-color: hsl(0 78% 42%); }
html.dark .border-gray-50,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 { border-color: hsl(var(--public-border)); }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: hsl(var(--public-border)); }

html.dark .hover\:bg-gray-50:hover { background-color: hsl(var(--public-muted)); }
html.dark .hover\:bg-gray-100:hover { background-color: hsl(222 27% 18%); }
html.dark .hover\:text-accent:hover { color: hsl(0 88% 69%); }
html.dark .hover\:bg-accent:hover { background-color: hsl(0 78% 47%); }
html.dark .hover\:bg-red-700:hover { background-color: hsl(0 70% 46%); }

html.dark .bg-red-50 { background-color: hsl(0 55% 16%); }
html.dark .bg-red-100 { background-color: hsl(0 48% 20%); }
html.dark .bg-blue-50 { background-color: hsl(215 54% 16%); }
html.dark .bg-green-50 { background-color: hsl(145 38% 15%); }
html.dark .bg-amber-50 { background-color: hsl(40 55% 16%); }
html.dark .bg-indigo-600 { background-color: hsl(239 54% 54%); }
html.dark .text-red-600 { color: hsl(0 84% 71%); }
html.dark .text-green-600,
html.dark .text-green-700 { color: hsl(145 61% 65%); }
html.dark .text-blue-600 { color: hsl(211 94% 72%); }
html.dark .text-amber-600 { color: hsl(42 95% 68%); }
html.dark .text-indigo-600 { color: hsl(239 94% 78%); }
html.dark .border-red-500 { border-color: hsl(0 72% 52%); }
html.dark .border-green-100 { border-color: hsl(145 35% 29%); }
html.dark .hover\:bg-blue-50\/50:hover { background-color: hsl(215 54% 16% / 0.7); }

html.dark .public-site input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
html.dark .public-site textarea,
html.dark .public-site select {
  background-color: hsl(var(--public-muted));
  border-color: hsl(var(--public-border));
  color: hsl(var(--public-foreground));
}

html.dark .public-site input::placeholder,
html.dark .public-site textarea::placeholder { color: hsl(216 14% 62%); }
html.dark .public-site input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
html.dark .public-site select option { background: hsl(var(--public-card)); color: hsl(var(--public-foreground)); }

html.dark .shadow-sm,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl { --tw-shadow-color: rgb(0 0 0 / 0.35); }

.public-theme-toggle {
  align-items: center;
  appearance: none;
  background: linear-gradient(145deg, #075c9c 0%, #033b70 100%);
  border: 1px solid rgb(255 255 255 / 0.42);
  border-radius: 9999px;
  box-shadow: 0 12px 30px rgb(0 31 63 / 0.32), 0 0 0 4px rgb(255 255 255 / 0.14);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 56px;
  justify-content: center;
  padding: 0;
  position: fixed;
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
  width: 56px;
}

.public-theme-toggle:hover {
  background: linear-gradient(145deg, #0b6eb5 0%, #064d8d 100%);
  box-shadow: 0 18px 36px rgb(0 31 63 / 0.38), 0 0 0 5px rgb(255 255 255 / 0.2);
  transform: translateY(-4px);
}

.public-theme-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.public-theme-toggle:active { transform: translateY(-1px) scale(0.96); }
.public-theme-toggle svg { height: 22px; stroke-width: 2.4; width: 22px; }

.public-theme-toggle--header {
  background: transparent;
  border-color: #003366;
  box-shadow: none;
  color: #003366;
  height: 36px;
  flex-shrink: 0;
  min-width: 36px;
  position: static;
  top: -1px;
  width: 36px;
}

.public-theme-toggle--header:hover {
  background: #003366;
  box-shadow: 0 4px 10px rgb(0 51 102 / 0.18);
  color: #fff;
  transform: translateY(-2px);
}

.public-theme-toggle--header svg { height: 18px; width: 18px; }

html.dark .public-theme-toggle--header {
  border-color: hsl(210 70% 72%);
  color: hsl(210 70% 72%);
}

.public-theme-toggle--mobile {
  background: hsl(var(--public-muted));
  border-color: hsl(var(--public-border));
  border-radius: 0.75rem;
  box-shadow: none;
  color: hsl(var(--public-foreground));
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 600;
  height: 3.25rem;
  justify-content: space-between;
  padding: 0 0.75rem 0 1rem;
  position: static;
  width: 100%;
}

.public-theme-toggle--mobile:hover {
  background: hsl(var(--public-card));
  box-shadow: none;
  transform: none;
}

.public-theme-mobile-indicator {
  align-items: center;
  background: linear-gradient(145deg, #075c9c 0%, #033b70 100%);
  border-radius: 9999px;
  color: #fff;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.public-theme-mobile-indicator svg { height: 1rem; width: 1rem; }

.public-theme-sun { display: none; }
html.dark .public-theme-moon { display: none; }
html.dark .public-theme-sun { display: block; }

html.dark .public-site .iti__selected-country:hover,
html.dark .public-site .iti__country:hover { background: hsl(210 80% 60% / 0.12); }
html.dark .public-site .iti__country.iti__active,
html.dark .public-site .iti__country[aria-selected="true"] { background: hsl(210 80% 60% / 0.2); }
html.dark .public-site .iti__arrow::after { border-color: hsl(var(--public-foreground)); }
html.dark .public-site .iti__dropdown-content { background: hsl(var(--public-card)); border-color: hsl(var(--public-border)); }
html.dark .public-site .iti__search-input { background: hsl(var(--public-muted)); border-color: hsl(var(--public-border)); color: hsl(var(--public-foreground)); }
html.dark .public-site .iti__search-input:focus { background: hsl(var(--public-card)); border-bottom-color: hsl(0 88% 60%); }
html.dark .public-site .iti__country-name { color: hsl(var(--public-foreground)); }
html.dark .public-site .iti__dial-code { color: hsl(var(--public-muted-foreground)); }
html.dark .public-site .iti__divider { border-top-color: hsl(var(--public-border)); }