/**
 * Oliv global tokens + shared CTAs
 */
:root {
  --oliv-gold: var(--clr-brand-gold);
  --oliv-gold-dark: var(--clr-brand-gold-dark);
  --oliv-bg: var(--clr-brand-warm-dark);
  /* Sparing variation from flat charcoal — use on alternating sections */
  --oliv-bg-alt: var(--clr-neutral-900);
  --oliv-bg-alt2: var(--clr-neutral-900);
  --oliv-text: var(--clr-brand-off-white);
}

.font-lora,
.font-lora-italic {
  font-family: var(--ff-display);
}

a.oliv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 12px 22px;
  line-height: 1.25;
  transition:
    background 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    backdrop-filter 0.28s ease;
}

a.oliv-btn--primary {
  background: linear-gradient(135deg, var(--oliv-gold) 0%, var(--oliv-gold-dark) 100%);
  color: var(--clr-brand-warm-dark);
  border: 1px solid transparent;
}

a.oliv-btn--primary:hover {
  background: linear-gradient(135deg, var(--oliv-gold-dark) 0%, var(--clr-brand-gold-dark) 100%);
  color: var(--clr-white);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--clr-brand-gold-dark) 40%, transparent);
}

a.oliv-btn--ghost {
  background: color-mix(in srgb, var(--clr-white) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--clr-white) 22%, transparent);
  color: var(--clr-white);
}

a.oliv-btn--ghost:hover {
  background: color-mix(in srgb, var(--clr-black) 50%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: color-mix(in srgb, var(--clr-white) 14%, transparent);
  color: var(--clr-white);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--clr-black) 45%, transparent);
}