undergroundwires/privacy.sexy

/*
    Colors used throughout the application
    Inspired by the material color system (https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color).
    Colors are named according to the Vue Design System guidelines (https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors):
        - Default: The default base color is `color-{name}`.
        - Darker than default: Shades are named as `color-{name}-dark`, `color-{name}-darker`, or `color-{name}-darkest`.
        - Lighter than default: Tints are named as `color-{name}-light`, `color-{name}-lighter`, or `color-{name}-lightest`.
*/

// --- 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;

$color-success  : #4CAF50;
$color-danger   : #F44336;
$color-caution  : #FFC107;

/*
    Application-specific colors:
    These are tailored to the specific needs of the application and derived from the above theme colors.
    Use these colors to ensure consistent styling across components. When adding new colors, reference existing theme colors.
    This approach maintains a cohesive look and feel and simplifies theme adjustments.
*/
$color-scripts-bg: $color-primary-darker;
$color-highlight: $color-primary;