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

:root {
    --background: #F8FAF9;    /* Sage/Light/2 */
    --callout: #ECEFED;       /* Sage/Light/4 */ 
    --stroke: #D7DCDA;        /* Sage/Light/7 */
    --text-shout: #164430;    /* Green/Dark/6 */
    --text-murmur: #113123;   /* Green/Dark/4 */
    --icon-dark: #236E4A;     /* Green/Dark/8 */
}

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 {
    color: var(--text-shout);
    font-weight: 700;
}

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: "/";
}

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

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

.svg-dark-stroke {
    stroke: var(--icon-dark);
}


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