@config "../../../tailwind.config.js";
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

/* Home page "Groups include" links render as tags, and "View all activities"
   as a solid lozenge, matching the original site. Targets the Markdown output
   so the list stays editable as content. */
.home-body a[href*="regular-activities"],
.home-body a[href$="/booking"] {
  @apply mr-2 mb-2 inline-block rounded-full border border-teal-700/30 bg-teal-700/10 px-3 py-1 text-sm font-medium text-teal-800 no-underline transition-colors hover:bg-teal-700/20 dark:border-teal-300/40 dark:bg-teal-300/10 dark:text-teal-200 dark:hover:bg-teal-300/20;
}
.home-body a[href$="regular-activities"],
.home-body a[href$="regular-activities/"],
.home-body a[href$="/booking"] {
  @apply mt-2 border-teal-700 bg-teal-700 px-5 py-2.5 font-bold text-white hover:bg-teal-800 dark:border-teal-300 dark:bg-teal-300 dark:text-teal-950 dark:hover:bg-teal-200;
}
.home-body a[href$="regular-activities"]::after,
.home-body a[href$="regular-activities/"]::after,
.home-body a[href$="/booking"]::after {
  content: " →";
}

/* Prism.js token colors, matched to the site's stone/teal palette and adapted
   to light/dark mode the same way the rest of the site is (prefers-color-scheme). */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--color-stone-500);
  font-style: italic;
}
.token.punctuation,
.token.operator {
  color: var(--color-stone-500);
}
.token.property,
.token.attr-name,
.token.selector {
  color: var(--color-teal-800);
}
.token.keyword,
.token.tag,
.token.boolean,
.token.important,
.token.atrule {
  color: var(--color-teal-700);
  font-weight: 600;
}
.token.string,
.token.attr-value,
.token.char {
  color: var(--color-emerald-800);
}
.token.number,
.token.constant,
.token.symbol {
  color: var(--color-amber-800);
}
.token.function,
.token.class-name {
  color: var(--color-stone-900);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: var(--color-stone-400);
  }
  .token.punctuation,
  .token.operator {
    color: var(--color-stone-400);
  }
  .token.property,
  .token.attr-name,
  .token.selector {
    color: var(--color-teal-200);
  }
  .token.keyword,
  .token.tag,
  .token.boolean,
  .token.important,
  .token.atrule {
    color: var(--color-teal-300);
  }
  .token.string,
  .token.attr-value,
  .token.char {
    color: var(--color-emerald-200);
  }
  .token.number,
  .token.constant,
  .token.symbol {
    color: var(--color-amber-400);
  }
  .token.function,
  .token.class-name {
    color: var(--color-stone-100);
  }
}