/* ==========================================================================
   Theme: Technical & Precise
   Visible grid, sharp corners, bold uppercase headings, monospace accents
   ========================================================================== */

:root {
  /* Technical theme - sharp and precise */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;

  /* Hard shadows */
  --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-lg: 6px 6px 0 rgba(0, 0, 0, 0.12);
}

/* Typography - bold and structured */
h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

/* Monospace accents */
.tag,
.project-card__client,
.service-card__title {
  font-family: var(--font-mono);
}

/* Grid background on sections */
.section--smoke {
  background-color: var(--color-smoke);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Buttons - sharp and bold */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.btn--primary {
  background-color: var(--color-black);
  border-color: var(--color-black);
}

.btn--primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--color-black);
}

.btn--outline:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--color-black);
}

/* Cards - hard shadow hover */
.card,
.project-card {
  border-radius: var(--radius-sm);
  box-shadow: none;
  border: 2px solid var(--color-black);
}

.card:hover,
.project-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0 var(--color-black);
}

/* Service cards - technical */
.service-card {
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background-color: var(--color-white);
}

.service-card:hover {
  border-color: var(--color-black);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--color-black);
}

/* Navigation - bold */
.nav {
  border-bottom: 2px solid var(--color-black);
}

.nav__link {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Hero - structured */
.hero__title {
  letter-spacing: 0.02em;
}

.hero__tagline {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
}

/* Section headers - numbered look */
.section-header__title {
  position: relative;
  display: inline-block;
}

.section-header__title::before {
  content: "//";
  margin-right: var(--space-2);
  color: var(--color-accent);
  font-family: var(--font-mono);
}

/* Tags - technical style */
.tag {
  border-radius: 0;
  border: 1px solid var(--color-black);
  background-color: transparent;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Footer - solid */
.footer {
  border-top: 2px solid var(--color-white);
}

/* Value cards */
.value-card__title {
  font-family: var(--font-mono);
}

/* Contact section */
.contact__title::before {
  content: ">>> ";
  font-family: var(--font-mono);
  color: var(--color-accent);
}

/* Links - underline style */
.card__link,
.contact__email-link {
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.card__link:hover,
.contact__email-link:hover {
  border-bottom-color: var(--color-accent);
}