/* ════════════════════════════════════════════════════════════
   FLOCARDS Workbench – Komponenten
   Baut auf flocards-tokens.css auf
   ════════════════════════════════════════════════════════════ */

@import url('/flocards-tokens.css');

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family:      var(--fc-font);
  font-size:        var(--fc-text-base);
  line-height:      var(--fc-leading);
  color:            var(--fc-ink);
  background:       var(--fc-blue-pale);
  min-height:       100dvh;
  display:          grid;
  place-items:      center;
  padding:          var(--fc-space-6) var(--fc-space-4);
}

/* ── Auth Shell (Login, Register, etc.) ─────────────────────── */
.wb-shell {
  width:            100%;
  max-width:        460px;
  display:          flex;
  flex-direction:   column;
  gap:              var(--fc-space-5);
}

/* ── Wordmark ───────────────────────────────────────────────── */
.wb-wordmark { display: flex; flex-direction: column; gap: 3px; }

.wb-wordmark-logo {
  font-size:        var(--fc-text-xl);
  font-weight:      var(--fc-weight-bold);
  color:            var(--fc-blue-dark);
  letter-spacing:   -0.02em;
  line-height:      1;
}
.wb-wordmark-logo span { color: var(--fc-blue); }

.wb-wordmark-sub {
  font-size:        var(--fc-text-xs);
  font-weight:      var(--fc-weight-normal);
  letter-spacing:   0.14em;
  text-transform:   uppercase;
  color:            var(--fc-gray);
}

/* ── Card ───────────────────────────────────────────────────── */
.wb-card {
  background:       var(--fc-white);
  border:           1px solid var(--fc-blue-light);
  border-radius:    var(--fc-radius);
  padding:          var(--fc-space-6);
  display:          flex;
  flex-direction:   column;
  gap:              var(--fc-space-5);
  box-shadow:       var(--fc-shadow);
}

.wb-card-header h1 {
  font-size:        var(--fc-text-lg);
  font-weight:      var(--fc-weight-bold);
  color:            var(--fc-blue-dark);
  letter-spacing:   -0.01em;
}
.wb-card-header p {
  font-size:        var(--fc-text-sm);
  color:            var(--fc-gray);
  margin-top:       var(--fc-space-1);
}

/* ── Form ───────────────────────────────────────────────────── */
.wb-form { display: flex; flex-direction: column; gap: var(--fc-space-4); }

.wb-field { display: flex; flex-direction: column; gap: var(--fc-space-1); }

.wb-field label {
  font-size:        var(--fc-text-sm);
  font-weight:      var(--fc-weight-bold);
  color:            var(--fc-blue-dark);
}

.wb-field input {
  font-family:      var(--fc-font);
  font-size:        var(--fc-text-base);
  padding:          var(--fc-space-3) var(--fc-space-4);
  border:           1px solid var(--fc-blue-light);
  border-radius:    var(--fc-radius-sm);
  background:       var(--fc-white);
  color:            var(--fc-ink);
  outline:          none;
  transition:       border-color var(--fc-transition),
                    box-shadow var(--fc-transition);
  width:            100%;
}
.wb-field input:focus {
  border-color:     var(--fc-blue);
  box-shadow:       0 0 0 3px rgba(41,107,198,.15);
}
.wb-field input.wb-error { border-color: var(--fc-danger-dark); }
.wb-field input.wb-error:focus {
  box-shadow:       0 0 0 3px rgba(213,125,125,.2);
}

.wb-field-hint {
  font-size:        var(--fc-text-xs);
  color:            var(--fc-gray-light);
}

/* ── Buttons ────────────────────────────────────────────────── */
.wb-btn {
  font-family:      var(--fc-font);
  font-size:        var(--fc-text-base);
  font-weight:      var(--fc-weight-bold);
  padding:          var(--fc-space-3) var(--fc-space-5);
  border-radius:    var(--fc-radius-sm);
  border:           none;
  cursor:           pointer;
  transition:       background var(--fc-transition),
                    opacity var(--fc-transition),
                    transform var(--fc-transition);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--fc-space-2);
  text-decoration:  none;
  width:            100%;
}
.wb-btn:active    { transform: scale(.98); }
.wb-btn:disabled  { opacity: .5; cursor: not-allowed; transform: none; }

.wb-btn-primary   { background: var(--fc-blue); color: var(--fc-white); }
.wb-btn-primary:hover { background: var(--fc-blue-dark); }

.wb-btn-ghost {
  background:       transparent;
  color:            var(--fc-blue);
  border:           1px solid var(--fc-blue-light);
}
.wb-btn-ghost:hover { background: var(--fc-info-bg); }

/* ── Alerts ─────────────────────────────────────────────────── */
.wb-alert {
  display:          none;
  font-size:        var(--fc-text-sm);
  padding:          var(--fc-space-3) var(--fc-space-4);
  border-radius:    var(--fc-radius-sm);
  border:           1px solid;
  line-height:      var(--fc-leading);
}
.wb-alert.wb-visible  { display: block; }
.wb-alert-danger {
  background:       var(--fc-danger-bg);
  border-color:     var(--fc-danger);
  color:            var(--fc-danger-dark);
}
.wb-alert-success {
  background:       var(--fc-success-bg);
  border-color:     var(--fc-success);
  color:            var(--fc-success-dark);
}
.wb-alert-info {
  background:       var(--fc-info-bg);
  border-color:     var(--fc-blue-light);
  color:            var(--fc-blue-dark);
}

/* ── Spinner ────────────────────────────────────────────────── */
.wb-spinner {
  width:            16px;
  height:           16px;
  border:           2px solid rgba(255,255,255,.35);
  border-top-color: var(--fc-white);
  border-radius:    var(--fc-radius-full);
  animation:        wb-spin .7s linear infinite;
  flex-shrink:      0;
}
@keyframes wb-spin { to { transform: rotate(360deg); } }

/* ── Links ──────────────────────────────────────────────────── */
.wb-link {
  color:            var(--fc-blue);
  text-decoration:  none;
  font-weight:      var(--fc-weight-bold);
}
.wb-link:hover    { text-decoration: underline; }

/* ── Page Footer ────────────────────────────────────────────── */
.wb-footer {
  text-align:       center;
  font-size:        var(--fc-text-xs);
  color:            var(--fc-gray);
  line-height:      var(--fc-leading);
}

/* ── Divider ────────────────────────────────────────────────── */
.wb-divider {
  border:           none;
  border-top:       1px solid var(--fc-blue-light);
}

/* ── Logo ───────────────────────────────────────────────────── */
.wb-logo {
  text-align: center;
}

.wb-logo img {
  width:      100%;
  max-width:  260px;
  height:     auto;
  display:    inline-block;
}

/* ── Check Icon ─────────────────────────────────────────────── */
.wb-check-icon {
  width: 64px; height: 64px;
  border-radius: var(--fc-radius-full);
  background: var(--fc-success-bg);
  color: var(--fc-success-dark);
  font-size: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wb-check-icon--loading {
  background: var(--fc-info-bg);
  color: var(--fc-blue);
}
.wb-check-icon--error {
  background: var(--fc-danger-bg);
  color: var(--fc-danger-dark);
}