/* ==========================================================================
   components.css — Shared reusable component classes
   Built on theme.css tokens and OpenProps.

   Load order: open-props → normalize → theme.css → global.css → utils.css → components.css

   Components:
     1. Buttons      .btn, .btn--primary, .btn--outline, .btn--ghost
     2. Cards        .card, .card__image, .card__header, .card__body, .card__footer
     3. Badges       .badge, .badge--*, .tag
     4. Forms        .form-group, .form-label, .form-input, .form-select, etc.
     5. Section      .section
     6. Alerts       .alert, .alert--info, .alert--success, etc.
     7. Divider      .divider
   ========================================================================== */

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-md);
  min-block-size: 44px;
  font-family: var(--font-body);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-6);
  line-height: var(--font-lineheight-0);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-2);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out-3),
    color var(--duration-fast) var(--ease-out-3),
    border-color var(--duration-fast) var(--ease-out-3),
    box-shadow var(--duration-fast) var(--ease-out-3);
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Primary (filled) ---- */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
}

.btn--primary:active {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-1);
}

/* ---- Outline ---- */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

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

.btn--outline:active {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--text-inverse);
}

/* ---- Ghost ---- */
.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
}

.btn--ghost:hover {
  background-color: var(--color-primary-light);
}

.btn--ghost:active {
  background-color: var(--color-primary-200);
}

/* ==========================================================================
   2. CARDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.card__image {
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

.card__header {
  padding: var(--space-sm) var(--space-md);
  border-block-end: 1px solid var(--border-default);
}

.card__body {
  padding: var(--space-md);
  flex: 1;
}

.card__footer {
  padding: var(--space-sm) var(--space-md);
  border-block-start: 1px solid var(--border-default);
}

/* ==========================================================================
   3. BADGES & TAGS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-6);
  line-height: 1;
  border-radius: var(--radius-round);
  white-space: nowrap;

  /* Default: neutral */
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.badge--primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.badge--accent {
  background-color: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.badge--success {
  background-color: var(--color-success-light);
  color: var(--color-success-dark);
}

.badge--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.badge--error {
  background-color: var(--color-error-light);
  color: var(--color-error-dark);
}

/* Tag — pill-shaped, slightly larger than badge, removable */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-5);
  line-height: var(--font-lineheight-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-round);
  background-color: var(--surface-elevated);
  color: var(--text-secondary);
}

/* ==========================================================================
   4. FORMS
   ========================================================================== */

/* ---- Form group — wrapper for label + input + helper ---- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.form-group + .form-group {
  margin-block-start: var(--space-sm);
}

/* ---- Label ---- */
.form-label {
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-6);
  color: var(--text-primary);
}

.form-label--required::after {
  content: " *";
  color: var(--color-error);
}

/* ---- Shared input base ---- */
.form-input,
.form-textarea,
.form-select {
  display: block;
  inline-size: 100%;
  padding: var(--space-2xs) var(--space-sm);
  min-block-size: 44px;
  font-family: inherit;
  font-size: var(--font-size-1);
  line-height: var(--font-lineheight-3);
  color: var(--text-primary);
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2);
  transition:
    border-color var(--duration-fast) var(--ease-out-3),
    box-shadow var(--duration-fast) var(--ease-out-3);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: var(--border-strong);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

/* ---- Textarea ---- */
.form-textarea {
  min-block-size: 120px;
  resize: vertical;
}

/* ---- Select ---- */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  padding-inline-end: var(--space-lg);
}

/* ---- Checkbox & Radio wrapper ---- */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: 44px;
  cursor: pointer;
}

.form-check + .form-check {
  margin-block-start: var(--space-3xs);
}

.form-checkbox,
.form-radio {
  appearance: none;
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  border: 2px solid var(--border-strong);
  background-color: var(--surface-elevated);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out-3),
    border-color var(--duration-fast) var(--ease-out-3);
}

.form-checkbox {
  border-radius: var(--radius-1);
}

.form-radio {
  border-radius: var(--radius-round);
}

.form-checkbox:checked,
.form-radio:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none'%3E%3Cpath d='M1 5.5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-checkbox:focus-visible,
.form-radio:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ---- Validation states ---- */
.form-input--error,
.form-textarea--error,
.form-select--error {
  border-color: var(--color-error);
}

.form-input--error:focus,
.form-textarea--error:focus,
.form-select--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
}

/* ---- Helper / error text ---- */
.form-helper {
  font-size: var(--font-size-0);
  color: var(--text-muted);
}

.form-error {
  font-size: var(--font-size-0);
  color: var(--color-error);
}

/* ==========================================================================
   5. SECTION
   ========================================================================== */

.section {
  padding-block: clamp(var(--space-xl), 8vw, var(--space-3xl));
}

/* ==========================================================================
   6. ALERTS
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-2);
  font-size: var(--font-size-1);
  line-height: var(--font-lineheight-3);

  /* Default: info */
  background-color: var(--color-info-light);
  color: var(--color-info-dark);
  border-inline-start: 4px solid var(--color-info);
}

.alert--success {
  background-color: var(--color-success-light);
  color: var(--color-success-dark);
  border-inline-start-color: var(--color-success);
}

.alert--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning-dark);
  border-inline-start-color: var(--color-warning);
}

.alert--error {
  background-color: var(--color-error-light);
  color: var(--color-error-dark);
  border-inline-start-color: var(--color-error);
}

/* ==========================================================================
   7. DIVIDER
   ========================================================================== */

.divider {
  border: none;
  border-block-start: 1px solid var(--border-default);
  margin-block: var(--space-lg);
}

.divider--strong {
  border-block-start-color: var(--border-strong);
}

.divider--spacious {
  margin-block: var(--space-xl);
}