/*
    Colors used throughout the application
    Inspired by material color system: https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color
    Colors are named using Vue Design System: https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors
*/

// --- Primary | The color displayed most frequently across screens and components
$color-primary              : #3a65ab;
$color-primary-light        : lighten($color-primary, 30%);
$color-primary-dark         : darken($color-primary, 18%);
$color-primary-darker       : darken($color-primary, 32%);
$color-primary-darkest      : darken($color-primary, 44%);
// Text/iconography color that is usable on top of primary color
$color-on-primary           : #e4f1fe;

// --- Secondary | Accent color, should be applied sparingly to accent select parts of UI
$color-secondary            : #00D1AD;
$color-secondary-light      : lighten($color-secondary, 48%);
// Text/iconography color that is usable on top of secondary color
$color-on-secondary         : #005051;

// --- Surface | Affect surfaces of components, such as cards, sheets, and menus.
$color-surface              : #fff;
// Text/iconography color that is usable on surface
$color-on-surface           : #4d5156;

// Background | Appears behind scrollable content.
$color-background           : #e6ecf4;