/* ================================================================
   THE LOGICAL ARCHITECT — Design System Stylesheet
   Typography: Space Grotesk (Headline/Label) + Inter (Body)
   Philosophy: 0px radius · Surgical Red · Tonal Layering
   ================================================================ */

/* --- Base Reset & Body --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #f9f9f9;
  color: #1a1c1c;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: #bc0100;
  color: #ffffff;
}

/* --- Responsive Media --- */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Material Symbols --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* --- Utility Classes --- */
.mono {
  font-family: 'Space Grotesk', monospace;
}

.surgical-red {
  color: #FF0000;
}

.bg-surgical-red {
  background-color: #FF0000;
}

/* --- Custom Scrollbar --- */
.code-scroll::-webkit-scrollbar {
  height: 4px;
}

.code-scroll::-webkit-scrollbar-thumb {
  background: #BC0100;
}

.code-scroll::-webkit-scrollbar-track {
  background: #e8e8e8;
}

/* --- Technical Grid Pattern --- */
.technical-grid {
  background-image: radial-gradient(#e2e2e2 1px, transparent 1px);
  background-size: 20px 20px;
}

/* --- Pulse Animation for Status Dots --- */
@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.pulse-dot {
  animation: pulse-red 2s ease-in-out infinite;
}

/* --- Smooth page transitions --- */
a {
  transition: color 75ms linear;
}

/* --- Ghost border utility --- */
.ghost-border {
  border-color: rgba(235, 187, 180, 0.15);
}