/* Perfect Stride Equestrian — dark plum theme (production).
   Palette matched to show.perfectstrideequestrian.com:
   bg radial #3a1a4c → #160819, cream text #f4efe6, gold #a07f33 / #e6cd8f.
   Load AFTER styles.css. */

:root {
  --cream: #160819;            /* page background: near-black plum */
  --cream-deep: #241030;       /* tinted band (programs, strip) */
  --ink: #f4efe6;              /* primary text: warm cream */
  --ink-soft: #cfc4b0;         /* secondary text */
  --faint: #b8b0a0;
  --saddle: #c9a85c;           /* accent gold (lightened for contrast on plum) */
  --gold: #c9a85c;
  --line: rgba(160, 127, 51, 0.32);
}

body {
  background: radial-gradient(120% 90% at 50% 0%, #3a1a4c, #160819 60%) fixed var(--cream);
}

/* nav */
.nav { background: rgba(22, 8, 25, 0.82); }

/* buttons keep their intent regardless of the inverted vars */
.btn-dark { background: linear-gradient(180deg, #e6cd8f, #a07f33); color: #160819; }
.btn-dark:hover { background: #a07f33; }
.btn-cream { background: #f4efe6; color: #160819; }
.btn-cream:hover { background: #fff; }

/* hero scrim a touch deeper so cream text holds */
.hero-media::after {
  background:
    linear-gradient(180deg, rgba(22, 8, 25, 0.3) 0%, rgba(22, 8, 25, 0.08) 35%, rgba(22, 8, 25, 0.74) 100%),
    linear-gradient(90deg, rgba(22, 8, 25, 0.42), transparent 55%);
}

/* results: inverted — warm cream panel so it stands out against the plum page */
.results { background: #f4efe6; color: #241030; }
.results .eyebrow { color: #8d6c2b; }
.r-item { border-bottom-color: rgba(36, 16, 48, 0.18); }
.r-item p { color: #4d4060; }
.r-photo figcaption { color: #99887b; }
.results .r-mark { opacity: 0.12; }

/* live panel: royal plum to echo the show app's glow */
.live .panel { background: #3a1a4c; }

/* footer: void. Set an explicit light text colour — the plum theme inverts --cream to
   near-black, which the footer's brand text would otherwise inherit on the dark background. */
footer { background: #0f0512; color: #f4efe6; }

/* crawler: match the show app chrome */
.crawler { background: rgba(15, 5, 18, 0.96); border-top-color: rgba(160, 127, 51, 0.45); }
.crawler-label { background: linear-gradient(180deg, #e6cd8f, #a07f33); color: #160819; }
/* base theme sets the item text to var(--cream); the plum theme inverts --cream to near-black,
   so name text would render dark-on-plum. Pin it back to warm cream. */
.crawler-item { color: #f4efe6; }