/* Shared brand tokens/components for GPHart's charcoal/copper pages:
   index.html, admin.html, enquire.html. Page-specific layout stays inline. */

:root {
  --charcoal: #1E2023;
  --charcoal-soft: #2A2D31;
  --copper: #B8703F;
  --copper-bright: #D68A54;
  --plaster: #F2EFE9;
  --plaster-dim: #C9C4BA;
  --line: rgba(242,239,233,0.14);
  --error: #D6684F;
}

.mono {
  font-family: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--copper-bright);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1.2em;
}
.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--copper);
}

.cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9em 1.8em;
  background: var(--copper);
  color: var(--charcoal);
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
}
.cta:hover, .cta:focus-visible { background: var(--copper-bright); }
.cta:focus-visible { outline: 2px solid var(--plaster); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .cta { transition: background 0.15s ease, transform 0.15s ease; }
  .cta:hover { transform: translateY(-1px); }
}