* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page-bg);
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at top left, var(--primary-soft-bg), transparent 28rem),
        linear-gradient(135deg, var(--page-gradient-start), var(--page-gradient-end));
    color: var(--text-color);
    font-family: var(--font-base);
}

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

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

button,
input,
select,
textarea {
    font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
    color: var(--text-color);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--primary-color);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--focus-color);
    border-color: var(--primary-color);
}