@import url("./reset.css");

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Page Structure */

:root {
    /* Fonts */
    font-family: sans-serif;
    /* Text */
    /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --text--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
    --text--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
    --text-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --text-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
    --text-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
    --text-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
    --text-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
    --text-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
    --text-6: clamp(3.3592rem, 2.7828rem + 2.5621vw, 4.7684rem);
    --text-7: clamp(4.0311rem, 3.2418rem + 3.508vw, 5.9605rem);
    /* Spacing */
    /* @link https://utopia.fyi/space/calculator?c=360,16,1.2,1240,20,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */
    --space-4xs: 2px;
    --space-3xs: clamp(0.25rem, 0.2244rem + 0.1136vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4489rem + 0.2273vw, 0.625rem);
    --space-xs: clamp(0.75rem, 0.6733rem + 0.3409vw, 0.9375rem);
    --space-s: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
    --space-m: clamp(1.5rem, 1.3466rem + 0.6818vw, 1.875rem);
    --space-l: clamp(2rem, 1.7955rem + 0.9091vw, 2.5rem);
    --space-xl: clamp(3rem, 2.6932rem + 1.3636vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.5909rem + 1.8182vw, 5rem);
    --space-3xl: clamp(6rem, 5.3864rem + 2.7273vw, 7.5rem);
    /* Spacing One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, 0.0966rem + 0.6818vw, 0.625rem);
    --space-2xs-xs: clamp(0.5rem, 0.321rem + 0.7955vw, 0.9375rem);
    --space-xs-s: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
    --space-s-m: clamp(1rem, 0.642rem + 1.5909vw, 1.875rem);
    --space-m-l: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
    --space-l-xl: clamp(2rem, 1.2841rem + 3.1818vw, 3.75rem);
    --space-xl-2xl: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
    --space-2xl-3xl: clamp(4rem, 2.5682rem + 6.3636vw, 7.5rem);

    /*Border*/
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 24px;
    --border-radius-full: 999vh;

    /* Colors */
    --neutral-50: #f5f5f5;
    --neutral-100: #eeeeee;
    --neutral-200: #d9d9d9;
    --neutral-300: #bcbcbc;
    --neutral-700: #404040;
    --neutral-900: #0f0f0f;
    --accent-1: #7c3aed;

    /*Color tokens*/
    --surface-color: var(--neutral-100);
    --accent-surface-color: var(--neutral-50);
    --button-surface-color: var(--neutral-900);
    --button-text-color: var(--neutral-100);
    --border-color: var(--neutral-300);
    --text-color: var(--neutral-900);
    --link-hover-color: var(--accent-1);
}

body {
    grid-template-columns: 1fr;
    max-width: 1280px;
    margin-inline: auto;
    background: var(--surface-color, white);
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
}

.header__branding {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: inherit;

    &:hover,
    &:focus-visible {
        color: inherit;
    }

    p {
        text-align: center;
        font-size: var(--text--2);
    }
}

.header-logo {
    max-width: 60px;
}

.button__nav-toggle {
    font-size: 0.75rem;
}

nav {
    position: fixed;
    width: 100%;
    min-height: 50%;
    display: none;
    padding: 2rem;

    ul {
        margin: 0;
    }

    li {
        font-size: var(--text--2);
        margin: 0;
        padding-inline-start: var(--space-3xs);
        padding-block: var(--space-4xs);
        border-radius: var(--border-radius-sm);
    }
    li::before {
        content: "";
    }
}

li:has(a[data-state="active"]) {
    background: var(--neutral-50);
}

main {
    container-type: inline-size;
    padding: 2rem;
}

footer {
    padding: 2rem;
}

.show {
    display: block;
    background: var(--surface-color);
}

@media (min-width: 800px) {
    body {
        display: grid;
        grid-template-columns: min-content 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "header main"
            "nav main"
            "nav footer";
    }

    header {
        top: 0;
        position: sticky;
        grid-area: header;
    }

    .header__branding {
        width: 100%;
        display: grid;
        justify-content: center;
        gap: 0.5em;
    }

    .header-logo {
        max-width: 120px;
    }

    .button__nav-toggle {
        display: none;
    }

    nav {
        --_header-height: 216px;
        display: block;
        top: var(--_header-height);
        align-self: start;
        position: sticky;
        min-height: 0;
        height: calc(100svh - var(--_header-height));
        grid-area: nav;
    }

    main {
        grid-area: main;
    }
}

