/* ==========================================================================
   Orcheum · Input Field (label + text input)
   Source of truth: Figma node 404:4935 / 47:4335 (Label + Field).
   Reusable — namespaced under .oc-field.
   ========================================================================== */

.oc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);            /* gap-2 · 8px */
  width: 100%;
}

/* Label — Figma 538:2454/47:4336 · Inter (sans) Medium 14px */
.oc-field__label {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);      /* 14px */
  line-height: var(--leading-5);  /* 20px */
  color: var(--color-foreground);
}

/* Field wrapper — Figma 538:2454;47:4339 · subtle fill, 1px warm border, 6px radius */
.oc-field__control {
  width: 100%;
  /* Figma's field is 40px tall: 10 + 20 line + 10, with the 1px stroke drawn
     INSIDE the frame. A CSS border sits outside the padding box, so the same
     numbers build a 42px control — 9px absorbs the two border pixels and lands
     the field on 40 exactly. */
  padding: 9px var(--space-3);                /* 9px 12px — see above */
  background: var(--color-field-bg);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-sm);            /* 6px → uses radius-md below */
  border-radius: 6px;                         /* radius/radius-md */
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-sm);                  /* 14px */
  line-height: var(--leading-5);              /* 20px */
  color: var(--color-foreground);
  transition: border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

/* Placeholder — Figma 538:2454;47:4340 */
.oc-field__control::placeholder {
  color: var(--color-field-placeholder);      /* #86807b */
  opacity: 1;
}

.oc-field__control:focus-visible {
  outline: none;
  border-color: var(--color-foreground);
  box-shadow: 0 0 0 3px rgba(36, 37, 45, 0.12);
}