/* =========================================================
   Minimal custom CSS — everything else is handled by Tailwind
   ========================================================= */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Gradient text (not expressible as a single Tailwind utility) */
.gradient-text {
  background: linear-gradient(135deg, #93c5fd 0%, #2E75B6 45%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dot-grid hero background */
.dot-grid {
  background-image: radial-gradient(circle, #475569 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---- Form validation states -------------------------------- */
.form-control.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.field-error {
  display: block;
  font-size: 0.8125rem;
  color: #ef4444;
  min-height: 1.125rem;
}

/* Form status banner */
.form-status {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.form-status--success {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
.form-status--error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* ---- Skill card tags (dark-themed, per-category colors) ---- */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  border: 1px solid transparent;
}

.tag--blue   { background: rgba(59,130,246,.12);  color: #93c5fd; border-color: rgba(59,130,246,.2);  }
.tag--emerald{ background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(16,185,129,.2); }
.tag--purple { background: rgba(168,85,247,.12);  color: #d8b4fe; border-color: rgba(168,85,247,.2);  }
.tag--orange { background: rgba(249,115,22,.12);  color: #fdba74; border-color: rgba(249,115,22,.2);  }
.tag--red    { background: rgba(239,68,68,.12);   color: #fca5a5; border-color: rgba(239,68,68,.2);   }
.tag--slate  { background: rgba(148,163,184,.10); color: #94a3b8; border-color: rgba(148,163,184,.15);}

/* Focus visible ring (global override) */
:focus-visible {
  outline: 2px solid #2E75B6;
  outline-offset: 3px;
  border-radius: 4px;
}