@layer
    reset,
    base,
    article,
    color,
    animation;

@layer reset {
    *, *:before, *:after {
        box-sizing: border-box;
        margin: 0;
    }

    a {
        text-decoration: none;
    }
}

@layer base.layout {
    html {
        scroll-behavior: smooth;
    }
    body {
        max-width: 70ch;
        margin: auto;
        padding: 24px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

@layer base.typography {
    :root {
        --system-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    }
    html, body {
        font-size: 16px;
        font-family: "Helvetica Neue";
        line-height: 28px;
        font-weight: 400;
    }

    h1,h2,h3,h4,h5,h6 {
        font-size: 1rem;
        font-weight: normal;
    }

    time {
        font-size: 0.90rem;
    }
}

@layer base.rythm {
    body { padding-top: 56px }
}

@layer color {
    :root {
        --border: rgba(255,255,255,0.1);

        --syntax-bg: light-dark(oklch(23.23% 0.0036 49.25), oklch(98.65% 0.0009 106.423));
        --syntax-base: hsl(0, 0%, 60%);
        --syntax-primary: hsl(0, 0%, 0%);
        --syntax-secondary: hsl(0, 0%, 20%);
        --syntax-accent: hsl(0, 0%, 0%);
        --syntax-char: hsl(0, 0%, 30%);
        --syntax-comment: hsl(0, 0%, 80%);
        --syntax-special: var(--syntax-base);
        --syntax-marked: hsl(0, 0%, 0%);
        --syntax-error: hsl(0, 0%, 0%);
        --syntax-del: hsl(0, 0%, 80%);
        --syntax-ins: hsl(0, 0%, 0%);
        --syntax-highlighted-bg: hsl(0, 0%, 90%);
        --syntax-highlighted-accent: hsl(0, 0%, 0%);

        --base-solid-10: #1A1A1A;
        --base-90: rgba(255,255,255,0.9);
        --base-96: rgba(255,255,255,0.96);
        /* @todo ds */
        --bg: light-dark(oklch(14.7% .004 49.25),oklch(98.5% .001 106.423));
        --text: var(--base-90);
        --title: var(--base-96);
        --heading: var(--base-96);
        --link: var(--text);
        --link-hover: hsl(0, 0%, 40%);
        --caption: hsl(0, 0%, 40%);
        --meta: hsl(0, 0%, 50%);
        --quote: hsl(0, 0%, 60%);
        --quote-border: hsl(0, 0%, 0%);
        --ul-marker: hsl(0, 0%, 70%);
        --ol-marker: gray;
        --selection-bg: #fdf7df;
        --selection: black;
        --table-border: hsl(0, 0%, 90%);
        --table-head: hsl(0, 0%, 0%);
        --table-zebra: hsl(0, 0%, 90%);
        --footnote: hsl(0, 0%, 40%);
        --footnote-ref: hsl(0, 0%, 0%);
        --underline: hsl(0, 0%, 40%);
    }

    body {
        background: var(--bg);
        color: var(--text);
    }

    blockquote {
        color: var(--quote);
        border-color: var(--quote-border);
    }

    ::selection {
        background-color: var(--selection-bg);
        color: var(--selection);
    }

    h1             { color: var(--title)          }
    h2,h3,h4,h5,h6 { color: var(--heading)        }
    a              { color: var(--link)           }
    a:hover        { color: var(--link-hover)     }
    figcaption     { color: var(--caption)        }
    time           { color: var(--meta)           }
    ul li::marker  { color: var(--ul-marker)      }
    ol li::marker  { color: var(--ol-marker)      }
    ol li::before  { color: var(--ol-marker)      }
    th             { color: var(--table-head)     }
    .footnotes     { color: var(--footnote)       }
    .footnote-ref  { color: var(--footnote-ref)   }
    hr             { border-color: var(--border) }
    table          { border-color: var(--table-border) }
    tr:nth-child(even){ background-color: var(--table-zebra) }

    /* Themeing */
    pre {
        background: var(--syntax-bg);
        color: var(--syntax-base);
        border-color: var(--border);
        b      { color: var(--syntax-primary)   }
        em     { color: var(--syntax-secondary) }
        strong { color: var(--syntax-accent)    }
        i      { color: var(--syntax-char)      }
        sup    { color: var(--syntax-comment)   }
        label  { color: var(--syntax-special)   }
        mark   { color: var(--syntax-marked)    }
        u      { color: var(--syntax-error)     }
        dfn::after {
        background: var(--syntax-highlighted-bg);
        border-color: var(--syntax-highlighted-accent);
        }
    }

    pre ins,
    pre ins > * { color: var(--syntax-ins) }
    pre del,
    pre del > * { color: var(--syntax-del) }

    a  > code,
    li > code,
    p  > code {
        color: var(--text);
    }
}

@layer animation {
    @keyframes fadeInUp {
        from {
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@layer primitives {
    .hstack {
        display: flex;
        align-self: stretch;
        flex-direction: row;
        align-items: var(--align-y, center);
        justify-content: var(--align-x, flex-start);
        > * {
            margin-right: var(--spacing, 0.5rem);
        }

        > :last-child {
            margin-right: 0;
        }
    }

    .vstack {
        display: flex;
        align-self: stretch;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: var(--align-x, center);
        justify-content: var(--align-y, flex-start);

        > * {
            margin-bottom: var(--spacing, 0.5rem);
        }

        > :last-child {
            margin-bottom: 0;
        }
    }

    .spacer { flex: 1 }
}