@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('navigation.css');

/* ==========================================================================
   Color palette
   All colors live here as CSS custom properties. Edit these to re-theme the
   site; nothing below references a hardcoded color. The dark-mode block
   overrides the same variables, so light/dark stay in sync automatically.
   ========================================================================== */
:root {
    color-scheme: light dark;

    /* Surfaces & text */
    --color-background: #ffffff;
    --color-text: #000000;
    --color-text-muted: dimgray;        /* footer, secondary text */

    /* Navigation */
    --color-nav-text: #000000;
    --color-nav-text-hover: #666666;
    --color-hamburger-bg: #000000;
    --color-hamburger-line: #ffffff;
    --color-mobile-menu-bg: #ffffff;
    --color-mobile-menu-shadow: rgba(0, 0, 0, 0.05);
    --color-overlay: rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Surfaces & text */
        --color-background: #121212;
        --color-text: #f2f2f2;
        --color-text-muted: #9a9a9a;

        /* Navigation */
        --color-nav-text: #f2f2f2;
        --color-nav-text-hover: #b0b0b0;
        --color-hamburger-bg: #f2f2f2;
        --color-hamburger-line: #121212;
        --color-mobile-menu-bg: #1e1e1e;
        --color-mobile-menu-shadow: rgba(0, 0, 0, 0.4);
        --color-overlay: rgba(0, 0, 0, 0.6);
    }
}

/* ==========================================================================
   Layout
   ========================================================================== */
body {
    background-color: var(--color-background);
    font-family: 'Inter', sans-serif;
    color: var(--color-text);

    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16px;
}

header {
    display: flex;
    max-width: 720px;
    width: 100%;
    position: relative;
    z-index: 1001;
}

main {
    max-width: 720px;
    width: 100%;
}

footer {
    max-width: 720px;
    width: 100%;

    padding-bottom: 64px;
    color: var(--color-text-muted);
}

a {
    color: unset;
}

@media screen and (min-width: 720px) {
    main {
        padding-top: 32px;
    }
}

img {
    max-width: 100%;
}