/*This file contains the colors for the light and dark theme*/
/*Colors for light mode*/
:root {
    /*Main colors*/
    --primary-color: #282A36;
    --accent-color: #719E40;

    /*Background colors*/
    --background-color: #d0d0d0;
    /*Accents darker than white background*/
    --background-accent-1-color: #c4c4c4;
    --background-accent-2-color: #b6b6b6;
    --background-accent-3-color: #989898;
    --background-accent-4-color: #989898;
    --background-accent-5-color: #989898;
    --modal-box-background: #dcdcdc;

    /*Border*/
    --border-accent-2-color: #d5d5d5;

    /*Text*/
    --primary-text-color: #2e3e50;
    --text-accent-color: #5f8535;
    --subdued-text-color: #575757;
    --title-color: #282A36;
    --black-white-text-color: black;
    /*Text color when the background of that text is the primary (darker than normal background) color*/
    --text-color-on-primary-color-background: #c4c4c4;
    --accent-text-color-on-primary-color-background: whitesmoke;

    /*Filters*/
    /*Style the black svg icons to the primary color https://angel-rs.github.io/css-color-filter-generator/*/
    --primary-color-filter: brightness(0) saturate(100%) invert(23%) sepia(11%) saturate(890%) hue-rotate(193deg) brightness(89%) contrast(96%);
    --accent-color-filter: brightness(0) saturate(100%) invert(55%) sepia(46%) saturate(554%) hue-rotate(72deg) brightness(87%) contrast(90%);
    /*Less bright version of the accent color*/
    --accent-darker-color-filter: brightness(0) saturate(100%) invert(54%) sepia(78%) saturate(312%) hue-rotate(46deg) brightness(70%) contrast(89%);
    /*Icon on the dark primary color background*/
    --icon-filter-dark-background:brightness(0) saturate(100%) invert(68%) sepia(3%) saturate(260%) hue-rotate(155deg) brightness(98%) contrast(91%);

    /*Buttons*/
    --btn-color: #f5f5f5;
    --btn-orange-color: #ffc081;
    --btn-red-color: #ff8d81;
}

[data-theme="dark"] {
    /*Main colors*/
    --primary-color: #282A36;
    --accent-color: #719E40;

    /*Background colors*/
    --background-color: #101213;
    /*Accents brighter than dark background but darker than white background on light mode*/
    --background-accent-1-color: #2c343d;
    --background-accent-2-color: #22262c;
    --background-accent-3-color: #2c3239;
    --background-accent-4-color: #2c343d;
    --background-accent-5-color: #3c4652;
    --background-accent-6-color: #47525e;
    --modal-box-background: #262b31;

    /*Text*/
    --primary-text-color: #c3cad0;
    --text-accent-color: var(--accent-color);
    --title-color: #c3cad0;
    --black-white-text-color: white;
    --subdued-text-color: #919fac;
    /*Text color when the background of that text is the primary color*/
    --text-color-on-primary-color-background: #9b9b9b;
    --accent-text-color-on-primary-color-background: whitesmoke;

    /*Border*/
    --border-accent-2-color: #3c4143;

    /*Filters*/
    /*Style the black svg icons to the primary color https://angel-rs.github.io/css-color-filter-generator*/
    --primary-color-filter: brightness(0) saturate(100%) invert(68%) sepia(3%) saturate(260%) hue-rotate(155deg) brightness(98%) contrast(91%);
    --accent-color-filter: brightness(0) saturate(100%) invert(55%) sepia(46%) saturate(554%) hue-rotate(72deg) brightness(87%) contrast(90%);
    --accent-darker-color-filter: brightness(0) saturate(100%) invert(54%) sepia(78%) saturate(312%) hue-rotate(46deg) brightness(65%) contrast(89%);
    --button-color-filter: brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(1747%) hue-rotate(131deg) brightness(93%) contrast(96%);
    --button-color-filter: brightness(0) saturate(100%) invert(33%) sepia(60%) saturate(272%) hue-rotate(131deg) brightness(94%) contrast(92%);
    --icon-filter-dark-background: var(--primary-color-filter);

    /*Buttons*/
    --btn-color: #3c4551;
    --btn-orange-color: #c4884e;
    --btn-red-color: #da5f52;
}