/*
 * Theme Utilities - mapowanie CSS variables z themes.css na klasy Tailwind-compatible.
 *
 * Wymagane po migracji z Tailwind 3 Play CDN (cdn.tailwindcss.com z plugins=forms)
 * na Tailwind 4 Browser bundle (@tailwindcss/browser@4 z jsdelivr). v4 nie obsluguje
 * runtime `tailwind.config = {...}` w <script> - konfiguracja przez @theme w CSS
 * lub przez budowanie lokalne. Te klasy zastepuja stara konfiguracje JS.
 *
 * Plik laduje sie po themes.css w kazdym layout - zachowuje wszystkie referencje
 * (np. `class="bg-surface text-text-main"`) bez koniecznosci masowego refaktoringu.
 */

/* Background utilities */
.bg-bg { background-color: var(--color-bg); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-alt { background-color: var(--color-surface-alt); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary-hover { background-color: var(--color-primary-hover); }
.bg-header-bg { background-color: var(--color-header-bg); }
.bg-success { background-color: var(--color-success); }
.bg-danger { background-color: var(--color-danger); }
.bg-warning { background-color: var(--color-warning); }
.bg-muted { background-color: var(--color-muted); }

/* Text utilities */
.text-text-main { color: var(--color-text); }
.text-text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-muted); }
.text-header-text { color: var(--color-header-text); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-primary { color: var(--color-primary); }
.text-primary-hover { color: var(--color-primary-hover); }

/* Border utilities */
.border-theme-border { border-color: var(--color-border); }
.border-theme { border-width: var(--border-width); border-style: solid; }
.border-theme-thick { border-width: var(--border-width); border-style: solid; }
.border-theme-thin { border-width: 1px; border-style: solid; }

/* Font family */
.font-theme { font-family: var(--font-family); }
.font-theme-mono { font-family: var(--font-family-mono); }

/* Border radius */
.rounded-theme-sm { border-radius: var(--radius-sm); }
.rounded-theme { border-radius: var(--radius-md); }
.rounded-theme-lg { border-radius: var(--radius-lg); }

/* Box shadow */
.shadow-theme-sm { box-shadow: var(--shadow-sm); }
.shadow-theme { box-shadow: var(--shadow-md); }
.shadow-theme-lg { box-shadow: var(--shadow-lg); }

/* === Dodatkowe klasy uzywane w landing/auth (bez konfliktu z Tailwind built-in) === */
.text-ink { color: var(--color-text); }
.bg-ink { background-color: var(--color-text); }
.border-border { border-color: var(--color-border); }
.font-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }

/* Body font global - Inter (najczytelniejszy SaaS) + tabular-nums dla rownych kwot */
body { font-family: var(--font-family, 'Inter', system-ui, -apple-system, sans-serif); font-variant-numeric: tabular-nums; }

/*
 * === Custom utilities (brutal design + cards) ===
 *
 * Theme-aware: sterowane zmiennymi z themes.css przez data-theme na <html>.
 * Fallback (drugi argument var()) = ORYGINALNA wartosc brutal - dzieki temu strony
 * BEZ data-theme (landing, auth) wygladaja identycznie jak wczesniej, a panele z
 * data-theme lapia aktywny motyw. NIE przywracac hardcoded #000/#fff bez fallbacku.
 */
.btn-brutal {
  border: var(--border-width, 3px) solid var(--color-border, #000);
  box-shadow: var(--shadow-sm, 4px 4px 0 #000);
  transition: all 0.1s;
  cursor: pointer;
}
.btn-brutal:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-md, 6px 6px 0 #000);
}
.btn-brutal:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-sm, 2px 2px 0 #000);
}

.card-brutal {
  border: var(--border-width, 3px) solid var(--color-border, #000);
  box-shadow: var(--shadow-lg, 8px 8px 0 #000);
}

.card {
  background-color: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: var(--radius-md, 0.75rem);
}

.btn-primary {
  background-color: var(--color-primary, #155EEF);
  color: var(--color-header-text, #fff);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md, 0.5rem);
  font-weight: 600;
  transition: background-color 0.15s;
  display: inline-block;
  text-align: center;
}
.btn-primary:hover {
  background-color: var(--color-primary-hover, #0F4EDB);
}
