/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
:root {
    --font-family: 'Lato';
    --primary-color: #007cc5;
    --primary-color-dark: #0d5a8a;
    --negative-color: #e55353;
    --negative-color-dark: #c03939;
    --neutral-color: #6c757d;
    --neutral-color-dark: #5a6268;

    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;

    --font-color-primary: #242424;
    --font-color-secondary: #3a3a3a;
}

.application-layout {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    width: 100vw;
    background: #fff;
}

.main-content-area {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
}

.main-content {
    flex: 1 1 auto;
    padding: 32px 32px 0 32px;
    max-width: 100vw;
    box-sizing: border-box;
}

:is(h1, h2, h3, span) {
    color: var(--font-color-primary);
}