@import "tailwindcss";

:root {
  --color-petrol: #176C73;
  --color-eisweiss: #F0F8F7;
  --color-anthrazit: #23363B;
  
  --petrol-rgb: 23, 108, 115;
  --eisweiss-rgb: 240, 248, 247;
  --anthrazit-rgb: 35, 54, 59;
  
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-eisweiss);
  color: var(--color-anthrazit);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* Base Fallbacks for CSS colors to ensure they work regardless of TW configuration */
.bg-petrol { background-color: var(--color-petrol); }
.bg-eisweiss { background-color: var(--color-eisweiss); }
.bg-anthrazit { background-color: var(--color-anthrazit); }

.text-petrol { color: var(--color-petrol); }
.text-eisweiss { color: var(--color-eisweiss); }
.text-anthrazit { color: var(--color-anthrazit); }

.border-petrol { border-color: var(--color-petrol); }
.border-eisweiss { border-color: var(--color-eisweiss); }
.border-anthrazit { border-color: var(--color-anthrazit); }

.bg-petrol\/5 { background-color: rgba(var(--petrol-rgb), 0.05); }
.bg-petrol\/10 { background-color: rgba(var(--petrol-rgb), 0.1); }
.bg-petrol\/90 { background-color: rgba(var(--petrol-rgb), 0.9); }
.border-petrol\/10 { border-color: rgba(var(--petrol-rgb), 0.1); }
.border-petrol\/20 { border-color: rgba(var(--petrol-rgb), 0.2); }
.border-petrol\/30 { border-color: rgba(var(--petrol-rgb), 0.3); }

.bg-eisweiss\/50 { background-color: rgba(var(--eisweiss-rgb), 0.5); }
.bg-eisweiss\/85 { background-color: rgba(var(--eisweiss-rgb), 0.85); }

.text-eisweiss\/60 { color: rgba(var(--eisweiss-rgb), 0.6); }
.text-eisweiss\/80 { color: rgba(var(--eisweiss-rgb), 0.8); }
.border-eisweiss\/10 { border-color: rgba(var(--eisweiss-rgb), 0.1); }

.text-anthrazit\/60 { color: rgba(var(--anthrazit-rgb), 0.6); }
.text-anthrazit\/70 { color: rgba(var(--anthrazit-rgb), 0.7); }
.text-anthrazit\/90 { color: rgba(var(--anthrazit-rgb), 0.9); }

.from-eisweiss { --tw-gradient-from: var(--color-eisweiss) var(--tw-gradient-from-position); --tw-gradient-to: rgba(var(--eisweiss-rgb), 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-eisweiss\/95 { --tw-gradient-via: rgba(var(--eisweiss-rgb), 0.95) var(--tw-gradient-via-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-transparent { --tw-gradient-to: transparent var(--tw-gradient-to-position); }