/* Histers Historia — brand tokens */
:root {
  /* Color */
  --hh-navy: #1B2838;
  --hh-navy-deep: #121A24;
  --hh-parchment: #F4E8D0;
  --hh-parchment-dim: #E8D9B8;
  --hh-copper: #C17F59;
  --hh-copper-bright: #D4926A;
  --hh-teal: #2A9D8F;
  --hh-teal-glow: #3DB8A8;
  --hh-ink: #0D0D0D;
  --hh-muted: #6B7B8C;
  --hh-white: #FAF6EE;
  --hh-danger: #B85C4A;

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Radii & motion */
  --hh-radius-chip: 8px;
  --hh-radius-card: 12px;
  --hh-radius-pin: 50%;
  --hh-fork-ms: 400ms;
  --hh-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Surfaces */
  --hh-scrim: rgba(27, 40, 56, 0.78);
  --hh-card-border: rgba(244, 232, 208, 0.14);
  --hh-glow-teal: 0 0 24px rgba(42, 157, 143, 0.45);
  --hh-glow-copper: 0 0 20px rgba(193, 127, 89, 0.4);
}

/* Utility helpers */
.hh-bg-navy { background: var(--hh-navy); color: var(--hh-parchment); }
.hh-bg-parchment { background: var(--hh-parchment); color: var(--hh-ink); }
.hh-text-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.hh-text-ui { font-family: var(--font-ui); }
.hh-text-mono { font-family: var(--font-mono); }
.hh-chip {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--hh-radius-chip);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--hh-card-border);
}
.hh-chip-active {
  border-color: var(--hh-copper);
  box-shadow: inset 0 0 0 1px var(--hh-copper);
}
.hh-chip-active::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hh-teal);
  margin-right: 0.4rem;
  vertical-align: middle;
}
.hh-cta {
  background: var(--hh-copper);
  color: var(--hh-parchment);
  font-family: var(--font-ui);
  font-weight: 600;
  border: none;
  border-radius: var(--hh-radius-chip);
  padding: 0.65rem 1.1rem;
}
.hh-link { color: var(--hh-teal); }
/* Motion utilities (full keyframes live in motion.css) */
.hh-motion-in { animation: hh-card-in 0.45s var(--hh-ease) both; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}