/* Input Components */

/* Notebook Input (Vintage) */
.input-notebook {
  width: 100%;
  padding: var(--space-sm) 0;
  font-family: 'EB Garamond', 'Libre Baskerville', serif;
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--ink-dark);
  background-color: var(--paper-aged);
  border: none;
  border-bottom: 1px solid var(--sepia-line);
  border-radius: 0;
  transition: border-color 0.3s ease;
}

.input-notebook:focus {
  outline: none;
  border-bottom-color: var(--ink-dark);
}

.input-notebook::placeholder {
  color: var(--ink-soft);
  font-style: italic;
}

/* Notebook Style Input (Border-bottom only) */
.input-notebook-style {
  width: 100%;
  padding: var(--space-sm) 0;
  font-family: 'EB Garamond', 'Libre Baskerville', serif;
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--ink-dark);
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--sepia-line);
  border-radius: 0;
  transition: border-color 0.3s ease;
}

.input-notebook-style:focus {
  outline: none;
  border-bottom-color: var(--ink-dark);
}

.input-notebook-style::placeholder {
  color: var(--ink-soft);
}

/* Modern Input (for UI forms) */
.input-modern {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro', sans-serif;
  font-size: var(--text-md);
  color: var(--ui-text);
  background-color: var(--ui-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  transition: border-color 0.2s ease;
}

.input-modern:focus {
  outline: none;
  border-color: var(--ui-accent);
}

.input-modern::placeholder {
  color: var(--ui-muted);
}