/* Shared by every page: palette and themes, type, links, the theme toggle and the footer. Page layouts stay in each page. */

:root {
    --desk: #f3efe6;
    --card: #f9f7f1;
    --pill: rgba(249, 247, 241, 0.7);
    --text: #3d3a35;
    --muted: #6e6960;
    --faint: #9a948a;
    --ink: #1f1d1a;
    --rule: rgba(31, 29, 26, 0.14);
    --link-line: rgba(31, 29, 26, 0.3);
    --highlight: rgba(230, 193, 90, 0.6);
    --accent: #cf5137;
    --shadow: rgba(31, 29, 26, 0.12);
    --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --column: 600px;
    color-scheme: light;
}

/* Dark comes from the system unless the visitor chose light, or from the visitor's choice. Keep both blocks the same. */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --desk: #171614;
        --card: #211f1b;
        --pill: rgba(33, 31, 27, 0.72);
        --text: #cfc8bb;
        --muted: #a0998d;
        --faint: #78726a;
        --ink: #f1ebe0;
        --rule: rgba(241, 235, 224, 0.15);
        --link-line: rgba(241, 235, 224, 0.32);
        --highlight: rgba(230, 193, 90, 0.3);
        --accent: #e5704f;
        --shadow: rgba(0, 0, 0, 0.45);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --desk: #171614;
    --card: #211f1b;
    --pill: rgba(33, 31, 27, 0.72);
    --text: #cfc8bb;
    --muted: #a0998d;
    --faint: #78726a;
    --ink: #f1ebe0;
    --rule: rgba(241, 235, 224, 0.15);
    --link-line: rgba(241, 235, 224, 0.32);
    --highlight: rgba(230, 193, 90, 0.3);
    --accent: #e5704f;
    --shadow: rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    background: var(--desk);
    color: var(--text);
    font: 400 18px/1.62 var(--serif);
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

h1,
h2,
h3,
p,
ul {
    margin: 0;
}

a {
    color: inherit;
}

/* Pill links and the theme toggle beside them */

.links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.links a {
    background: var(--pill);
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink);
    font: 500 14px / 1 var(--sans);
    padding: 9px 15px;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.links a:hover,
.links a:focus-visible,
.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--desk);
}

.theme-toggle {
    align-items: center;
    background: var(--pill);
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    height: 34px;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    width: 34px;
}

.theme-toggle[hidden] {
    display: none;
}

.theme-toggle svg {
    height: 16px;
    width: 16px;
}

.theme-toggle[data-next="dark"] .icon-sun,
.theme-toggle[data-next="light"] .icon-moon {
    display: none;
}

/* Footer */

footer {
    align-items: baseline;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    display: flex;
    font: 400 14px / 1.5 var(--sans);
    gap: 16px;
    justify-content: space-between;
    margin-top: 96px;
    padding-top: 18px;
}

footer a {
    color: inherit;
    text-decoration: none;
}

footer a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.to-top {
    align-items: center;
    display: inline-flex;
    flex: none;
    gap: 7px;
}

footer .to-top:hover,
footer .to-top:focus-visible {
    color: var(--ink);
    text-decoration: none;
}

.to-top svg {
    height: 13px;
    transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.24, 1);
    width: 10px;
}

.to-top:hover svg,
.to-top:focus-visible svg {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .to-top svg {
        transition: none;
    }
}