/**
 * Theme Kit — Components (Quant Memo / Quant Native style)
 */

/* Buttons — primary: quant-green bg, cream text */
.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  border-radius: 0.375rem;
  border: 1px solid var(--border-secondary);
  background: var(--cream);
  color: var(--near-black);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

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

.tk-btn-primary {
  background: var(--quant-green);
  border-color: var(--quant-green);
  color: var(--cream);
}

.tk-btn-primary:hover {
  background: var(--quant-green-light);
  border-color: var(--quant-green-light);
  color: var(--cream);
  text-decoration: none;
}

.tk-btn-outline {
  border-color: var(--border-secondary);
  color: var(--quant-green);
}

.tk-btn-outline:hover {
  background: rgba(45, 74, 62, 0.15);
  text-decoration: none;
}

/* Cards — cream bg, quant-green/15 border */
.tk-card {
  background: var(--cream);
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  padding: var(--space-6);
  transition: border-color 0.15s;
}

.tk-card:hover {
  border-color: rgba(45, 74, 62, 0.3);
}

.tk-card-title {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--near-black);
  margin-bottom: var(--space-2);
}

.tk-card-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Form — Quant Memo input style */
.tk-input,
.tk-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--near-black);
  background: rgba(237, 232, 220, 0.5);
  border: 1px solid var(--border-primary);
  border-radius: 0.375rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tk-input::placeholder,
.tk-textarea::placeholder {
  color: rgba(26, 25, 21, 0.5);
}

.tk-input:focus,
.tk-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
}

.tk-textarea {
  min-height: 6rem;
  resize: vertical;
}

.tk-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--near-black);
  margin-bottom: var(--space-1);
}

/* Layout */
.tk-container {
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .tk-container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

.tk-section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.tk-section-sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

/* Badge — quant-green/10 bg, quant-green text */
.tk-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--quant-green);
  background: rgba(45, 74, 62, 0.1);
  border: 1px solid var(--border-primary);
  border-radius: 0.25rem;
}

/* Inline link style (Quant Memo: bg quant-green/15, rounded) */
.tk-link-inline {
  color: var(--quant-green);
  background: rgba(45, 74, 62, 0.15);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 500;
}

.tk-link-inline:hover {
  text-decoration: underline;
}