:root {
    --spacing: 0.25rem;
    --border-color: #e0e0e0;
    --ease-out: 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html {
    min-height: 100dvh;
    place-items: center;
    place-content: center;
}

body {
    display: grid;
    gap: calc(var(--spacing) * 6);
    margin: calc(var(--spacing) * 6);

    /* Glacier Mist */
    background: conic-gradient(
        from 210deg at 50% 50%,
        #ffffff 0%,
        #f2faff 30%,
        #e3f3ff 60%,
        #ffffff 100%
    );

    /* Lilac Breeze */
    background: conic-gradient(
        from 210deg at 50% 50%,
        #ffffff 0%,
        #f4f8ff 30%,
        #eef3ff 60%,
        #ffffff 100%
    );

    /* Frost Whisper */
    background: conic-gradient(
        from 210deg at 50% 50%,
        #ffffff 0%,
        #f3f9ff 30%,
        #e8f2ff 60%,
        #ffffff 100%
    );

    /* Ice Veil */
    background: conic-gradient(
        from 210deg at 50% 50%,
        #ffffff 0%,
        #f5fbff 30%,
        #e6f3ff 60%,
        #ffffff 100%
    );

    /* Arctic Bloom */
    background: conic-gradient(
        from 210deg at 50% 50%,
        #ffffff 0%,
        #f2faff 30%,
        #edf6ff 60%,
        #ffffff 100%
    );

    color: black;
    font-family: system-ui;
}

section {
    box-shadow: 0 6px 30px color-mix(in oklab, black 5%, transparent);
    padding: calc(var(--spacing) * 6);
    border-radius: 8px;
    background-color: white;

    display: grid;
    row-gap: calc(var(--spacing) * 3);
}

#signature-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: calc(var(--spacing) * 3);

    label,
    input,
    select {
        font-size: 13px;
    }

    input,
    select {
        padding: calc(var(--spacing) * 3);
        border: 1px solid var(--border-color);
        border-radius: 6px;
    }

    .label-position-inside {
        position: relative;

        label,
        input::placeholder {
            color: color-mix(in oklab, currentColor 50%, transparent);
            transition: var(--ease-out);
        }

        label {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: calc(var(--spacing) * 1.5);
            padding-inline: calc(var(--spacing) * 1.5);

            opacity: 0;
            background-color: white;
        }

        input {
            width: 100%;
            box-sizing: border-box;

            &:focus::placeholder {
                opacity: 0;
                transform: translateY(50%);
            }

            &:focus + label,
            &:not(:placeholder-shown) + label {
                top: 0;
                opacity: 1;
            }
        }
    }
}

#signature-preview {
    &.is-debugging table * {
        outline: 1px solid red;
    }
}

.actions-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: calc(var(--spacing) * 3);
}

.btn {
    border: 1px solid var(--border-color);
    padding: calc(var(--spacing) * 3);
    background-color: #f7f7f7;
    color: #000;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    text-decoration: none;
    transition: var(--ease-out);

    &:hover {
        border-color: black;
        background-color: black;
        color: white;
    }
}