/**
  Global PaperCSS Config
*/

// The src for fonts (false to disable)
$font-src: 'https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC&display=swap' !default;

// Imports
@if $font-src {
  @import url($font-src);
}

// Set theme colors
$primary: #41403e !default;
$secondary: #0b74d5 !default;

$success: #86a361 !default;
$warning: #ddcd45 !default;
$danger: #a7342d !default;
$muted: #868e96 !default;

$primary-light: lighten($primary, 55%) !default;
$secondary-light: lighten($secondary, 48%) !default;
$success-light: lighten($success, 32%) !default;
$warning-light: lighten($warning, 30%) !default;
$danger-light: lighten($danger, 45%) !default;
$muted-light: lighten($muted, 35%) !default;

$primary-dark: darken($primary, 50%) !default;
$secondary-dark: darken($secondary, 50%) !default;
$success-dark: darken($success, 30%) !default;
$warning-dark: darken($warning, 30%) !default;
$danger-dark: darken($danger, 45%) !default;
$muted-dark: darken($muted, 35%) !default;

$primary-light-10: lighten($primary, 10%) !default;
$secondary-light-10: lighten($secondary, 10%) !default;
$success-light-10: lighten($success, 10%) !default;
$warning-light-10: lighten($warning, 10%) !default;
$danger-light-10: lighten($danger, 10%) !default;
$muted-light-10: lighten($muted, 10%) !default;

$primary-dark-10: darken($primary, 10%) !default;
$secondary-dark-10: darken($secondary, 10%) !default;
$success-dark-10: darken($success, 23%) !default;
$warning-dark-10: darken($warning, 30%) !default;
$danger-dark-10: darken($danger, 10%) !default;
$muted-dark-10: darken($muted, 10%) !default;

$primary-shaded-70: lighten($primary, 70%) !default;
$primary-shaded-50: lighten($primary, 50%) !default;

