@import "tailwindcss";

.header-topo {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 50%, #f0fdf4 100%);
  position: relative;
  overflow: hidden;
}
.header-topo::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cellipse cx='200' cy='100' rx='180' ry='80' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='200' cy='100' rx='150' ry='65' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='200' cy='100' rx='120' ry='50' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='200' cy='100' rx='90' ry='35' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='200' cy='100' rx='60' ry='22' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='200' cy='100' rx='30' ry='10' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='120' cy='140' rx='100' ry='50' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='120' cy='140' rx='70' ry='35' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='120' cy='140' rx='40' ry='18' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='320' cy='60' rx='80' ry='40' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='320' cy='60' rx='50' ry='25' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3Cellipse cx='320' cy='60' rx='20' ry='10' fill='none' stroke='%234b8b3b' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 400px;
}

body {
  background: url("/background.png") center center / cover no-repeat fixed;
  min-height: 100vh;
}

.map-container {
  z-index: 0;
  position: relative;
  isolation: isolate;
}

/* Page color themes — override blue palette per page */
[data-theme="green"] {
  --color-blue-50: var(--color-green-50);
  --color-blue-100: var(--color-green-100);
  --color-blue-200: var(--color-green-200);
  --color-blue-300: var(--color-green-300);
  --color-blue-500: var(--color-green-500);
  --color-blue-600: var(--color-green-600);
  --color-blue-700: var(--color-green-700);
  --color-blue-800: var(--color-green-800);
  --color-blue-900: var(--color-green-900);
}

[data-theme="purple"] {
  --color-blue-50: var(--color-purple-50);
  --color-blue-100: var(--color-purple-100);
  --color-blue-200: var(--color-purple-200);
  --color-blue-300: var(--color-purple-300);
  --color-blue-500: var(--color-purple-500);
  --color-blue-600: var(--color-purple-600);
  --color-blue-700: var(--color-purple-700);
  --color-blue-800: var(--color-purple-800);
  --color-blue-900: var(--color-purple-900);
}

[data-theme="orange"] {
  --color-blue-50: var(--color-orange-50);
  --color-blue-100: var(--color-orange-100);
  --color-blue-200: var(--color-orange-200);
  --color-blue-300: var(--color-orange-300);
  --color-blue-500: var(--color-orange-500);
  --color-blue-600: var(--color-orange-600);
  --color-blue-700: var(--color-orange-700);
  --color-blue-800: var(--color-orange-800);
  --color-blue-900: var(--color-orange-900);
}

[data-theme="red"] {
  --color-blue-50: var(--color-red-50);
  --color-blue-100: var(--color-red-100);
  --color-blue-200: var(--color-red-200);
  --color-blue-300: var(--color-red-300);
  --color-blue-500: var(--color-red-500);
  --color-blue-600: var(--color-red-600);
  --color-blue-700: var(--color-red-700);
  --color-blue-800: var(--color-red-800);
  --color-blue-900: var(--color-red-900);
}

[data-theme="teal"] {
  --color-blue-50: var(--color-teal-50);
  --color-blue-100: var(--color-teal-100);
  --color-blue-200: var(--color-teal-200);
  --color-blue-300: var(--color-teal-300);
  --color-blue-500: var(--color-teal-500);
  --color-blue-600: var(--color-teal-600);
  --color-blue-700: var(--color-teal-700);
  --color-blue-800: var(--color-teal-800);
  --color-blue-900: var(--color-teal-900);
}

[data-theme="amber"] {
  --color-blue-50: var(--color-amber-50);
  --color-blue-100: var(--color-amber-100);
  --color-blue-200: var(--color-amber-200);
  --color-blue-300: var(--color-amber-300);
  --color-blue-500: var(--color-amber-500);
  --color-blue-600: var(--color-amber-600);
  --color-blue-700: var(--color-amber-700);
  --color-blue-800: var(--color-amber-800);
  --color-blue-900: var(--color-amber-900);
}

[data-theme="yellow"] {
  --color-blue-50: #fffbeb;
  --color-blue-100: #fff3c4;
  --color-blue-200: #ffe588;
  --color-blue-300: #ffd644;
  --color-blue-500: #f5c518;
  --color-blue-600: #e6b000;
  --color-blue-700: #d4a000;
  --color-blue-800: #b88a00;
  --color-blue-900: #9a7200;
}

[data-theme="violet"] {
  --color-blue-50: var(--color-violet-50);
  --color-blue-100: var(--color-violet-100);
  --color-blue-200: var(--color-violet-200);
  --color-blue-300: var(--color-violet-300);
  --color-blue-500: var(--color-violet-500);
  --color-blue-600: var(--color-violet-600);
  --color-blue-700: var(--color-violet-700);
  --color-blue-800: var(--color-violet-800);
  --color-blue-900: var(--color-violet-900);
}

[data-theme="indigo"] {
  --color-blue-50: var(--color-indigo-50);
  --color-blue-100: var(--color-indigo-100);
  --color-blue-200: var(--color-indigo-200);
  --color-blue-300: var(--color-indigo-300);
  --color-blue-500: var(--color-indigo-500);
  --color-blue-600: var(--color-indigo-600);
  --color-blue-700: var(--color-indigo-700);
  --color-blue-800: var(--color-indigo-800);
  --color-blue-900: var(--color-indigo-900);
}