/* Trailpost brand theme (matches the TpT store banner): deep plum + dot grid,
   cream surfaces, gold / coral / teal accents, Lora headings, Poppins body.
   Loaded after styles.css and overrides its variables and a few components. */

:root {
  --plum: #21193d;
  --plum-2: #2e2160;
  --plum-3: #3b2a78;
  --cream: #f7f1e8;
  --cream-2: #efe6d8;
  --gold: #f2b441;
  --gold-deep: #d99a1f;
  --coral: #e76f51;
  --teal: #2a9d8f;
  --violet: #7b5cc4;

  --ink: #1f1838;
  --ink-soft: #5a5273;
  --paper: var(--plum);
  --paper-deep: var(--plum-2);
  --surface: var(--cream);
  --line: rgba(255, 255, 255, 0.14);
  --accent: var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-text: var(--ink);
  --forest: var(--gold);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --font-display: "Lora", Georgia, serif;
  --font-body: "Poppins", "Figtree", system-ui, sans-serif;
  --radius: 18px;
}

body {
  color: var(--cream);
  background:
    radial-gradient(rgba(255, 255, 255, 0.11) 1.2px, transparent 1.6px) 0 0 / 28px 28px,
    radial-gradient(900px 500px at 85% 0%, var(--plum-3), transparent 60%),
    linear-gradient(100deg, var(--plum) 0%, var(--plum-2) 100%);
  background-attachment: fixed;
}

a { color: var(--gold); }
a:hover { color: #ffd077; }

/* Header */
.site-header {
  background: rgba(33, 25, 61, 0.82);
  border-bottom: 1px solid var(--line);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.logo img { width: 34px; height: 34px; border-radius: 8px; }
.logo .dot { color: var(--gold); margin-left: -0.55rem; }
.site-nav a { color: rgba(247, 241, 232, 0.78); }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--cream); }
.nav-toggle { color: var(--cream); border-color: var(--line); }
@media (max-width: 720px) { .site-nav { background: var(--plum-2); } }

/* Type on the dark ground */
h1, h2 { color: var(--cream); }
.eyebrow, .work-label, .meta { color: var(--gold); }
.lede, .section-lede, .intro, .intro p, .also-grid p, .steps p, .jobs li, .edu p, .where, .site-footer {
  color: rgba(247, 241, 232, 0.8);
}
.when { color: var(--gold); }
.site-footer { border-top-color: var(--line); }
.site-footer a { color: var(--gold); }

/* Cards: cream on plum, ink text inside */
.course-card, .also-grid article, .skill-grid article, .steps li, .jobs article, .edu, .feature-split, .support-band {
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
}
.course-card h3, .also-grid h3, .skill-grid h3, .steps h3, .jobs h3, .edu h3, .support-band h2 { color: var(--ink); }
.course-body p, .also-grid p, .skill-grid li, .steps p, .jobs li, .edu p, .where, .support-band p { color: var(--ink-soft); }
.steps h3::before { color: var(--coral); }
.chips li { background: var(--cream-2); border-color: transparent; color: var(--ink); }
.eval-note { background: var(--cream); color: var(--ink-soft); border-left-color: var(--coral); }
.eval-note strong { color: var(--ink); }

/* Buttons */
.btn.primary { background: var(--gold); color: var(--ink); }
.btn.primary:hover { background: var(--gold-deep); color: var(--ink); }
.btn.ghost { background: transparent; border-color: rgba(31, 24, 56, 0.25); color: var(--ink); }
.course-body .btn.ghost:hover { border-color: var(--ink); }
.hero .btn.ghost { border-color: var(--line); color: var(--cream); }
.hero .btn.ghost:hover { border-color: var(--cream); }
.btn[aria-disabled="true"] { background: var(--cream-2); color: var(--ink-soft); }
.btn:focus-visible, .logo:focus-visible, .site-nav a:focus-visible { outline-color: var(--gold); }

/* Store page bits */
.filters button { background: transparent; color: var(--cream); border-color: var(--line); }
.filters button[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.price { color: var(--ink); }
.price.free { color: var(--teal); }
.tiny, .empty { color: rgba(247, 241, 232, 0.7); }
.price-row .tiny { color: var(--ink-soft); }
.contact-list a { color: var(--gold); }

/* Banner strip for the store hero */
.brand-banner { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 1.5rem; }