/* components.css — RideLvL component patterns. Tokens only — no hardcoded values. */

/* === BRAND BLOCK ===
 * Two patterns:
 *   .brand > .brand__wordmark        — horizontal lockup (preferred)
 *   .brand > .brand__logo + .brand__name — mark + Geist text (fallback)
 */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.brand__wordmark { height: 44px; width: auto; display: block; }
.brand__logo { width: 44px; height: 44px; }
.brand__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

/* === BUTTONS ===
 * Variants: --primary (brand blue) | --secondary (outlined) | --accent (coral CTA)
 *           --google (neutral surface with G mark) | --ghost (text only)
 * Modifiers: --block (full width)
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition:
    background-color var(--t-fast) var(--easing),
    border-color   var(--t-fast) var(--easing),
    color          var(--t-fast) var(--easing),
    box-shadow     var(--t-fast) var(--easing),
    transform      var(--t-fast) var(--easing);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active        { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn--primary  { background: var(--color-primary); color: var(--color-text-inverse); }
.btn--primary:hover  { background: var(--color-primary-hover); color: var(--color-text-inverse); text-decoration: none; }
.btn--primary:active { background: var(--color-primary-active); }

.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface); color: var(--color-text); text-decoration: none; }

.btn--accent  { background: var(--color-accent); color: var(--color-text-inverse); }
.btn--accent:hover  { background: var(--color-accent-hover); color: var(--color-text-inverse); text-decoration: none; }

.btn--google {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: var(--shadow-1);
}
.btn--google:hover {
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--shadow-2);
}

.btn--ghost { background: transparent; color: var(--color-primary); padding-left: var(--sp-3); padding-right: var(--sp-3); }
.btn--ghost:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); text-decoration: none; }

.btn--block { width: 100%; }
.btn__icon { width: 18px; height: 18px; flex: 0 0 18px; }

/* === FORM === */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  transition:
    border-color var(--t-fast) var(--easing),
    box-shadow   var(--t-fast) var(--easing);
}
.input::placeholder { color: var(--color-text-subtle); }
.input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.input[aria-invalid="true"] { border-color: var(--color-error); }

.form-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  border: 1px solid rgba(220, 38, 38, 0.20);
  margin-bottom: var(--sp-4);
}
.form-message {
  background: var(--color-primary-soft);
  color: var(--color-text);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-4);
}

/* === CARD === */
.card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-7);
}
.card__header { margin-bottom: var(--sp-5); }
.card__body   { }
.card__footer { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }

/* === BADGE === */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-active);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}