@import url('load-fonts.css');

:root {
    --blue: #3284b9;
    --yellow: #f7be10;
    --orange: #f08c43;
    --purple: #3812b3;
    --light-purple-01: #4015cd;
    --dark-purple-01: #2d0e8f;
    --light-gray: #f0f0f0;
    --medium-gray: #ccc;
    --dark-gray: #666;
    --dark-gray-light: #777;
    --dark-gray-dark: #555;
    --half-transparent: rgb(255 255 255 / 75%);
    --normal-font-size: 16px;
    --small-font-size: 12px;
    --big-font-size: 20px;
}

/* Apply font to all elements and pseudo-elements */
*,
*::before,
*::after {
    font-family: 'Noto Sans', 'HarmonyOS_Regular', sans-serif;
    font-optical-sizing: auto;
    font-display: swap;
    font-size: var(--normal-font-size);
    font-weight: normal;
}

button {
    background-color: transparent;
    border: none;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--purple);
    color: var(--purple);
    font-size: var(--normal-font-size);
    font-weight: normal;
    padding: calc(var(--normal-font-size) * 0.75);
    cursor: pointer;
    transition: background-color 0.05s ease;

    /* Disable text selection on buttons to avoid issues on touch devices */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

button:hover {
    background-color: initial;
    transform: none;
}

/* Use custom classes instead of the standard button:hover and button:active selectors
    to avoid issues with touch devices (see global.js) */
button.hovered {
    background-color: rgb(0 0 0 / 5%);
    box-shadow: 0 0 0 1px var(--purple);
    cursor: pointer;
}

button.active-enabled:active {
    background-color: rgb(0 0 0 / 12%);
    box-shadow: 0 0 0 2px var(--purple);
}

input {
    padding: 12px 10px;
    border: 1px solid var(--medium-gray);
    border-radius: 6px;
    font-size: var(--normal-font-size);
    color: var(--dark-gray);
    background-color: white;
}

input:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 1px var(--yellow);
}

::placeholder {
    color: #000;
    opacity: 0.54;
    font-family: inherit;
    font-size: var(--normal-font-size);
    font-weight: normal;
}