/* 57cards shared theme tokens + utilities.
   Loaded by both the homepage and the about page enqueuers, before
   page-specific stylesheets. Owns: color/spacing vars, kicker/cta utilities,
   focus visibility, screen-reader-text, prefers-reduced-motion. */

:root {
  --fifty7-ivory:       #f5f1e8;
  --fifty7-ivory-hi:    #faf7ef;
  --fifty7-charcoal:    #1a1a1a;
  --fifty7-gold:        #d4a64a;
  --fifty7-bronze:      #8b6a2e;
  --fifty7-dark:        #1a0f08;
  --fifty7-cream:       #f5ecd8;

  --fifty7-s-4:   4px;
  --fifty7-s-8:   8px;
  --fifty7-s-16:  16px;
  --fifty7-s-24:  24px;
  --fifty7-s-40:  40px;
  --fifty7-s-80:  80px;
  --fifty7-s-120: 120px;
}

.fifty7-kicker {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--fifty7-gold); font-weight: 600;
}
.fifty7-rule {
  width: 40px; height: 2px; background: var(--fifty7-gold);
  border: 0; margin: 0;
}

.fifty7-cta {
  display: inline-block; padding: 14px 28px;
  border: 1px solid var(--fifty7-gold); color: var(--fifty7-gold);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.fifty7-cta:hover { background: var(--fifty7-gold); color: var(--fifty7-dark); }
.fifty7-cta:focus-visible {
  outline: 2px solid var(--fifty7-gold); outline-offset: 3px;
}
.fifty7-cta--dark { border-color: var(--fifty7-charcoal); color: var(--fifty7-charcoal); }
.fifty7-cta--dark:hover { background: var(--fifty7-charcoal); color: var(--fifty7-ivory); }

.fifty7-home a:focus-visible,
.fifty7-home button:focus-visible,
.fifty7-home input:focus-visible,
.fifty7-about a:focus-visible,
.fifty7-about button:focus-visible,
.fifty7-about input:focus-visible {
  outline: 2px solid var(--fifty7-gold);
  outline-offset: 3px;
}

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .fifty7-home *, .fifty7-home *::before, .fifty7-home *::after,
  .fifty7-about *, .fifty7-about *::before, .fifty7-about *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}