/* =================================================================
   Base — Font faces, element resets, and bare-element typography.
   No classes here; just sensible defaults for HTML elements.
   ================================================================= */

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    src: local('Inter'), url(../assets/fonts/Inter-Regular.woff2) format('woff2')
}

@font-face {
    font-family: InterSemiBold;
    font-style: normal;
    font-weight: 600;
    src: local('InterSemiBold'), url(../assets/fonts/Inter-SemiBold.woff2) format('woff2')
}

html, body {
    padding: 0;
    margin: 0;
}

body {
    font-family: var(--font-primary);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: var(--surface);
    color: var(--headline-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1 {
    font-size: 32px;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    color: var(--headline-color);
    margin: 0px;
}

h2 {
    font-size: 30px;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    color: var(--headline-color);
    margin: 0px;
}

h3 {
    font-size: 26px;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    color: var(--headline-color);
    margin: 0px;
}

label, span {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    color: var(--headline-color);
    cursor: inherit
}

a {
    text-decoration: none;
    color: var(--main-color);
}

a:hover {
    cursor: pointer;
}

fieldset {
    border: 1px solid var(--border-primary, #D5D9DD);
    border-radius: var(--border-radius-md, 8px);
    padding-top: 13px;
}

legend {
    font-size: 14px;
}

ul {
    list-style-type: none;
    padding-inline-start: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
}

ol {
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 18px;
    color: var(--headline-color);
}

input::placeholder {
    color: transparent;
}

input[type=text], input[type=email], input[type=password] {
    height: 56px;
    background: var(--background-primary, #FFF);
    border: 1px solid var(--border-primary, #D5D9DD);
    border-radius: var(--border-radius-md, 8px);
    padding: 20px 10px 0px 10px;
    font-size: 16px;
    font-weight: 400;
    color: var(--headline-color);
    box-sizing: border-box;
    width: -webkit-fill-available;
}

input[type=text]:hover, input[type=email]:hover, input[type=password]:hover {
    border: solid 1px var(--light-gray-bg);
    box-shadow: var(--shadow-sm);
}

input[type=number]:focus, input [type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=number]:focus-visible, input[type=text]:focus-visible, input[type=email]:focus-visible, input[type=password]:focus-visible {
    outline: none;
    border: solid 2px var(--main-color);
    background-color: transparent
}

input[type=text]:not(:placeholder-shown):invalid,
input[type=number]:not(:placeholder-shown):invalid,
input[type=email]:not(:placeholder-shown):invalid,
input[type=password]:not(:placeholder-shown):invalid,
input.invalid {
    outline: none;
    border: solid 2px var(--alert);
    background-color: var(--light-alert)
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--headline-color);
    box-shadow: 0 0 0 1000px var(--background-primary) inset;
    transition: background-color 9999s ease-in-out 0s;
}

input:autofill,
textarea:autofill,
select:autofill {
    -webkit-text-fill-color: var(--headline-color);
    box-shadow: 0 0 0 1000px var(--background-primary) inset;
}