article {
    display: grid;
    grid-template-columns: minmax(0, 768px) 172px;
    grid-template-areas:
        "title title  "
        "content sidebar";
    gap: 2rem;
}

.article__header {
    grid-area: title;
}

aside {
    grid-area: sidebar;
}

@container (inline-size < 750px) {
    article {
        display: grid;
        grid-template-columns: minmax(0, 768px);
        grid-template-areas:
            "title  "
            "sidebar"
            "content";
    }

    aside {
        ul {
            display: flex;

            li {
                --_item-padding: 0.5em;
                padding-inline-end: var(--_item-padding);

                &:not(:first-child) {
                    padding-inline-start: var(--_item-padding);
                    border-inline-start: 1px solid black;
                }
            }
        }
    }
}

/* Typography */

h1 {
    font-size: var(--text-3);
}
h2 {
    font-size: var(--text-2);
}
h3 {
    font-size: var(--text-1);
}

a {
    text-decoration: none;
    font-weight: 900;
}

a:hover,
a:focus-visible {
    color: var(--link-hover-color);
}

/* Components */

button {
    --_button-surface-color: var(--button-surface-color, black);
    --_button-text-color: var(--button-text-color, white);
    --_button-border-radius: var(--border-radius-sm, 4px);
    display: flex;
    align-self: center;
    align-items: center;
    gap: 0.75em;
    padding: 0.5lh 2ch;
    background: var(--_button-surface-color);
    color: var(--_button-text-color);
    border: none;
    border-radius: var(--_button-border-radius);
    text-transform: uppercase;
    text-box-trim: both;

    img {
        max-width: 1em;
        max-height: 1em;
        color: inherit;
    }
}

/* Cards */
.card-container {
    --card-min-width: 150px;
    --card-max-width: 175px;
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--card-min-width), var(--card-max-width))
    );
    padding-block: var(--space-xs);
    gap: var(--space-s);
    align-items: center;

    .card {
        --card-color: var(--neutral-900);
        display: flex;
        flex-direction: column;
        min-height: 250px;
        padding: var(--space-s);
        background: var(--card-color);
        color: contrast-color(var(--card-color));
        border-radius: var(--border-radius);
        outline: solid 0.5px var(--border-color);

        .title {
            margin-top: auto;
        }
    }
}

.img-card {
    --padding: var(--space-2xs);
    display: grid;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--neutral-50);
    outline: solid 0.5px var(--border-color);
    font-size: .75em;

    img {
        width: 100%;
        aspect-ratio: 1 /1;
        object-fit: cover;
        object-position: top;
    }

    h3 {
        font-size: 1.2em;
    }

    :not(img) {
        padding-inline: var(--padding);
    }
    :nth-child(2) {
        padding-block-start: var(--padding);
    }
    :last-child {
        padding-block-end: var(--padding);
    }
}

.long-card {
    display: grid;
    background: var(--accent-surface-color);
    border-radius: var(--border-radius);
    padding: var(--space-s) var(--space-m) var(--space-m) var(--space-m);
    gap: var(--space-s);
    font-size: var(--text--2);

    &.header {
        display: none;
        padding: var(--space-2xs);
        text-align: center;
        font-weight: 600;
    }

    span {
        font-weight: bold;
    }

    .swatch {
        --swatch-background: var(--button-surface-color);
        height: 100px;
        background: var(--swatch-background);
        outline: solid 0.5px var(--border-color);
        border-radius: var(--border-radius);
    }

    &.card__dark {
        background-color: var(--neutral-700);
        color: var(--neutral-100);
    }

    @media (width > 800px) {
        grid-template-columns: repeat(4, 1fr);
        padding: var(--space-s);
        align-items: center;

        span {
            display: none;
        }

        &.header {
            display: grid;
        }
    }
}

/*details {
    padding: var(--space-2xs);
    background-color: var(--neutral-50);
    border-radius: var(--border-radius);
    font-size: var(--text--2);
}*/

/*.pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    border-radius: var(--border-radius);
    background: var(--neutral-700);
}*/

/*code {
    font-family: SFMono-Regular, Consolas, Monaco, monospace;
    color: limegreen;
}*/

/* UTIL */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.flow > * + * {
    --flow-spacing: 1em;
    margin-block-start: var(--flow-spacing);
}

.gap {
    --gap-size: 1rem;
    display: grid;
    gap: var(--gap-size);
}