:root {
    --content-max: 1240px;
    --page-gutter: 40px;
    --content-width: min(var(--content-max), calc(100% - var(--page-gutter) - var(--page-gutter)));
    --brand: #a85c05;
    --brand-bright: #e99a24;
    --brand-pale: #fff4e3;
    --ink: #222b30;
    --muted: #667078;
    --line: #dde2e4;
    --paper: #f4f5f5;
    --warm: #f5f2ed;
    --white: #ffffff;
    --danger: #ae3026;
    --success: #226c47;
    --radius: 4px;
}

@media(max-width:1024px) {
    :root {
        --page-gutter: 24px;
    }
}

@media(max-width:640px) {
    :root {
        --page-gutter: 20px;
    }
}

body {
    color: var(--ink);
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}

:root body :is(input, textarea, select, .select-button):focus {
    outline: none;
    box-shadow: none;
    border-color: var(--brand);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}