:root {
  --magenta: #780f5a;
  --ink: #111827;
  --muted: #4b5563;
  --paper: #f9fafb;
  --surface: #ffffff;
  --line: #f3f4f6;
  --shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
}

[data-theme="dark"] {
  color-scheme: dark;
  --magenta: #c45a9a;
  --ink: #f5f0f1;
  --muted: #a8a29e;
  --paper: #1a1618;
  --surface: #252022;
  --line: #3f3a3c;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.container-max {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.section-padding {
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

@media (min-width: 1024px) {
  .section-padding {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
}

.btn-primary {
  padding: 0.75rem 1.5rem;
  background: #780f5a;
  color: #fff;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.btn-primary:hover {
  background: #a91d6a;
}

.gradient-bg {
  background: linear-gradient(135deg, #780f5a 0%, #a91d6a 100%);
}

.text-gradient {
  background: linear-gradient(135deg, #780f5a 0%, #a91d6a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.photo-frame {
  overflow: hidden;
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: var(--surface);
}

.photo-frame img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-frame--hero img {
  aspect-ratio: 5 / 4;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

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

[data-theme="light"] .icon-sun,
[data-theme="dark"] .icon-moon {
  display: none;
}

[data-theme="dark"] body,
[data-theme="dark"] .bg-gray-50 {
  background-color: var(--paper) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] header.bg-white {
  background-color: var(--surface) !important;
}

[data-theme="dark"] .bg-gray-100 {
  background-color: #2d292b !important;
}

[data-theme="dark"] .bg-gray-200 {
  background-color: #3f3a3c !important;
}

[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800 {
  color: var(--ink) !important;
}

[data-theme="dark"] .text-gray-700 {
  color: #d6d3d1 !important;
}

[data-theme="dark"] .text-gray-600 {
  color: #b5afa9 !important;
}

[data-theme="dark"] .text-gray-500 {
  color: #a8a29e !important;
}

[data-theme="dark"] .text-gray-400 {
  color: #8a8480 !important;
}

[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200 {
  border-color: var(--line) !important;
}

[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] a.hover\:bg-gray-50:hover {
  background-color: #2d292b !important;
}

[data-theme="dark"] .bg-ubbimed\/5,
[data-theme="dark"] .bg-ubbimed\/10 {
  background-color: rgba(196, 90, 154, 0.12) !important;
}

[data-theme="dark"] .border-ubbimed\/20 {
  border-color: rgba(196, 90, 154, 0.28) !important;
}

[data-theme="dark"] [class*="from-blue-50"],
[data-theme="dark"] [class*="from-green-50"],
[data-theme="dark"] [class*="from-purple-50"],
[data-theme="dark"] [class*="from-orange-50"],
[data-theme="dark"] [class*="from-red-50"],
[data-theme="dark"] [class*="from-yellow-50"],
[data-theme="dark"] [class*="from-indigo-50"],
[data-theme="dark"] [class*="from-pink-50"],
[data-theme="dark"] [class*="from-gray-50"],
[data-theme="dark"] [class*="from-ubbimed-50"],
[data-theme="dark"] [class*="from-ubbimed/"] {
  background-image: linear-gradient(to bottom right, var(--surface), var(--paper)) !important;
}

[data-theme="dark"] .to-white,
[data-theme="dark"] .to-blue-50,
[data-theme="dark"] .to-blue-100,
[data-theme="dark"] .to-green-50,
[data-theme="dark"] .to-green-100,
[data-theme="dark"] .to-purple-50,
[data-theme="dark"] .to-purple-100,
[data-theme="dark"] .to-orange-50,
[data-theme="dark"] .to-orange-100,
[data-theme="dark"] .to-red-50,
[data-theme="dark"] .to-red-100,
[data-theme="dark"] .to-ubbimed-50 {
  --tw-gradient-to: var(--paper) !important;
}

[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100 {
  background-color: #243044 !important;
}

[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100 {
  background-color: #1f2a22 !important;
}

[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-purple-100 {
  background-color: #2a2234 !important;
}

[data-theme="dark"] .bg-indigo-50,
[data-theme="dark"] .bg-indigo-100 {
  background-color: #222436 !important;
}

[data-theme="dark"] .bg-orange-50,
[data-theme="dark"] .bg-orange-100,
[data-theme="dark"] .bg-yellow-50 {
  background-color: #2a2218 !important;
}

[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-red-100 {
  background-color: #2c1c1c !important;
}

[data-theme="dark"] .bg-ubbimed-50,
[data-theme="dark"] .bg-pink-50 {
  background-color: #2a1c26 !important;
}

[data-theme="dark"] .border-blue-100,
[data-theme="dark"] .border-blue-200,
[data-theme="dark"] .border-green-100,
[data-theme="dark"] .border-green-200,
[data-theme="dark"] .border-purple-100,
[data-theme="dark"] .border-purple-200,
[data-theme="dark"] .border-orange-100,
[data-theme="dark"] .border-orange-200,
[data-theme="dark"] .border-red-100,
[data-theme="dark"] .border-red-200,
[data-theme="dark"] .border-indigo-100,
[data-theme="dark"] .border-indigo-200,
[data-theme="dark"] .border-yellow-100 {
  border-color: var(--line) !important;
}

[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-900 {
  color: #93c5fd !important;
}

[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-900 {
  color: #86efac !important;
}

[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-800 {
  color: #c4b5fd !important;
}

[data-theme="dark"] .text-orange-600,
[data-theme="dark"] .text-orange-700,
[data-theme="dark"] .text-orange-800 {
  color: #fdba74 !important;
}

[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800 {
  color: #fca5a5 !important;
}

[data-theme="dark"] .text-indigo-600,
[data-theme="dark"] .text-indigo-700 {
  color: #a5b4fc !important;
}

[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-700 {
  color: #fde047 !important;
}

[data-theme="dark"] .text-pink-600,
[data-theme="dark"] .text-pink-700 {
  color: #f9a8d4 !important;
}

[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl,
[data-theme="dark"] .shadow-2xl,
[data-theme="dark"] .shadow-sm {
  --tw-shadow-color: rgb(0 0 0 / 0.35);
}

[data-theme="dark"] .theme-toggle {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

[data-theme="dark"] header {
  border-color: var(--line) !important;
}

[data-theme="dark"] footer.bg-gray-900 {
  background-color: #120f10 !important;
}

[data-theme="dark"] .bg-white\/90 {
  background-color: rgb(37 32 34 / 0.9) !important;
}

[data-theme="dark"] .text-ubbimed {
  color: #c45a9a !important;
}

[data-theme="dark"] .hover\:text-ubbimed:hover,
[data-theme="dark"] .hover\:text-ubbimed-light:hover {
  color: #d478ae !important;
}

[data-theme="dark"] nav a,
[data-theme="dark"] nav button {
  color: var(--muted);
}

[data-theme="dark"] nav a:hover,
[data-theme="dark"] nav button:hover {
  color: #c45a9a;
}

.section-warm {
  background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 48%, #fefce8 100%);
}

[data-theme="dark"] .section-warm {
  background: linear-gradient(135deg, #241818 0%, #1f1a18 52%, #1c1a16 100%);
}

[data-theme="dark"] .section-warm .bg-red-50 {
  background-color: #3a2424 !important;
}

[data-theme="dark"] .section-warm .bg-green-50 {
  background-color: #243428 !important;
}

[data-theme="dark"] .from-red-50,
[data-theme="dark"] .via-orange-50,
[data-theme="dark"] .to-yellow-50,
[data-theme="dark"] .from-orange-50,
[data-theme="dark"] .from-yellow-50 {
  --tw-gradient-from: #241818 !important;
  --tw-gradient-to: #1c1a16 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-red-100 {
  background-color: #2c1c1c !important;
}

[data-theme="dark"] .bg-orange-50,
[data-theme="dark"] .bg-yellow-50 {
  background-color: #2a2218 !important;
}

[data-theme="dark"] .border-red-100,
[data-theme="dark"] .border-red-200,
[data-theme="dark"] .border-green-100,
[data-theme="dark"] .border-green-200,
[data-theme="dark"] .border-orange-100,
[data-theme="dark"] .border-yellow-100 {
  border-color: var(--line) !important;
}

[data-theme="dark"] .bg-gradient-to-br.from-red-50,
[data-theme="dark"] .bg-gradient-to-r.from-red-50 {
  background-image: linear-gradient(to bottom right, #241818, #1c1a16) !important;
}