/* Não usar pure white or pure black: https://uxplanet.org/basicdesign-never-use-pure-black-in-typography-36138a3327a6 */
/* The 4-point grid system: https://medium.com/@sainzkike/controlling-spacing-in-design-systems-multiple-spacing-9bf1afec87f */

:root {
    --primary-brand-color: #ED145B;
    --secondary-brand-color: #0762C8;
    --success: #198754;
    --success-dark: #095c36;
    --success-light: #9dd3ba;
    --warning: #ffc107;
    --warning-dark: #705400;
    --warning-light: #fdebb3;
    --danger: #dc3545;
    --danger-dark: #990c19;
    --danger-light: #f0c1c6;
    --new-gray: #CCCCCC;
    --new-black: #212427;
    --new-white: #E8E8E8;
}

body {
    color: var(--new-black);
    background-color: var(--new-white);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

button {
    font-family: monospace;
    font-weight: bold;
}

.flex-colunar {
    display: flex;
    flex-direction: column;
}

.width-fit-content {
    width: fit-content;
}

.border-primary {
    border: 3px solid var(--primary-brand-color);
}

.border-secondary {
    border: 3px solid var(--secondary-brand-color);
}

.padding-8 {
    padding: 8px;
}

.text-bold {
    font-weight: bold;
}

.text-success-with-bg {
    color: var(--success-dark);
    background-color: var(--success-light);
}

.text-warning-with-bg {
    color: var(--warning-dark);
    background-color: var(--warning-light);
}

.text-danger-with-bg {
    color: var(--danger-dark);
    background-color: var(--danger-light);
}

.text-new-gray {
    color: var(--new-gray);
}