/* ───────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.contact.form
   Version: 1.0.0 | Genesis-Final • Tokenized • Responsive • BEM-Locked
   Classification: Atom | Form | Contact
   Maintainer: DΛREΛKT_ UI TEAM
   ─────────────────────────────────────────────────────────────────────────────── */

@layer atoms {

  /* ─── Tokens ─────────────────────────────────────────────────────────────── */
  :root {
    --ui-contact-form-accent:   var(--theme-accent, #005cff);
    --ui-contact-form-radius:   8px;
    --ui-contact-form-error:    var(--theme-error, #e53935);
    --ui-contact-form-success:  var(--theme-success, #2e7d32);

    --ui-contact-form-gap:      20px;
    --ui-contact-form-field-gap: 6px;
    --ui-contact-form-pad:      14px 16px;

    --ui-contact-form-bg:       var(--theme-surface, #fff);
    --ui-contact-form-border:   var(--theme-border, #d0d0d0);
    --ui-contact-form-fg:       var(--theme-text, #1a1a1a);
    --ui-contact-form-label-fg: var(--theme-text-secondary, #444);

    --ui-contact-form-btn-fg:   var(--theme-text-inverse, #fff);
    --ui-contact-form-btn-bg:   var(--ui-contact-form-accent);
    --ui-contact-form-btn-hover: var(--theme-accent-hover, #0047d9);
  }

  /* ─── Wrap ───────────────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"].ui-contact-form__wrap {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* ─── Title ──────────────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__title {
    font-family: var(--font-heading, inherit);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--ui-contact-form-fg);
    margin: 0 0 8px 0;
    line-height: 1.3;
  }

  /* ─── Description ────────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__desc {
    font-family: var(--font-body, inherit);
    font-size: 1rem;
    color: var(--ui-contact-form-label-fg);
    margin: 0 0 var(--ui-contact-form-gap) 0;
    line-height: 1.5;
  }

  /* ─── Form ───────────────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form {
    display: grid;
    gap: var(--ui-contact-form-gap);
    width: 100%;
  }

  /* ─── Field ──────────────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__field {
    display: grid;
    gap: var(--ui-contact-form-field-gap);
  }

  /* ─── Label ──────────────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__label {
    font-family: var(--font-body, inherit);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ui-contact-form-label-fg);
    line-height: 1.3;
  }

  /* ─── Input / Textarea / Select ──────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__input {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ui-contact-form-fg);
    background: var(--ui-contact-form-bg);
    border: 1px solid var(--ui-contact-form-border);
    border-radius: var(--ui-contact-form-radius);
    padding: var(--ui-contact-form-pad);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  [data-module="ui.contact.form"] .ui-contact-form__input::placeholder {
    color: var(--theme-text-muted, #999);
    opacity: 1;
  }

  [data-module="ui.contact.form"] .ui-contact-form__input:focus {
    outline: none;
    border-color: var(--ui-contact-form-accent);
    box-shadow: 0 0 0 3px rgba(0, 92, 255, 0.12);
  }

  /* ─── Textarea ───────────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__textarea {
    resize: vertical;
    min-height: 120px;
  }

  /* ─── Select ─────────────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__select {
    cursor: pointer;
  }

  /* ─── Error State ────────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__field--error .ui-contact-form__input {
    border-color: var(--ui-contact-form-error);
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
  }

  [data-module="ui.contact.form"] .ui-contact-form__error {
    font-size: 0.8rem;
    color: var(--ui-contact-form-error);
    line-height: 1.3;
    min-height: 0;
  }

  [data-module="ui.contact.form"] .ui-contact-form__error:empty {
    display: none;
  }

  /* ─── Submit Button ──────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__submit {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ui-contact-form-btn-fg);
    background: var(--ui-contact-form-btn-bg);
    border: none;
    border-radius: var(--ui-contact-form-radius);
    padding: 14px 32px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, opacity 0.2s ease;
    text-align: center;
    margin-top: 4px;
  }

  [data-module="ui.contact.form"] .ui-contact-form__submit:hover {
    background: var(--ui-contact-form-btn-hover);
  }

  [data-module="ui.contact.form"] .ui-contact-form__submit:focus-visible {
    outline: 2px solid var(--ui-contact-form-accent);
    outline-offset: 2px;
  }

  [data-module="ui.contact.form"] .ui-contact-form__submit:active {
    opacity: 0.9;
  }

  [data-module="ui.contact.form"] .ui-contact-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* ─── Status Messages ────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__status {
    font-size: 0.95rem;
    line-height: 1.4;
    min-height: 0;
    text-align: center;
  }

  [data-module="ui.contact.form"] .ui-contact-form__status:empty {
    display: none;
  }

  [data-module="ui.contact.form"] .ui-contact-form__status--success {
    color: var(--ui-contact-form-success);
    font-weight: 500;
  }

  [data-module="ui.contact.form"] .ui-contact-form__status--error {
    color: var(--ui-contact-form-error);
    font-weight: 500;
  }

  /* ─── Contact Info ───────────────────────────────────────────────────────── */
  [data-module="ui.contact.form"] .ui-contact-form__contact-info {
    font-size: 0.9rem;
    color: var(--ui-contact-form-label-fg);
    margin-top: var(--ui-contact-form-gap);
    text-align: center;
    line-height: 1.5;
  }

  /* ─── Responsive: Mobile ─────────────────────────────────────────────────── */
  @media (max-width: 640px) {
    [data-module="ui.contact.form"].ui-contact-form__wrap {
      max-width: 100%;
      padding: 0 16px;
    }

    [data-module="ui.contact.form"] .ui-contact-form__submit {
      width: 100%;
    }
  }

  /* ─── Reduced Motion ─────────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    [data-module="ui.contact.form"] .ui-contact-form__input,
    [data-module="ui.contact.form"] .ui-contact-form__submit {
      transition: none;
    }
  }
}