:root {

    /* hlavní pastel barvy */
    --color-primary: #6B7CFF;      /* pastel fialová */
    --color-success: #5CCF9F;      /* pastel zelená */
    --color-secondary: #A3A7C4;    /* šedo-fialová */
    --color-warning: #FFB86B;      /* meruňková */
    --color-danger: #FF6F8E;       /* růžová */
    --color-light: #FAFAF7;
    --color-title: #5e3d92;

    /* layout */

    --color-bg: rgba(255,245,235,.65);;
    --color-card: #FFFFFF;
    --color-text: #2E2E2E;
    --color-text-muted: #7A7A9A;
    --color-border: #ECECF5;

    /* buttons */
    --btn-primary: #6B7CFF;
    --btn-secondary: #A3A7C4;
    --btn-success: #5CCF9F;
    --btn-warning: #FFB86B;
    --btn-danger: #FF6F8E;

    /* hover */
    --btn-primary-hover: #5667e8;
    --btn-secondary-hover: #8d90b2;
    --btn-success-hover: #4cb88a;
    --btn-warning-hover: #ffa64b;
    --btn-danger-hover: #ff5c7f;

}


body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

a {
    color: var(--color-warning) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--btn-warning-hover) !important;
}

.card {
    background-color: var(--color-card);
    border-color: var(--color-border);
}

h1 {
    color: var(--color-title);
}

h2,
h3,
h4,
h5,
h6 {
    color: var(--color-primary);
}

.btn {
    border-radius: 40px !important;
    font-weight: 600;
    padding: 10px 22px;
}

.main-content {
    padding: 20px 0;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-light) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.btn-primary {
    color: var(--color-light) !important;
    background-color: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
}

.btn-primary:hover {
    color: var(--color-light) !important;
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}

.btn-secondary {
    color: var(--color-light) !important;
    background-color: var(--btn-secondary) !important;
    border-color: var(--btn-secondary) !important;
}

.btn-secondary:hover {
    color: var(--color-light) !important;
    background-color: var(--btn-secondary-hover) !important;
    border-color: var(--btn-secondary-hover) !important;
}

.btn-success {
    color: var(--color-light) !important;
    background-color: var(--btn-success) !important;
    border-color: var(--btn-success) !important;
}

.btn-success:hover {
    color: var(--color-light) !important;
    background-color: var(--btn-success-hover) !important;
    border-color: var(--btn-success-hover) !important;
}

.btn-warning {
    color: var(--color-light) !important;
    background-color: var(--btn-warning) !important;
    border-color: var(--btn-warning) !important;
}

.btn-warning:hover {
    color: var(--color-light) !important;
    background-color: var(--btn-warning-hover) !important;
    border-color: var(--btn-warning-hover) !important;
}

.btn-danger {
    color: var(--color-light) !important;
    background-color: var(--btn-danger) !important;
    border-color: var(--btn-danger) !important;
}

.btn-danger:hover {
    color: var(--color-light) !important;
    background-color: var(--btn-danger-hover) !important;
    border-color: var(--btn-danger-hover) !important;
}


.btn-outline-primary {
    color: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
}

.btn-outline-primary:hover {
    color: var(--color-light) !important;
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}

.btn-outline-secondary {
    color: var(--btn-secondary) !important;
    border-color: var(--btn-secondary) !important;
}

.btn-outline-secondary:hover {
    color: var(--color-light) !important;
    background-color: var(--btn-secondary-hover) !important;
    border-color: var(--btn-secondary-hover) !important;
}

.btn-outline-success {
    color: var(--btn-success) !important;
    border-color: var(--btn-success) !important;
}

.btn-outline-success:hover {
    color: var(--color-light) !important;
    background-color: var(--btn-success-hover) !important;
    border-color: var(--btn-success-hover) !important;
}

.btn-outline-warning {
    color: var(--btn-warning) !important;
    border-color: var(--btn-warning) !important;
}

.btn-outline-warning:hover {
    color: var(--color-light) !important;
    background-color: var(--btn-warning-hover) !important;
    border-color: var(--btn-warning-hover) !important;
}

.btn-outline-danger {
    color: var(--btn-danger) !important;
    border-color: var(--btn-danger) !important;
}

.btn-outline-danger:hover {
    color: var(--color-light) !important;
    background-color: var(--btn-danger-hover) !important;
    border-color: var(--btn-danger-hover) !important;
}