@font-face { font-family: font_app1; src: url("fonts/font1.otf"); }
@font-face { font-family: font_app2; src: url("fonts/font2.otf"); }
@font-face { font-family: font_app3; src: url("fonts/font3.ttf"); }
@font-face { font-family: font_app4; src: url("fonts/font4.ttf"); }
@font-face { font-family: font_app5; src: url("fonts/font5.ttf"); }
@font-face { font-family: font_app6; src: url("fonts/font6.ttf"); }

:root
{
  --main-color: #791E47; /* CF4B73 */
  --alter-main-color: #8C2B60; /* C15086 */

  --primary-background: #FFFFFF; /* FFF0F5 */
  --secondary-background: #FCFCFD; /* FEE0E8 */
  --tertiary-background: #F9F9FB; /* F4C9D3 */ 
  
  --transparent-background: rgba(0, 0, 0, .6);

  --dark-background: rgba(0, 0, 0, 1);

  --primary-color: #1E1F24; /* 36131E */
  --secondary-color: #62636C; /* 774653 */
  --tertiary-color: #FFFFFF; /* FFFFFF */

  --primary-border: #D8D9E0; /* E3B8C0 */
}

html, body, a, span { color: var(--primary-color); }
i, svg { color: var(--main-color); height: 20px; }
* input:checked { accent-color: var(--main-color); }

.font-app1 { font-family: font_app1; }
.font-app2 { font-family: font_app2; }
.font-app3 { font-family: font_app3; }
.font-app4 { font-family: font_app4; }
.font-app5 { font-family: font_app5; }
.font-app6 { font-family: font_app6; }

/* BACKGROUND COLOR */
.main-bg { background-color: var(--main-color); }
.alter-main-bg { background-color: var(--alter-main-color); }
.main-bg > span, .main-bg > p { color: var(--tertiary-color); }
.alter-main-bg > span, .alter-main-bg > p { color: var(--tertiary-color); }
.primary-bg { background-color: var(--primary-background); }
.secondary-bg { background-color: var(--secondary-background); }
.tertiary-bg { background-color: var(--tertiary-background); }
.transparent-bg { background-color: var(--transparent-background); }

.dark-bg { background-color: var(--dark-background); }

/* BUTTONS */
.active-btn { background-color: var(--main-color); }
.active-btn > span { color: var(--quaternary-color) !important; }
.active-btn > div > span { color: var(--quaternary-color) !important; }
.active-btn-outlined > span { color: var(--main-color) !important; }
.active-btn-outlined > div > span { color: var(--main-color) !important; }
.inactive-btn-outlined > span { color: var(--secondary-color) !important; }
.inactive-btn-outlined > div > span { color: var(--secondary-color) !important; }

.hover-btn:hover { background-color: var(--main-color); }
.hover-btn > div > span { color: var(--primary-color); }
.hover-btn:hover > span { color: var(--tertiary-color); }
.hover-btn:hover > div > span { color: var(--tertiary-color); }

.disable-btn { background-color: var(--transparent-background); }
.disable-btn > div > span { color: var(--secondary-color); }

/* FONT COLOR */
.main-fc { color: var(--main-color); }
.alter-main-fc { color: var(--alter-main-color); }
.primary-fc { color: var(--primary-color); }
.secondary-fc { color: var(--secondary-color); }
.tertiary-fc { color: var(--tertiary-color); }

/* BORDER */
.app-1-border { border: 1px solid var(--primary-border); }
.app-1-border-top { border-top: 1px solid var(--primary-border); }
.app-1-border-right { border-right: 1px solid var(--primary-border); }
.app-1-border-bottom { border-bottom: 1px solid var(--primary-border); }
.app-1-border-left { border-left: 1px solid var(--primary-border); }

.app-2-border { border: 2px solid var(--primary-border); }
.app-2-border-top { border-top: 2px solid var(--primary-border); }
.app-2-border-right { border-right: 2px solid var(--primary-border); }
.app-2-border-bottom { border-bottom: 2px solid var(--primary-border); }
.app-2-border-left { border-left: 2px solid var(--primary-border); }

/* INPUT AUTOCOMPLETE */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
{
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--primary-color) !important;
}