$white-dark: rgba(#000, 0.03) !default;
$white-dark-light-80: lighten($white-dark, 80%) !default;
$light-dark: rgba(#000, 0.7) !default;
$white: rgba(#fff, 1) !default;
$main-background: rgba(#fff, 1) !default;
$black: rgba(#000, 1) !default;
$main-background-light: lighten($main-background, 50%) !default;

$primary-text: $primary-dark-10 !default;
$secondary-text: $secondary-dark-10 !default;
$success-text: $success-dark-10 !default;
$warning-text: $warning-dark-10 !default;
$danger-text: $danger-dark-10 !default;
$muted-text: $muted-dark-10 !default;

$shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
$shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;

$primary-inverse: #fff !default;


// Set dark theme colors

$dark-primary: #fff !default;
$dark-secondary: #5595ce !default;

$dark-success: #70c272 !default;
$dark-warning: #d4c252 !default;
$dark-danger: #df4c57 !default;
$dark-muted: #868e96 !default;

$dark-primary-light: lighten($dark-primary, 5%) !default;
$dark-secondary-light: lighten($dark-secondary, 5%) !default;
$dark-success-light: lighten($dark-success, 5%) !default;
$dark-warning-light: lighten($dark-warning, 5%) !default;
$dark-danger-light: lighten($dark-danger, 5%) !default;
$dark-muted-light: lighten($dark-muted, 5%) !default;

$dark-primary-dark: darken($dark-primary, 50%) !default;
$dark-secondary-dark: darken($dark-secondary, 30%) !default;
$dark-success-dark: darken($dark-success, 35%) !default;
$dark-warning-dark: darken($dark-warning, 30%) !default;
$dark-danger-dark: darken($dark-danger, 30%) !default;
$dark-muted-dark: darken($dark-muted, 35%) !default;

$dark-primary-light-10: lighten($dark-primary, 10%) !default;
$dark-secondary-light-10: lighten($dark-secondary, 10%) !default;
$dark-success-light-10: lighten($dark-success, 10%) !default;
$dark-warning-light-10: lighten($dark-warning, 10%) !default;
$dark-danger-light-10: lighten($dark-danger, 10%) !default;
$dark-muted-light-10: lighten($dark-muted, 10%) !default;

$dark-primary-dark-10: darken($dark-primary, 10%) !default;
$dark-secondary-dark-10: darken($dark-secondary, 10%) !default;
$dark-success-dark-10: darken($dark-success, 10%) !default;
$dark-warning-dark-10: darken($dark-warning, 10%) !default;
$dark-danger-dark-10: darken($dark-danger, 10%) !default;
$dark-muted-dark-10: darken($dark-muted, 10%) !default;

$dark-primary-shaded-70: darken($primary, 7%) !default;
$dark-primary-shaded-50: darken($primary, 5%) !default;

$dark-white-dark: rgba(#fff, 0.03) !default;
$dark-white-dark-light-80: lighten($dark-white-dark, 80%) !default;
$dark-light-dark: rgba(#fff, 0.7) !default;
$dark-white: rgba(#fff, 1) !default;
$dark-main-background: rgba($primary, 1) !default;
$dark-main-background-light: lighten($dark-main-background, 50%) !default;
$dark-black: rgba(#000, 1) !default;

$dark-primary-text: $primary !default;
$dark-secondary-text: $dark-secondary-dark !default;
$dark-success-text: $dark-success-dark !default;
$dark-warning-text: $dark-warning-dark !default;
$dark-danger-text: $dark-danger-dark !default;
$dark-muted-text: $dark-muted-light !default;

$dark-shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
$dark-shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;

$dark-primary-inverse: $primary !default;



$theme-map: (
  light: (
    primary: $primary,
    secondary: $secondary,
    success: $success,
    warning: $warning,
    danger: $danger,
    muted: $muted,
    primary-light: $primary-light,
    secondary-light:$secondary-light,
    success-light:$success-light,
    warning-light:$warning-light,
    danger-light:$danger-light,
    muted-light:$muted-light,
    primary-dark: $primary-dark,
    secondary-dark:$secondary-dark,
    success-dark:$success-dark,
    warning-dark:$warning-dark,
    danger-dark:$danger-dark,
    muted-dark:$muted-dark,
    primary-light-10:$primary-light-10,
    secondary-light-10:$secondary-light-10,
    success-light-10:$success-light-10,
    warning-light-10:$warning-light-10,
    danger-light-10:$danger-light-10,
    muted-light-10:$muted-light-10,
    primary-dark-10:$primary-dark-10,
    secondary-dark-10:$secondary-dark-10,
    success-dark-10:$success-dark-10,
    warning-dark-10:$warning-dark-10,
    danger-dark-10:$danger-dark-10,
    muted-dark-10:$muted-dark-10,
    primary-shaded-50: $primary-shaded-50,
    primary-shaded-70: $primary-shaded-70,
    white-dark:$white-dark,
    white-dark-light-80:$white-dark-light-80,
    light-dark:$light-dark,
    'white':$white,
    main-background: $main-background,
    main-background-light: $main-background-light,
    'black': $black,
    primary-text:$primary-text,
    secondary-text:$secondary-text,
    success-text:$success-text,
    warning-text:$warning-text,
    danger-text:$danger-text,
    muted-text:$muted-text,
    shadow-color-regular: $shadow-color-regular,
    shadow-color-hover: $shadow-color-hover,
    primary-inverse: $primary-inverse,
  ),
  dark: (
    primary: $dark-primary,
    secondary: $dark-secondary,
    success: $dark-success,
    warning: $dark-warning,
    danger: $dark-danger,
    muted: $dark-muted,
    primary-light: $dark-primary-light,
    secondary-light:$dark-secondary-light,
    success-light:$dark-success-light,
    warning-light:$dark-warning-light,
    danger-light:$dark-danger-light,
    muted-light:$dark-muted-light,
    primary-dark: $dark-primary-dark,
    secondary-dark:$dark-secondary-dark,
    success-dark:$dark-success-dark,
    warning-dark:$dark-warning-dark,
    danger-dark:$dark-danger-dark,
    muted-dark:$dark-muted-dark,
    primary-light-10:$dark-primary-light-10,
    secondary-light-10:$dark-secondary-light-10,
    success-light-10:$dark-success-light-10,
    warning-light-10:$dark-warning-light-10,
    danger-light-10:$dark-danger-light-10,
    muted-light-10:$dark-muted-light-10,
    primary-dark-10:$dark-primary-dark-10,
    secondary-dark-10:$dark-secondary-dark-10,
    success-dark-10:$dark-success-dark-10,
    warning-dark-10:$dark-warning-dark-10,
    danger-dark-10:$dark-danger-dark-10,
    muted-dark-10:$dark-muted-dark-10,
    primary-shaded-50: $dark-primary-shaded-50,
    primary-shaded-70: $dark-primary-shaded-70,
    white-dark:$dark-white-dark,
    white-dark-light-80:$dark-white-dark-light-80,
    light-dark:$dark-light-dark,
    'white':$dark-white,
    main-background: $dark-main-background,
    main-background-light: $dark-main-background-light,
    'black': $dark-black,
    primary-text:$dark-primary-text,
    secondary-text:$dark-secondary-text,
    success-text:$dark-success-text,
    warning-text:$dark-warning-text,
    danger-text:$dark-danger-text,
    muted-text:$dark-muted-text,
    shadow-color-regular: $dark-shadow-color-regular,
    shadow-color-hover: $dark-shadow-color-hover,
    primary-inverse: $dark-primary-inverse,
  )
);


html {
  @each $var in map-keys(map-get($theme-map, 'light')) {
    --#{$var}: #{map-get(map-get($theme-map, 'light'), $var)};
  }
}

html.dark {
  @each $var in map-keys(map-get($theme-map, 'dark')) {
    --#{$var}: #{map-get(map-get($theme-map, 'dark'), $var)};
  }
}


@mixin color($property, $varName) {
  // IE falls back to light theme always
  #{$property}: #{map-get(map-get($theme-map, 'light'), 'primary')};
  #{$property}: var(--#{$varName});
}

// Map to set your color names
/* stylelint-disable */
$colors: (primary, $primary, $primary-light, $primary-text),
         (secondary, $secondary, $secondary-light, $secondary-text),
         (success, $success, $success-light, $success-text),
         (warning, $warning, $warning-light, $warning-text),
         (danger, $danger, $danger-light, $danger-text),
         (muted, $muted, $muted-light, $muted-text);
/* stylelint-enable */

/**
  This Loop will generate the various .text- and .background- classes
  based on the $colors map above.
*/
@each $colorName, $color, $color-light in $colors {
  .text-#{$colorName} {
    @include color('color',#{$colorName});
  }

  .background-#{$colorName} {
    @include color('background-color',#{$colorName}-light);
  }
}

// Font settings
$global-font-size: 20px !default;
$header-font: 'Patrick Hand SC' !default;
$body-font: 'Neucha' !default;
$font-color: $primary !default;

// Responsive breakpoints
$large-screen: 1200px !default;
$medium-screen: 992px !default;
$small-screen: 768px !default;
$xsmall-screen: 480px !default;

// Sizes for shadows
$shadow-small: 10px 19px 17px -13px $shadow-color-regular !default;
$shadow-regular: 15px 28px 25px -18px $shadow-color-regular !default;
$shadow-large: 20px 38px 34px -26px $shadow-color-regular !default;
$shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;