/* Joe's Palette */

:root {
    --color-link: var(--color-orange);

    /* can we remove these? */
    --color-success: var(--color-dark);
    --color-info: var(--color-grey);
    --color-warning: var(--color-maroon);
    --color-danger: var(--color-maroon);
    --color-required-label: var(--color-orange);
    --color-tr-background: var(--color-dark);
    --color-tr-alternate-background: var(--color-dark);

    --margin-bottom: 1rem;
    --margin-bottom-small: 0.3rem;
    --border-radius: 5px;
    --border: 1px solid var(--color-beige);
    --padding-base: 10px;
    --outline-input: 2px solid var(--color-beige);

    --font-family:
        'National Park', 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial,
        sans-serif;
    --font-family-headline:
        'National Park', 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial,
        sans-serif;
    --font-weight: 800;

    --color-dark: #302f2a;
    --color-grey: #5a5855;
    --color-beige: #dacb88;
    --color-maroon: #862b18;
    --color-orange: #e85e13;
    --color-light-brown: #a28245;
    --color-dark-brown: #ac582a;
    --color-grey-brown: #6b5239;
    --color-v-dark: #0d0d0d;

    --color-background: var(--color-v-dark);
    --color-primary: var(--color-orange);
    --color-header-night: var(--color-orange);

    /* --color-closed-eye: var(--color-grey); */

    --color-night-subheader: var(--color-light-brown);

    /* Default to dark until render */
    --color-card-bg-1: var(--color-dark);
    --color-card-bg-2: var(--color-dark);
    --color-card-bg-3: var(--color-dark);
    --color-card-bg-4: var(--color-dark);
    --color-card-label: var(--color-dark);
    --color-card-value: var(--color-dark);
    --color-card-value-1: var(--color-dark);
    --color-card-label-4: var(--color-dark);

    --color-chart-grid: var(--color-beige);
    --color-chart-button: var(--color-maroon);
    --color-chart-button-active: var(--color-grey-brown);
    --color-chart-axes-1: var(--color-light-brown);
    --color-chart-axes-2: var(--color-light-brown);
    --color-chart-legend: var(--color-light-brown);
    --color-trace-light-1: var(--color-beige);
    --color-trace-light-2: var(--color-light-brown);
    --color-trace-deep: var(--color-orange);
    --color-trace-rem: var(--color-maroon);
    --color-trace-ibi: var(--color-dark); /* maybe grey */
    --color-trace-hypnogram: var(--color-maroon);
}