/* /callbook/callbook.css — vFINAL
   Cel: 1:1 „tokeny” jak Lovable/shadcn (delikatne szarości + fiolet),
   nawet jeśli Tailwind CDN nie ma skonfigurowanych kolorów typu bg-background itd.

   Uwaga:
   - Ten plik dodaje brakujące klasy: bg-background, border-border, text-muted-foreground,
     bg-primary, bg-primary/10, bg-card/50, bg-muted/30 itd.
   - Dark mode gotowy: ustaw kiedyś data-theme="dark" na html/body.
*/

/* =========================
   1) TOKENS (LIGHT / DARK)
   ========================= */

:root{
  /* Light — „Lovable feel” */
  --background: 0 0% 100%;
  --foreground: 224 71% 4%;

  --card: 0 0% 100%;
  --card-foreground: 224 71% 4%;

  --muted: 210 40% 97%;
  --muted-foreground: 215 16% 47%;

  --border: 214 32% 91%;
  --input: 214 32% 91%;

  /* Fiolet jak w Lovable (subtelny, nie neon) */
  --primary: 220 80% 56%;
  --primary-foreground: 0 0% 100%;

  /* dla ringów (focus) */
  --ring: 262 83% 58%;
}

/* Dark — pod przełącznik w topbarze (docelowo JS będzie przełączał atrybut) */
[data-theme="dark"]{
  --background: 224 18% 8%;
  --foreground: 210 40% 98%;

  --card: 224 18% 10%;
  --card-foreground: 210 40% 98%;

  --muted: 224 16% 14%;
  --muted-foreground: 215 20% 72%;

  --border: 224 14% 20%;
  --input: 224 14% 20%;

  /* SZRONIEBIESKI */
  --primary: 215 15% 65%;
  --primary-foreground: 224 18% 8%;
  --ring: 215 15% 65%;
}

/* =========================
   2) „BRAKUJĄCE” KLASY (jak w Lovable)
   ========================= */

.bg-background{ background-color: hsl(var(--background)); }
.text-foreground{ color: hsl(var(--foreground)); }

.bg-card{ background-color: hsl(var(--card)); }
.text-card-foreground{ color: hsl(var(--card-foreground)); }

.bg-muted{ background-color: hsl(var(--muted)); }
.text-muted-foreground{ color: hsl(var(--muted-foreground)); }

.border-border{ border-color: hsl(var(--border)); }
.text-border{ color: hsl(var(--border)); }

.bg-primary{ background-color: hsl(var(--primary)); }
.text-primary{ color: hsl(var(--primary)); }
.text-primary-foreground{ color: hsl(var(--primary-foreground)); }

/* Opacity warianty użyte w index.php */
.bg-card\/50{ background-color: hsl(var(--card) / 0.5); }
.bg-muted\/30{ background-color: hsl(var(--muted) / 0.30); }
.bg-primary\/10{ background-color: hsl(var(--primary) / 0.10); }
.bg-primary\/5{ background-color: hsl(var(--primary) / 0.05); }

.text-foreground\/80{ color: hsl(var(--foreground) / 0.80); }
.text-foreground\/90{ color: hsl(var(--foreground) / 0.90); }

/* Hover warianty kolorów (Tailwind CDN nie wygeneruje ich dla custom tokenów) */
.hover\:text-foreground:hover{ color: hsl(var(--foreground)); }
.hover\:text-primary:hover{ color: hsl(var(--primary)); }

/* =========================
   3) GLOBALNE DOPIESZCZENIE (żeby nie było „czysto białe”)
   ========================= */

html, body{
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* delikatniejszy „papier” jak w Lovable */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   4) TWOJE KLASY PROJEKTOWE
   ========================= */

/* ====== Karty / bloki ====== */
.callbook-card{
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.info-block{
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  padding: 16px;
}

/* ====== Input wyszukiwarki ====== */
.search-input{
  width: 100%;
  height: 52px;
  border-radius: 12px;

  border: 1px solid hsl(var(--input));
  background: hsl(var(--card));
  color: hsl(var(--foreground));

  padding: 0 14px;
  outline: none;

  box-shadow: 0 2px 14px rgba(0,0,0,.05);
}

.search-input::placeholder{
  color: hsl(var(--muted-foreground) / .65);
}

.search-input:focus{
  border-color: hsl(var(--ring));
  box-shadow:
    0 2px 14px rgba(0,0,0,.06),
    0 0 0 4px hsl(var(--ring) / .18);
}

/* ====== Linki subtelne (QRZ/eQSL/LoTW itd.) ====== */
.subtle-link{
  color: hsl(var(--muted-foreground));
  text-decoration: none;
}
.subtle-link:hover{
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ====== Typografia „callsign / locator” ====== */
.font-callsign{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .03em;
  font-weight: 700;
}
.text-callsign{
  color: hsl(var(--foreground));
}

.font-locator{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: .02em;
  font-weight: 600;
}
.text-locator{
  color: hsl(var(--primary));
}