@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* light */
  --background: #f8faf9; /* Sage/Light/2 */
  --callout: #ecefed; /* Sage/Light/4 */
  --stroke: #d7dcda; /* Sage/Light/7 */
  --text-shout: #236e4a; /* Green/Dark/8 */
  --text-murmur: #113123; /* Green/Dark/4 */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark */
    --background: #141716; /* Sage/Dark/1 */
    --callout: #252a27; /* Sage/Dark/4 */
    --stroke: #393f3c; /* Sage/Dark/7 */
    --text-shout: #92ceac; /* Green/Light/7 */
    --text-murmur: #99a29e; /* Green/Dark/11 */
  }
}

body {
  background-color: var(--background);
  color: var(--text-murmur);
  font-family: Manrope, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: 500;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
}

h2,
h3,
h4 {
  color: var(--text-shout);
}

h1 {
  font-family: "Redaction", Georgia, "Times New Roman", Times, serif;
}

h2 {
  font-family: "Redaction 10", Georgia, "Times New Roman", Times, serif;
}

footer {
  border-color: var(--stroke);
}

.pronoun-list-title span:not(:last-child):after {
  content: "/";
}

.pronoun-list-link {
  color: var(--text-shout);
  text-decoration: underline;
}

.pronoun-list-icon {
  color: var(--text-murmur);
}

.pronoun-example-table {
  border-color: var(--stroke);
}

.t-row:not(:last-child) {
  @apply border-b;
  border-color: var(--stroke);
}

.t-header {
  background-color: var(--callout);
}

.button-cta {
  background-color: var(--callout);
  color: var(--text-shout);
  border-bottom: 2px solid var(--text-shout);
  border-left: 1px solid var(--text-shout);
  border-radius: 1rem 0.5rem 1rem 0.5rem;
  padding: 0.5rem 1rem;
  display: inline-block;
}

.button-cta:not(:active) {
  margin-bottom: 1px;
  margin-left: 1px;
}

.button-cta:active {
  border-top: 1px solid var(--text-shout);
  border-right: 1px solid var(--text-shout);
  transform: translate(-1px, 2px);
}

@media (min-width: 1024px) {
  .t-row:not(:last-child) {
    @apply border-b-0;
  }
  .t-row:not(:last-child) .t-cell {
    @apply border-r;
    border-color: var(--stroke);
  }
}