/* Global stylesheet */
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  --melisma-text: hsl(115, 61%, 28%);
  --melisma-background: hsla(138, 100%, 66%, 0.4);
  --melisma-spotlight-fill: hsla(138, 100%, 72%, 0.2);
  --melisma-spotlight-stroke: hsl(138, 100%, 72%);

  /* Default highlighting colours */
  --highlight-fill: hsl(276, 74%, 51%);
  --highlight-stroke: hsl(276, 100%, 31%);
  --melodic-pattern-gabc: hsla(276, 100%, 75%, 0.596);

  --spotlight-fill: hsla(276, 74%, 51%, 0.2);
  --spotlight-stroke: hsla(276, 100%, 31%, 0.466);

  /* Gap highlighting */
  --gap-side-note-fill: hsla(339, 100%, 50%, 0.3);
  --gap-side-note-stroke: hsla(339, 100%, 50%, 0.8);
  --gap-filler-fill: hsla(2, 100%, 50%, 0.7);
  --gap-filler-stroke: hsl(2, 100%, 50%);

  /* Mismatch highlighting */
  --mismatch-fill: hsla(240, 100%, 50%, 0.7);
  --mismatch-stroke: hsl(240, 100%, 50%);
  --mismatch-fill-box: hsla(240, 100%, 50%, 0.12);
  --mismatch-stroke-box: hsla(240, 100%, 50%, 0.4);
}

/* Custom button styles */
body {
  @apply bg-gray-50;
}

h1,
h2,
h3 {
  @apply font-bold text-2xl my-2;
}

ul {
  @apply m-0;
}

code {
  @apply font-mono text-white bg-emerald-700 py-[0.125rem] px-1 rounded-md;
}

p {
  @apply my-1;
}

ul {
  @apply list-disc list-outside pl-6;
}

li {
  @apply my-1;
  
}

li > ul {
  @apply list-[circle] list-outside pl-4 lg:pl-8;
}

a {
  @apply text-blue-700;
}

a:hover {
  @apply text-blue-900 underline;
}

.melodic-pattern-word {
  text-emphasis: triangle var(--highlight-fill);
  text-emphasis-position: under right;
}

.melodic-pattern-word-gabc {
  background-color: var(--melodic-pattern-gabc);
  font-weight: 550;
}

.error {
  @apply text-red-700;
}

.nonselectable-text {
  @apply select-none;
}

.liquescent-word {
  @apply font-bold underline decoration-solid text-blue-700;
}

.quilisma-word {
  @apply font-bold underline decoration-wavy text-amber-700;
}

.oriscus-word {
  @apply font-bold underline decoration-dashed text-fuchsia-700;
}

.melisma-word {
  @apply bg-emerald-300;
}

hr {
  @apply my-1 border-0 border-t border-gray-400;
}