/* Layer order is set here: later layers beat earlier ones, whatever the specificity */
@layer reset, tokens, base, layout, components;

/* every browser ships a default stylesheet, reset fixes inconsistencies */
@layer reset {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    img {
        display: block;
        max-width: 100%;
    }
}

@layer tokens {
    :root {
        /* Dark is the default; system preference is ignored. [data-theme="light"] overrides below */
        color-scheme: dark;

        --color-bg: #121212;
        --color-text: #ececec;
        --color-text-muted: #a3a3a3;
        --color-accent: #6ea8fe;
        --color-border: #3a3a3a;

        --radius: 0.5rem;

        --font-body: system-ui, sans-serif;

        /* Fluid type scale: each size grows with the viewport between a min and a max */
        --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
        --step-1: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
        --step-2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
        --step-3: clamp(2rem, 1.4rem + 3vw, 3.5rem);

        /* Spacing scale */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3rem;
        --space-8: 4rem;

        /* Comfortable line length for reading */
        --measure: 65ch;
    }

    :root[data-theme="light"] {
        color-scheme: light;

        --color-bg: #f5f5f4;
        --color-text: #1c1917;
        --color-text-muted: #57534e;
        --color-accent: #0b5cd5;
        --color-border: #d4d4d4;
    }
}

@layer base {
    body {
        font-family: var(--font-body);
        font-size: var(--step-0);
        line-height: 1.6;
        background: var(--color-bg);
        color: var(--color-text);
        padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-6));
        max-width: 62.5rem;
        margin-inline: auto;
    }

    h1,
    h2,
    h3 {
        line-height: 1.2;
    }

    h1 {
        font-size: var(--step-3);
    }

    h2 {
        font-size: var(--step-2);
    }

    h3 {
        font-size: var(--step-1);
    }

    p {
        max-width: var(--measure);
    }

    a {
        color: var(--color-accent);
        text-underline-offset: 0.2em;
    }

    a:hover {
        text-decoration-thickness: 0.15em;
    }

    :focus-visible {
        outline: 3px solid var(--color-accent);
        outline-offset: 3px;
    }
}

@layer layout {
    body>header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
        margin-bottom: var(--space-8);
    }

    main>*+* {
        margin-top: var(--space-8);
    }

    section>*+*,
    article>*+* {
        margin-top: var(--space-4);
    }
}

@layer components {
    .skip-link {
        position: absolute;
        top: var(--space-2);
        left: var(--space-2);
        padding: var(--space-2) var(--space-4);
        background: var(--color-bg);
        color: var(--color-text);
        transform: translateY(-200%);
    }

    .skip-link:focus-visible {
        transform: translateY(0);
    }

    .nav-list {
        list-style: none;
        padding: 0;
        display: flex;
        gap: var(--space-4);
        flex-wrap: wrap;
    }

    /* min-height gives a 44px tap target without inflating the layout */
    .nav-list__link {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding-inline: var(--space-2);
    }

    .project-list {
        display: grid;
        gap: var(--space-5);
        /* Makes this element a query container: descendants can ask about its inline (width) size */
        container-type: inline-size;
    }

    .project-card {
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: var(--space-4);
    }

    .project-card__links,
    .project-card__tags {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }

    /* Narrow container: cards stay stacked (the default above).
       Wide container: text on the left, links and tags in a right-hand column. */
    @container (min-width: 40rem) {
        .project-card {
            display: grid;
            grid-template-columns: 1fr auto;
            column-gap: var(--space-6);
        }

        .project-card__links,
        .project-card__tags {
            grid-column: 2;
            margin-top: 0;
            flex-direction: column;
        }

        .project-card__links {
            grid-row: 1;
        }

        .project-card__tags {
            grid-row: 2;
        }
    }

    .theme-toggle {
        font: inherit;
        color: var(--color-text);
        background: none;
        border: 1px solid var(--color-text-muted);
        border-radius: var(--space-2);
        padding: var(--space-1) var(--space-3);
        cursor: pointer;
    }
}