/* Brand override — layer on top of Bootstrap, don't replace it */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --accent: #E8A33D;
  --accent-dark: #171308;
  --live: #5AAE7A;
  --dev: #8A8F98;
}

h1, h2, h3, .navbar-brand {
  font-family: 'Space Grotesk', sans-serif !important;
}

.mono, .status-line, .badge.bg-dark {
  font-family: 'JetBrains Mono', monospace !important;
}

/* Swap bootstrap green for the brand accent */
.btn-success, .bg-success {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-dark) !important;
}
.btn-success:hover {
  opacity: 0.9;
}
.btn-outline-success {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-outline-success:hover {
  background-color: var(--accent) !important;
  color: var(--accent-dark) !important;
}
.text-success {
  color: var(--accent) !important;
}

/* Status line — small systems-log style detail block on each project card */
.status-line {
  font-size: 0.78rem;
  background: rgba(232, 163, 61, 0.07);
  border: 1px solid rgba(232, 163, 61, 0.25);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 12px;
  color: #6b7280;
}
.status-line .k {
  color: var(--accent);
  font-weight: 600;
}
.status-line .live {
  color: var(--live);
  font-weight: 600;
}

/* Slightly tighter, more deliberate card style */
.card {
  border-radius: 10px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-2px);
}

/* Unified badge for flagship projects */
.badge-flagship {
  background: rgba(232, 163, 61, 0.12) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(232, 163, 61, 0.35);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Badge for in-development projects */
.badge-dev {
  background: rgba(138, 143, 152, 0.12) !important;
  color: var(--dev) !important;
  border: 1px solid rgba(138, 143, 152, 0.35);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Icon-based placeholder thumbnail for projects without a screenshot yet */
.thumb-placeholder {
  height: 220px;
  width: 100%;
  background: linear-gradient(135deg, rgba(232, 163, 61, 0.14), rgba(23, 19, 8, 0.06));
  border-bottom: 1px solid rgba(232, 163, 61, 0.2);
}
.thumb-placeholder.thumb-sm {
  height: 200px;
}
.thumb-placeholder.thumb-dev {
  background: linear-gradient(135deg, rgba(138, 143, 152, 0.14), rgba(23, 19, 8, 0.04));
  border-bottom: 1px solid rgba(138, 143, 152, 0.2);
}
.thumb-placeholder i {
  font-size: 3.2rem;
  color: var(--accent);
  opacity: 0.85;
}
.thumb-placeholder.thumb-dev i {
  color: var(--dev);
}