/* Joyvane Studios components. Load after tokens.css and base.css.
   Class names match the Button, Badge, Card and Logo components in the design system. */

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-hover); }
.btn--secondary { background: var(--action-secondary); color: var(--on-action-secondary); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn:disabled,
.btn[aria-disabled="true"] { background: var(--border); color: var(--ink-muted); border-color: transparent; cursor: not-allowed; }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0 var(--space-3);
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge--accent { color: var(--accent); }
.badge--neutral { color: var(--ink); }
.badge--success { color: var(--success); }
.badge--warning { color: var(--warning); }
.badge--danger { color: var(--danger); }

/* Card */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease-out;
}
.card:hover { box-shadow: var(--shadow-lift); }
.card__head { display: flex; align-items: center; gap: var(--space-4); }
.card__tile { width: 64px; height: 64px; flex: none; border-radius: var(--radius-md); background: var(--royal); }
.card__title { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; }
.card__text { color: var(--ink-muted); }
.card .btn { align-self: flex-start; }

/* Logo lockup: head beside the name set in type (the logo files contain no text). */
.lockup { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--ink); text-decoration: none; }
.lockup__mark { width: 84px; height: 84px; flex: none; }
.lockup__name { display: flex; flex-direction: column; }
.lockup__name b { font-family: var(--font-display); font-size: 42px; line-height: 1; font-weight: 700; }
.lockup__name span {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.32em;
}
.lockup--small .lockup__mark { width: 48px; height: 48px; }
.lockup--small .lockup__name b { font-size: 24px; }
.lockup--small .lockup__name span { margin-top: var(--space-1); font-size: 10px; line-height: 10px; }