/* ============================================================
   NetKrypton Theme Override
   Nadpisuje kolorystykę styles.css na paletę NetKrypton
   Paleta: #0b0f1a (tło) / #2eddc8 (akcent)

   Użycie: dołącz PO styles.css
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="theme.css">
   ============================================================ */

/* ── DARK MODE (domyślny) ── */
:root {
  color-scheme: dark;

  --background:   #0b0f1a;
  --foreground:   #e8edf5;
  --card:         #111827;
  --card-hover:   #161d2e;
  --muted:        #5a6280;
  --border:       rgba(255, 255, 255, 0.06);
  --success:      #2eddc8;
  --navbar-bg:    rgba(11, 15, 26, 0.80);
  --grid-line:    rgba(46, 221, 200, 0.04);
  --avatar-from:  #1a2236;
  --avatar-to:    #243050;
}

/* ── LIGHT MODE ── */
:root[data-theme="light"] {
  color-scheme: light;

  --background:   #f5f7fc;
  --foreground:   #0d1220;
  --card:         #ffffff;
  --card-hover:   #eef1f8;
  --muted:        #6b7290;
  --border:       rgba(0, 0, 0, 0.08);
  --success:      #18b8a6;
  --navbar-bg:    rgba(245, 247, 252, 0.88);
  --grid-line:    rgba(24, 184, 166, 0.06);
  --avatar-from:  #cde8e5;
  --avatar-to:    #a8d8d4;
}

/* ── AKCENT: przyciski primary ── */
/* W styles.css .btn-primary używa --foreground / --background,
   więc nadpisujemy je bezpośrednio na poziomie komponentu */

.btn-primary {
  background: #2eddc8;
  color: #080c16;
}

.btn-primary:hover {
  background: #3ee8d3;
  opacity: 1;
}

:root[data-theme="light"] .btn-primary {
  background: #18b8a6;
  color: #ffffff;
}

:root[data-theme="light"] .btn-primary:hover {
  background: #0fa898;
}

/* ── Pulsujący badge-dot w kolorze akcentu ── */
.badge-dot {
  background: #2eddc8;
}

:root[data-theme="light"] .badge-dot {
  background: #18b8a6;
}

/* ── Stat numbers (hero / stats section) ── */
.stat-item h3 {
  color: #2eddc8;
}

:root[data-theme="light"] .stat-item h3 {
  color: #18b8a6;
}

/* ── Feature icons ── */
.feature-icon {
  background: rgba(46, 221, 200, 0.08);
  border-color: rgba(46, 221, 200, 0.22);
}

.feature-icon svg {
  stroke: #2eddc8;
}

:root[data-theme="light"] .feature-icon {
  background: rgba(24, 184, 166, 0.10);
  border-color: rgba(24, 184, 166, 0.28);
}

:root[data-theme="light"] .feature-icon svg {
  stroke: #18b8a6;
}

/* ── Social links hover ── */
.social-links a:hover {
  border-color: rgba(46, 221, 200, 0.40);
}

/* ── Footer links hover ── */
.footer-column a:hover,
.footer-legal a:hover {
  color: #2eddc8;
}

:root[data-theme="light"] .footer-column a:hover,
:root[data-theme="light"] .footer-legal a:hover {
  color: #18b8a6;
}

/* ── Input focus w kolorze akcentu ── */
.newsletter-input:focus {
  border-color: #2eddc8;
  outline: none;
}

:root[data-theme="light"] .newsletter-input:focus {
  border-color: #18b8a6;
}

/* ── Pricing: karta featured ── */
.pricing-card.featured {
  border-color: rgba(46, 221, 200, 0.35);
  box-shadow: 0 0 0 1px rgba(46, 221, 200, 0.18);
}

:root[data-theme="light"] .pricing-card.featured {
  border-color: rgba(24, 184, 166, 0.40);
  box-shadow: 0 0 0 1px rgba(24, 184, 166, 0.20);
}

/* ── Language selector arrow (dark) ── */
.footer-language select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232eddc8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .footer-language select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2318b8a6' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* ── Select option tło (dark) ── */
.footer-language select option {
  background-color: #111827;
  color: #e8edf5;
}

:root[data-theme="light"] .footer-language select option {
  background-color: #ffffff;
  color: #0d1220;
}

/* ── Selekcja tekstu ── */
::selection {
  background: rgba(46, 221, 200, 0.25);
  color: #e8edf5;
}

:root[data-theme="light"] ::selection {
  background: rgba(24, 184, 166, 0.22);
  color: #0d1220;
}