* {
    --background-color: #ffffff; /* Background color for the screens */
    --background-image: none; /* Background image for the screens */
    --text-color: #333; /* Default text color */
    --text-color-light: #2e2e2e; /* Lighter text color for contrast */
    --border-color: #c6c6c6; /* Default border color */
    --font-family: 'neue haas display',Helvetica,Arial,Lucida,sans-serif; /* Font family for the text */
    --link-color: #bc204b; /* Color for hyperlinks */
    --primary-background-color: #bc204b; /* Background color for primary elements */
    --primary-color: #ffffff; /* Text color for primary elements */
    --primary-border-color: none; /* Border color for primary elements */
    --secondary-background-color: #ffffff; /* Background color for secondary elements */
    --secondary-color: #2e2e2e; /* Text color for secondary elements */
    --secondary-border-color: #c6c6c6; /* Border color for secondary elements */
    --error-color: #ff0000; /* Color for error messages */
    --header-background-color: #ffffff; /* Background color for the header */
    --header-height: 5rem; /* Height of the header */
    --logo-background-color: transparent; /* Background color for the logo */
    --logo-display: block; /* Display property for the logo */
    --logo-width: 200px; /* Width of the logo */
    --language-selector-background-color: transparent; /* Background color for language selector */
    --content-background-color: #ffffff; /* Background color for the main content area */
    --title-font-size: 2rem; /* Font size for titles */
    --title-longer-font-size: 26px; /* Font size for longer titles */
    --title-font-weight: 900; /* Font weight for titles */
    --description-font-size: 1.25rem; /* Font size for descriptions */
    --description-font-weight: 500; /* Font weight for descriptions */
    --description-line-height: 24px; /* Line height for descriptions */
    --label-font-size: 0.8rem; /* Font size for labels */
    --label-font-weight: 600; /* Font weight for labels */
    --label-spacer: 0; /* Spacer between label and input */
    --input-background-color: #ffffff; /* Background color for input fields */
    --input-border-color: #c6c6c6; /* Border color for input fields */
    --input-color: #222222; /* Text color for input fields */
    --input--color: var(--input-color); /* Fix color for input fields */
    --checkbox-font-size: 15px; /* Font size for checkboxes */
    --checkbox-font-weight: 500; /* Font weight for checkboxes */
    --footer-background-color: #ffffff; /* Background color for the footer */
    --footer-height: 60px; /* Height of the footer */
    --footer-content-background-color: #ffffff; /* Background color for footer content */
    --main-container-width-lg: 450px; /* Width of the main container for large screens */
    --main-container-width-sm: 85%; /* Width of the main container for small screens */
}

input {
    font-size: 1.25rem;
    letter-spacing: 2px;
}

button#sendCodeFlowToggleButton {
    border-color: #e07e3c;
    border-width: 1px;
    background-color: rgb(224 126 60 / 0.02);
}

@media (prefers-color-scheme: dark) {
    * {
        --background-color: #111;
        --text-color: #efefef;
        --header-background-color: #111;
        --text-color-light: #efefef;
        --content-background-color: #111;
        --input-background-color: #efefef;
        --input-color: #222;
        --secondary-background-color: #333;
        --secondary-border-color: #555;
        --secondary-color: #efefef;
        --footer-background-color: #111;
        --footer-content-background-color: #111;
    }
    header .logo, footer .tm-logo {
        filter: brightness(0) grayscale(1) invert(1);
    }
}