/**
 * Custom Component Styles
 * Extends Tailwind with additional component-specific styles
 */

/* Font Configuration */
body {
  font-family: 'Manrope', sans-serif;
}

.font-manrope {
  font-family: 'Manrope', sans-serif;
}

.font-mono {
  font-family: 'DM Mono', monospace;
}

/* Technology Pills - Reusable component */
.tech-pill {
  border: 1px solid rgb(186 230 253);
  border-radius: 9999px;
  padding: 0.55rem 0.8rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: rgb(3 105 161);
  background: rgb(240 249 255);
}

/* Statistics Cell - Dashboard component */
.stat-cell {
  display: flex;
  min-height: 8.5rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.25rem;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(3 105 161);
}

/* Filter Buttons */
.filter-button {
  border: 1px solid rgb(186 230 253);
  border-radius: 9999px;
  padding: 0.6rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgb(3 105 161);
  background: rgb(255 255 255);
  transition: all 0.2s;
}

.filter-button:hover,
.filter-button:focus-visible {
  border-color: rgb(14 165 233);
  color: rgb(2 132 199);
  background: rgb(240 249 255);
  outline: none;
}

.filter-active {
  border-color: rgb(14 165 233);
  background: rgb(14 165 233);
  color: rgb(255 255 255);
}

.dark .filter-button {
  border-color: rgb(231 229 228 / 0.15);
  color: rgb(168 162 158);
  background: transparent;
}

.dark .filter-button:hover {
  border-color: rgb(14 165 233);
  color: rgb(2 132 199);
}

.dark .filter-active {
  border-color: rgb(3, 3, 3);
  background: rgb(2 132 199);
  color: rgb(0, 0, 0);
}

/* Technology Tags - In-card component */
.tech-tag {
  border-radius: 9999px;
  background: rgb(240 249 255);
  border: 1px solid rgb(186 230 253 / 0.9);
  padding: 0.35rem 0.6rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  color: rgb(3 105 161);
}

.dark .tech-tag {
  background: rgb(39 39 42);
  border-color: transparent;
  color: rgb(212 212 216);
}

/* Action Links - Card footer links */
.action-link {
  color: rgb(3 105 161);
  transition: color 0.2s;
}

.action-link:hover,
.action-link:focus-visible {
  color: rgb(2 132 199);
  outline: none;
}

.action-link-primary {
  color: rgb(2 132 199);
}

/* Project Cards - Performance optimization */
.project-card {
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

/* Contact section */
.contact-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(12 74 110);
}

.dark .contact-label {
  color: rgb(214 211 209);
}

.contact-input {
  width: 100%;
  border: 1px solid rgb(186 230 253);
  border-radius: 0.75rem;
  background: rgb(255 255 255);
  padding: 0.85rem 1rem;
  color: rgb(12 74 110);
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}

.contact-input:focus {
  border-color: rgb(14 165 233);
  box-shadow: 0 0 0 3px rgb(14 165 233 / 0.18);
  outline: none;
}

.dark .contact-input {
  border-color: rgb(255 255 255 / 0.12);
  background: rgb(24 24 27 / 0.62);
  color: rgb(250 250 249);
}

.contact-input-error,
.contact-input-error:focus {
  border-color: rgb(239 68 68);
  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.14);
}

.contact-error {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: rgb(220 38 38);
}

.dark .contact-error {
  color: rgb(248 113 113);
}

.contact-status {
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-status-success {
  color: rgb(4 120 87);
}

.contact-status-error {
  color: rgb(220 38 38);
}

.dark .contact-status-success {
  color: rgb(52 211 153);
}

.dark .contact-status-error {
  color: rgb(248 113 113);
}

.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(186 230 253);
  border-radius: 0.75rem;
  background: rgb(255 255 255);
  padding: 0.75rem 1rem;
  font-weight: 700;
  color: rgb(3 105 161);
  transition:
    border-color 0.2s,
    background-color 0.2s,
    box-shadow 0.2s,
    color 0.2s;
}

.contact-link:hover,
.contact-link:focus-visible {
  border-color: rgb(14 165 233 / 0.8);
  background: rgb(14 165 233 / 0.1);
  box-shadow: 0 0 12px rgb(14 165 233 / 0.35);
  color: rgb(2 132 199);
  outline: none;
}

.contact-link-accent {
  border-color: rgb(14 165 233 / 0.45);
  color: rgb(2 132 199);
}

.dark .contact-link {
  border-color: rgb(255 255 255 / 0.1);
}

.dark .contact-link:hover,
.dark .contact-link:focus-visible {
  border-color: rgb(56 189 248 / 0.8);
  background: rgb(56 189 248 / 0.1);
  box-shadow: 0 0 12px rgb(56 189 248 / 0.35);
  color: rgb(56 189 248);
}

.dark .contact-link-accent {
  border-color: rgb(56 189 248 / 0.45);
  color: rgb(56 189 248);
}

.contact-honeypot {
  display: none;
}

/* Subtle Grain Background Texture */
.grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

/* Reduced Motion Support - Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Remove default scrollbar styling for modal content */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}