/* theme-cyan.css — drop-in override for the Cyan palette (Tailwind/Shadcn-like scale)
   Użycie: <link rel="stylesheet" href="style.css">
           <link rel="stylesheet" href="theme-cyan.css">  */

/* Skala Cyan w HSL */
:root {
  --cyan-50:  hsl(194.4 80% 96.1%);
  --cyan-100: hsl(194.5 75.8% 91.6%);
  --cyan-200: hsl(194.7 75.1% 83.3%);
  --cyan-300: hsl(194.8 72.5% 71.4%);
  --cyan-400: hsl(195.1 71.4% 59%);
  --cyan-500: hsl(195.8 83.9% 47.1%);
  --cyan-600: hsl(196.6 89.1% 39.4%);
  --cyan-700: hsl(197.5 90.7% 32%);
  --cyan-800: hsl(198.5 86.1% 26.3%);
  --cyan-900: hsl(199.4 75.6% 21.8%);

  /* Mapowanie brandu na Cyan */
  --brand: var(--cyan-600);
  --brand-strong: var(--cyan-700);
  --brand-soft: var(--cyan-400);
}

/* Akcenty globalne */
.contact-info a{ color: var(--brand) !important; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active{ color: var(--brand) !important; border-bottom-color: var(--brand) !important; }

/* Przyciski */
.btn-brand{ background: var(--brand) !important; color:#fff !important; border-color: transparent !important; }
.btn-brand:hover{ background: var(--brand-strong) !important; }

.btn-outline-brand{ border-color: var(--brand) !important; color: var(--brand) !important; }
.btn-outline-brand:hover{ background: var(--brand) !important; color:#fff !important; }

/* Pas z falami */
.waves {
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%2306b6d4' fill-opacity='0.08'%3E%3Cpath d='M0 0h80v80H0z'/%3E%3Cpath d='M28 28.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm24 0a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm-12 24a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm-12-12a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm24 0a2.5 2.5 0 100-5 2.5 2.5 0 000 5z'/%3E%3C/g%3E%3C/svg%3E"), 
    linear-gradient(180deg, var(--cyan-100), var(--cyan-200)) !important;
  background-color: var(--cyan-100);
}
.waves .waves-bg path{ fill: var(--cyan-500) !important; }

/* Poprawka Tekstu na Pasie z Falami */
.waves h3 {
  color: var(--cyan-800); /* Użycie bardzo ciemnego cyjanu */
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.15);
}

/* Focus ring dla dostępności */
:focus-visible{ outline: 3px solid color-mix(in hsl, var(--brand) 70%, white) !important; outline-offset: 2px; }