/*
 * OneSend Common Components
 * 共通コンポーネントの基底スタイル（変数は variables.css を参照）
 * 編集時は .claude/skills/onesend-design-tokens/SKILL.md を参照すること
 *
 * クラス命名: .os-{component}[--{variant}]
 * 使用例: <button class="os-btn os-btn--primary">送信</button>
 */

/* ============================================================
 * Button
 * ============================================================ */
.os-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--os-spacing-xs);
  padding: var(--os-btn-padding-y) var(--os-btn-padding-x);
  border: 1px solid transparent;
  border-radius: var(--os-btn-radius);
  font-family: var(--os-font-family-base);
  font-size: var(--os-btn-font-size);
  font-weight: var(--os-btn-font-weight);
  line-height: var(--os-line-height-tight);
  text-decoration: none;
  cursor: pointer;
  transition: var(--os-btn-transition);
  user-select: none;
}

.os-btn:focus-visible {
  outline: none;
  box-shadow: var(--os-shadow-focus);
}

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

/* --- Primary --- */
.os-btn--primary {
  background-color: var(--os-btn-primary-bg);
  color: var(--os-btn-primary-text);
  border-color: var(--os-btn-primary-bg);
}

.os-btn--primary:hover:not(:disabled) {
  background-color: var(--os-btn-primary-hover-bg);
  border-color: var(--os-btn-primary-hover-bg);
}

.os-btn--primary:active:not(:disabled) {
  background-color: var(--os-btn-primary-hover-bg);
}

/* --- Secondary (outline) --- */
.os-btn--secondary {
  background-color: var(--os-btn-secondary-bg);
  color: var(--os-btn-secondary-text);
  border-color: var(--os-btn-secondary-border);
}

.os-btn--secondary:hover:not(:disabled) {
  background-color: var(--os-color-primary-light);
}

.os-btn--secondary:active:not(:disabled) {
  background-color: var(--os-color-primary-light);
}

/* --- Danger --- */
.os-btn--danger {
  background-color: var(--os-btn-danger-bg);
  color: var(--os-btn-danger-text);
  border-color: var(--os-btn-danger-bg);
}

.os-btn--danger:hover:not(:disabled) {
  filter: brightness(0.92);
}

/* ============================================================
 * Input
 * ============================================================ */
.os-input {
  display: block;
  width: 100%;
  padding: var(--os-input-padding-y) var(--os-input-padding-x);
  background-color: var(--os-input-bg);
  border: var(--os-input-border);
  border-radius: var(--os-input-radius);
  font-family: var(--os-font-family-base);
  font-size: var(--os-input-font-size);
  color: var(--os-color-text-primary);
  line-height: var(--os-line-height-base);
  transition: border-color var(--os-transition-fast), box-shadow var(--os-transition-fast);
  box-sizing: border-box;
}

.os-input::placeholder {
  color: var(--os-input-placeholder);
}

.os-input:focus {
  outline: none;
  border: var(--os-input-border-focus);
  box-shadow: var(--os-shadow-focus);
}

.os-input:disabled {
  background-color: var(--os-color-gray-100);
  color: var(--os-color-gray-500);
  cursor: not-allowed;
}

/* ============================================================
 * Card
 * ============================================================ */
.os-card {
  background-color: var(--os-card-bg);
  border: var(--os-card-border);
  border-radius: var(--os-card-radius);
  box-shadow: var(--os-card-shadow);
  padding: var(--os-card-padding);
}

/* ============================================================
 * Table
 * ============================================================ */
.os-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--os-font-family-base);
  font-size: var(--os-font-size-base);
  color: var(--os-color-text-primary);
}

.os-table th,
.os-table td {
  padding: var(--os-table-cell-padding-y) var(--os-table-cell-padding-x);
  border-bottom: var(--os-table-border);
  text-align: left;
  vertical-align: middle;
}

.os-table th {
  background-color: var(--os-table-header-bg);
  color: var(--os-table-header-text);
  font-weight: var(--os-table-header-weight);
}

.os-table tbody tr:hover {
  background-color: var(--os-table-row-hover);
}

/* ============================================================
 * Dropzone (drag & drop area)
 * ============================================================ */
.os-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--os-dropzone-padding);
  background-color: var(--os-dropzone-bg);
  border: var(--os-dropzone-border);
  border-radius: var(--os-dropzone-radius);
  color: var(--os-color-text-secondary);
  transition: background-color var(--os-transition-fast), border-color var(--os-transition-fast);
}

.os-dropzone.is-active,
.os-dropzone:hover {
  background-color: var(--os-dropzone-bg-active);
  border: var(--os-dropzone-border-active);
}