/*
 * theme_mode: light
 *
 * those are only the color definitions
 */

:root
{
    /* define colors*/
    --main-color-red: 255, 0, 0;
    --main-color-orange: 255, 165, 0;
    --main-color-yellow: 255, 255, 0;
    --main-color-green: 68, 219, 94;
    --main-color-white: 250, 250, 250;
    --main-color-black: 60, 60, 63;

    /* main elements */
    --main-bg-color: 250, 250, 250;
    --main-font-color: 60, 60, 63;
    --main-border-color: 218, 218, 218; /* 239, 239, 244 --background-color */
    --main-shadow-color: 60, 60, 63;
    --main-glow-color: 255, 217, 92;

    /* an element inside main-bg-color */
    --second-bg-color: 238, 238, 238;

    /* smt. you have dark background and need light font */
    --main-font-color-opposite: 250, 250, 250;

    /* apply to onsen */
    --text-color: rgba(var(--main-font-color), 1);
    --background-color: rgba(var(--main-bg-color), 1);
    --border-color: rgba(var(--main-border-color), 1);
    --toolbar-text-color: rgba(var(--main-font-color), 1);
    --toolbar-background-color: rgba(var(--main-bg-color), 1);
    --modal-text-color: rgba(var(--main-font-color), 1);
    --alert-dialog-background-color: rgba(var(--main-bg-color), 1);
    --alert-dialog-text-color: rgba(var(--main-font-color), 1);
    --popover-background-color: rgba(var(--main-bg-color), 1);
    --switch-checked-background-color: rgba(var(--main-color-green), 1);
    --list-item-chevron-color: var(--text-color);
    --progress-bar-secondary-color: rgba(var(--main-font-color), 0.2);
    --button-quiet-color: rgba(var(--highlight-color-rgb), 0.8);
    --action-sheet-title-color: rgba(var(--main-font-color), 1);
    --action-sheet-button-background-color: rgba(var(--main-bg-color), 1);
    --action-sheet-cancel-button-background-color: rgba(var(--second-bg-color), 1);
}