/*-------------------------------------------------------------------------------------------------*/
/*  G L O B A L                                                                                    */
/*-------------------------------------------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    font-weight: bold;
    color: var(--primary-6);
    text-decoration: none;
    transition: color var(--anim-duration-0);
}

a:hover {
    color: var(--primary-7);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all var(--anim-duration-0);
}

:focus-visible {
    outline: var(--border-width-2) solid var(--primary-5);
    outline-offset: var(--border-width-2);
}


/*-------------------------------------------------------------------------------------------------*/
/*  C O M P O N E N T S                                                                            */
/*-------------------------------------------------------------------------------------------------*/

body {
    font-family: var(--font-geometric-humanist);
    font-size: var(--font-size-1);
    line-height: var(--font-line-height-2);
    color: var(--neutral-12);
    background-color: var(--neutral-1);
    display: grid;
    grid-template-areas:
        "header"
        "main";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    gap: 0;
}

header {
    grid-area: header;
    color: var(--primary-6-on);
    background-color: var(--primary-6);
    padding-top: var(--size--2);
    padding-bottom: var(--size--2);

    & h1 {
        font-size: var(--font-size-2);
        padding-left: var(--size-0);

        & span#zest {
            font-size: var(--font-size-2);
            font-weight: normal;
            color: var(--primary-5-on);
            margin-right: calc(var(--size--2) / 2);
        }
    }
}

main {
    grid-area: main;
    width: 100%;
    max-width: 48rem;
    justify-self: center;
    padding: var(--size-4) var(--size-0);

    & h2 {
        font-size: var(--font-size-4);
        color: var(--primary-8);
        padding-bottom: var(--size--1);
    }

    & p {
        padding-bottom: var(--size--1);
    }

    & strong {
        color: var(--tertiary-7);
    }

    & p.status {
        padding: var(--size--1) var(--size-0);
        margin-bottom: var(--size-0);
        border-left-style: solid;
        border-width: var(--border-width-4);
        border-color: var(--neutral-4);
        background-color: var(--neutral-2);
    }

    & p.status.signed {
        border-color: var(--primary-5);
        background-color: var(--primary-1);
    }

    & p.status.unsigned {
        border-color: var(--secondary-5);
        background-color: var(--secondary-1);
    }

    & div.notice {
        font-size: var(--font-size--1);
        padding: var(--size--1) var(--size-0) 0 var(--size-0);
        margin-bottom: var(--size-0);
        border-left-style: solid;
        border-width: var(--border-width-4);
        border-color: var(--primary-6);
        background-color: var(--neutral-3);

        & code {
            font-family: var(--font-mono);
            font-size: inherit;
            color: var(--tertiary-7);
        }

        & strong {
            color: inherit;
        }
    }

    & div.actions {
        display: flex;
        gap: var(--size-0);
        align-items: center;
        padding-top: var(--size-0);
    }

    & a.button,
    & button.primary {
        display: inline-block;
        font-size: var(--font-size-0);
        font-weight: bold;
        color: var(--primary-6-on);
        background-color: var(--primary-6);
        padding: var(--size--2) var(--size-1);
        border-style: solid;
        border-color: var(--primary-6);
        border-radius: var(--border-radius-1);
        border-width: var(--border-width-0);
    }

    & a.button:hover,
    & button.primary:hover {
        color: var(--primary-7-on);
        background-color: var(--primary-7);
        border-color: var(--primary-7);
    }

    & button.secondary {
        font-size: var(--font-size-0);
        font-weight: bold;
        color: var(--primary-6);
        background-color: var(--primary-1);
        padding: var(--size--2) var(--size-1);
        border-style: solid;
        border-color: var(--primary-6);
        border-radius: var(--border-radius-1);
        border-width: var(--border-width-0);
    }

    & button.secondary:hover {
        background-color: var(--primary-2);
    }

    & article.agreement {
        margin-top: var(--size-0);
        margin-bottom: var(--size-0);
        padding: var(--size-1) var(--size-2);
        background-color: var(--neutral-2);
        border-style: solid;
        border-color: var(--neutral-3);
        border-radius: var(--border-radius-1);
        border-width: var(--border-width-0);

        & h1 {
            font-size: var(--font-size-3);
            color: var(--primary-8);
            padding-bottom: var(--size--1);
        }

        & h2 {
            font-size: var(--font-size-2);
            padding-top: var(--size-0);
        }

        & h3 {
            font-size: var(--font-size-1);
            padding-top: var(--size--1);
            padding-bottom: calc(var(--size--2) / 2);
        }

        & ol,
        & ul {
            padding-left: var(--size-3);
            padding-bottom: var(--size--1);

            & li {
                padding-left: var(--size--2);
                padding-bottom: calc(var(--size--2) / 2);
            }

            & li::marker {
                color: var(--neutral-7);
            }
        }

        & code {
            font-family: var(--font-mono);
            font-size: var(--font-size-0);
            color: var(--tertiary-7);
        }
    }

    & p.digest {
        font-size: var(--font-size--1);
        color: var(--neutral-9);

        & code {
            font-family: var(--font-mono);
            font-size: var(--font-size--2);
            color: var(--tertiary-7);
            word-break: break-all;
        }
    }

    & form.accept {
        margin-top: var(--size-0);
        margin-bottom: var(--size-0);
        padding: var(--size-0) var(--size-1);
        border-left-style: solid;
        border-width: var(--border-width-4);
        border-color: var(--primary-5);
        background-color: var(--primary-1);
    }
}