/* warden – vzhľad podľa GAFA design manuálu (returns, „Stitch – Modern Corporate / Soft-Minimalism").
   Farby LEN z tokenov globals.css (light). Komponenty .card / .input-field / .btn-* prepísané z Tailwind @apply
   do obyčajného CSS podľa design.md §3–4. Font Manrope lokálne (fonts/fonts.css), nič z cudzích serverov. */
@import url("fonts/fonts.css");

:root {
  --background: 210 17% 98%;
  --foreground: 220 13% 12%;
  --card: 0 0% 100%;
  --card-foreground: 220 13% 12%;
  --primary: 184 100% 33%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 96%;
  --secondary-foreground: 220 13% 12%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --destructive: 0 70% 45%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 45%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 184 100% 33%;
}

*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }
html, body { margin: 0; }
body {
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font-size: 0.875rem; line-height: 1.25rem;
}
a { color: hsl(var(--primary)); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }

/* Login / verejné stránky (§5): min-h-screen, vystredené, max-w-md, px-4 */
.page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.box { width: 100%; max-width: 28rem; }
.head { text-align: center; margin-bottom: 2rem; }
.head img { display: block; height: 4rem; width: auto; margin: 0 auto 1rem; }
.head h1 { margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: hsl(var(--foreground)); }
.head p { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }

/* .card – biely povrch, 16px, jemný okraj + ambient tieň, p-6 */
.card {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border) / 0.6); border-radius: 1rem; padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}
.stack { display: flex; flex-direction: column; gap: 1.25rem; }   /* space-y-5 (skryté inputy sa nepočítajú) */
.card h2 { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }

label { display: block; font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); margin-bottom: 0.25rem; }

/* .input-field – h-9, px-3, rounded-lg, tyrkysový focus + jemný glow */
.input-field {
  display: block; width: 100%; height: 2.25rem; padding: 0 0.75rem;
  border: 1px solid hsl(var(--input)); border-radius: 0.5rem;
  background: hsl(var(--card)); color: hsl(var(--foreground));
  font: inherit; font-size: 0.875rem; transition: all 0.2s;
}
.input-field::placeholder { color: hsl(var(--muted-foreground)); }
.input-field:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); }
.input-field.error { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.2); }
/* 2FA kód: väčší (text-lg) + .font-mono (Manrope s tabular-nums) */
.input-field.code { height: 2.75rem; font-size: 1.125rem; line-height: 1.75rem; letter-spacing: 0.25em; text-align: center; }
.font-mono { font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

/* Tlačidlá – h-9, px-4, rounded-lg, text-sm font-semibold, hover stmavenie + tieň, active scale */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.25rem; padding: 0 1rem; border-radius: 0.5rem;
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
  text-decoration: none;
}
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border: 0; }
.btn-primary:hover { background: hsl(var(--primary) / 0.9); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); text-decoration: none; }
.btn-primary:active, .btn-secondary:active { transform: scale(0.98); }
.btn-secondary { background: hsl(var(--card)); color: hsl(var(--primary)); border: 1px solid hsl(var(--primary) / 0.3); }
.btn-secondary:hover { background: hsl(var(--primary) / 0.05); text-decoration: none; }
.w-full { width: 100%; }

.alert {
  padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem;
  background: hsl(var(--destructive) / 0.08); color: hsl(var(--destructive));
  border: 1px solid hsl(var(--destructive) / 0.2);
}
.muted { color: hsl(var(--muted-foreground)); font-size: 0.75rem; line-height: 1rem; }
.center { text-align: center; }
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.mozgy { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mozgy a { width: 100%; justify-content: flex-start; }
.foot { margin-top: 1.5rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: 0.75rem; }