/**
 * Retro Contact Form — "retro" variant
 *
 * Cream paper store wall; the form is a memo pad. Warm paper with a brand margin
 * edge, faint ruled lines, underline fill-in fields, a ruled message area, and a
 * brand price-tag Send button (the hero CTA / shows / newsletter shape).
 *
 * CONTRAST: heading/labels/fields are ink on paper/white. The brand shows through
 * the kicker, the pad's margin edge, the focus rings, and the price-tag button
 * edge + hole. No body text on a raw --template fill — legible at any brand color.
 */

.retro-contact[data-variant="retro"] {
  --r-paper:   #f3ecdb;
  --r-ink:     #2a2018;
  --r-white:   #fcfaf3;
  --r-deep:    color-mix(in srgb, var(--template) 40%, #160f06);
  --r-success: #3f6b4e;
  --r-error:   #a83a2b;

  color: var(--r-ink);
  background-color: var(--r-paper);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 4px);
}

/* memo pad: warm paper, brand margin edge, faint ruled lines, soft shadow */
.retro-contact[data-variant="retro"] .retro-contact__pad {
  background-color: var(--r-white);
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 1.69rem,
    color-mix(in srgb, var(--r-ink) 8%, transparent) 1.69rem 1.7rem
  );
  border: 2px solid var(--r-ink);
  border-left: 0.5rem solid var(--template);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(20, 12, 4, 0.14);
}

/* ---- header ---- */

.retro-contact[data-variant="retro"] .retro-contact__kicker {
  color: var(--r-deep);
}

.retro-contact[data-variant="retro"] .retro-contact__heading {
  color: var(--r-ink);
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--template) 35%, transparent);
}

.retro-contact[data-variant="retro"] .retro-contact__desc {
  color: color-mix(in srgb, var(--r-ink) 78%, transparent);
}

/* ---- fields ---- */

.retro-contact[data-variant="retro"] .retro-contact__label {
  color: var(--r-deep);
}

.retro-contact[data-variant="retro"] .retro-contact__input {
  color: var(--r-ink);
  border-bottom-color: var(--r-ink);
}

.retro-contact[data-variant="retro"] .retro-contact__textarea {
  color: var(--r-ink);
  border-color: var(--r-ink);
  background-color: color-mix(in srgb, var(--r-white) 70%, transparent);
}

.retro-contact[data-variant="retro"] .retro-contact__input::placeholder,
.retro-contact[data-variant="retro"] .retro-contact__textarea::placeholder {
  color: color-mix(in srgb, var(--r-ink) 42%, transparent);
}

.retro-contact[data-variant="retro"] .retro-contact__input:focus-visible,
.retro-contact[data-variant="retro"] .retro-contact__textarea:focus-visible {
  outline-color: var(--template);
}

/* ---- Send price-tag ---- */

.retro-contact[data-variant="retro"] .retro-contact__cta {
  background-color: var(--r-paper);
  color: var(--r-ink);
  border: 2px solid var(--r-ink);
  border-left: 0.45rem solid var(--template);
}

.retro-contact[data-variant="retro"] .retro-contact__cta-hole {
  background-color: var(--template);
  border: 2px solid var(--r-ink);
}

/* ---- status ---- */

.retro-contact[data-variant="retro"] .retro-contact__status.is-success {
  color: var(--r-success);
  font-weight: 600;
}

.retro-contact[data-variant="retro"] .retro-contact__status.is-error {
  color: var(--r-error);
  font-weight: 600;
}