@import url('https://fonts.googleapis.com/css2?family=Hubot+Sans:ital,wght@0,400;0,800;0,900;1,400;1,800&family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Kode+Mono:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter Tight', sans-serif;
  color: #16181D;
  background-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Hubot Sans', sans-serif;
}

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

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Base custom styles not handled by Tailwind */
.bg-ink { background-color: #16181D; }
.text-ink { color: #16181D; }
.bg-steel-wash { background-color: #EDEFF1; }
.text-steel-caption { color: #6B7178; }
.text-steel-caption-wash { color: #5C636B; }
.border-steel-brushed { border-color: #8A9099; }
.text-steel-brushed { color: #8A9099; }
.bg-red-sign { background-color: #E11B22; }
.text-red-sign { color: #E11B22; }
.bg-red-cta { background-color: #C8161D; }
.text-red-cta { color: #C8161D; }
.text-red-ink { color: #B71419; }
.text-red-light { color: #F26A6E; }

/* The Door Diagram - CSS/SVG */
.door-diagram {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.diagram-svg {
  width: 100%;
  height: auto;
  display: block;
}

.diagram-part {
  cursor: default;
  transition: all 0.2s ease;
}

.diagram-part:hover .part-highlight {
  stroke: #E11B22;
  stroke-width: 3;
}

.diagram-part:hover .part-label-text {
  fill: #E11B22;
  font-weight: 700;
}

.diagram-label {
  font-family: 'Kode Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  fill: #16181D;
}

.diagram-line {
  stroke: #8A9099;
  stroke-width: 1.5;
  stroke-dasharray: 2, 2;
}

/* Compact Diagram variant for hero */
.diagram-compact {
  max-width: 400px;
}

.hero-track-rail {
  background-image: radial-gradient(#8A9099 2px, transparent 2px);
  background-size: 20px 20px;
  background-position: center;
  width: 20px;
}

.panel-bevels {
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 49px,
    rgba(138, 144, 153, 0.15) 50px
  );
}

/* Hide preview ribbon if dismissed */
.preview-ribbon.dismissed {
  display: none;
}