:root {
    /* palette */
    --milk-bg: #171f26;
    --milk-bg-2: #2b3844;
    --milk-panel: #cbbfa8;
    --milk-ink: #12151a;
    --milk-accent: #5c7267;
    --milk-accent-2: #d63bb0;
    --milk-line: #3d4750;
    --milk-page: #282b30;
    --milk-accent-2-hover: #ba56a2;
    --milk-heading: #d77ec1;
}

.lightmode {
    /* palette — light mode */
    --milk-bg: #ede1cc;
    --milk-bg-2: #e5ddd0;
    --milk-panel: #343b3a;
    --milk-ink: #fffdf8;
    --milk-accent: #5c7267;
    --milk-accent-2: #c53399;
    --milk-line: #d2c7b8;
    --milk-page: #faf7f1;
    --milk-accent-2-hover: #ad2883;
    --milk-heading: #a84b8b;
}

@font-face {
    font-family: FFVII;
    src: url("/static/fonts/brevia-font-family/HvDTrial_Brevia-SemiBold-BF6493a40662f78.otf")
}

body {
    font-family: "FFVII", sans-serif;
    font-size: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
    color: var(--milk-panel);
    min-height: 100vh;
    background: var(--milk-page);
    letter-spacing: 0.02em;
}

h1 {
    color: var(--milk-accent-2);
    font-size: 2.7rem;
    margin-bottom: 0.5rem;
}

h2 {
    color: var(--milk-heading);
    font-size: 1.85rem;
}

p,
li {
    line-height: 1.5;
}

a {
    color: var(--milk-accent-2);
}