@import "@nordcode/ui/complete";

:where(:root) {
    --layout-max-width: 72em;
    --layout-padding: var(--spacing-base);

    @media (min-width: 36rem) {
        --layout-padding: var(--spacing-far);
    }

    --layout-max-width: 84rem;
    font-size: clamp(var(--font-size-base), calc(35% + 1vw), var(--font-size-large));

    --button-height-base: 1.5lh;
    --button-height-small: 1lh;

    --triangle-down-url-dark: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 84L12.7609 19.5L87.2391 19.5L50 84Z' fill='%23fff4f5'/%3E%3C/svg%3E");
    --triangle-up-url-dark: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 16L87.2391 80.5H12.7609L50 16Z' fill='%23fff4f5'/%3E%3C/svg%3E%0A");

    --triangle-down-url-light: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 84L12.7609 19.5L87.2391 19.5L50 84Z' fill='%231a0004'/%3E%3C/svg%3E");
    --triangle-up-url-light: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 16L87.2391 80.5H12.7609L50 16Z' fill='%231a0004'/%3E%3C/svg%3E%0A");

    --header-offset: calc(var(--spacing-base) + 2 * var(--spacing-nearest) + var(--button-height-base));

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

footer {
    padding-block: var(--spacing-far);
}

body {
    font-size: var(--font-size-base);
    background: var(--color-surface-subtle);
}

textarea {
    field-sizing: content;
    min-block-size: 4lh;
    max-block-size: 80svh;
    block-size: auto;
}

.page-center-layout {
    --center-measure: var(--layout-max-width);
    --center-padding: var(--layout-padding);
}

body {
    font-size: var(--font-size-base);
    background: var(--color-surface-subtle);
}

.page-center-layout {
    --center-measure: var(--layout-max-width);
    --center-padding: var(--layout-padding);
}

form {
    --input-field-max-inline-size: 40ch;
}

.nc-button {
    max-inline-size: fit-content;
}