/*
 * Add your custom variables here
 *
 * Think about breakpoints (that effect multiple components, default settings for transients, border-radius or box-shadows
 */
// Animations and transitions
$transition-fast: 100ms ease-in-out;
$transition-default: 200ms ease-in-out;
$transition-slow: 300ms ease-in-out;

// Shadows
$shadow-1:
    0px 4px 4px rgba(0, 0, 0, 0.25),
    0px 1px 2px rgba(23, 27, 30, 0.25);
$shadow-2: 0px 2px 4px rgba(23, 27, 30, 0.15);
$shadow-3: 0px 4px 12px rgba(186, 199, 213, 0.5);

// Default spacing
$spacing-xs: rem(4px);
$spacing-sm: rem(8px);
$spacing-md: rem(16px);
$spacing-lg: rem(24px);
$spacing-xl: rem(32px);
$spacing-xxl: rem(64px);
$spacing-xxxl: rem(128px);

// Border radius
$border-radius-xs: rem(4px);
$border-radius-md: rem(8px);
$border-radius-lg: rem(16px);
$border-radius-round: 100%;

// Color primary
$color-primary: #495057;
$color-primary-hover: #343a40;
$color-primary-active: #343a40;
$color-primary-light: #e9ecef;
$color-primary-light-hover: #dee2e6;
$color-primary-light-active: #dee2e6;
$color-primary-dark: #343a40;
$color-primary-dark-hover: #212529;
$color-primary-dark-active: #212529;

// Color secondary
$color-secondary: #5d9fec;
$color-secondary-hover: #8ab7d7;
$color-secondary-active: #8ab7d7;
$color-secondary-light: #a2c2e6;
$color-secondary-light-hover: #4d8ed1;
$color-secondary-light-active: #4d8ed1;
$color-secondary-dark: #1d3a58;
$color-secondary-dark-hover: #142a44;
$color-secondary-dark-active: #142a44;

// Color Shades
$color-shade-lightest: #ffffff;
$color-shade-light: #ececeb;
$color-shade-default: #979f99ff;
$color-shade-dark: #3a3732;
$color-shade-darkest: #000000;

// Color alerts
$color-alert-success: #478223;
$color-alert-warning: #e63312;

// Color used for text
$color-text-light: $color-shade-light;
$color-text-dark: $color-shade-dark;

// Color used for borders
$color-border: $color-shade-dark;

// Color used for the body background
$color-body: $color-shade-lightest;

/* prettier-ignore */
$gradient-primary: 458.45% 177.84% at 51.97% 58.45%, $color-primary-light 0%, $color-primary 100%;
/* prettier-ignore */
$gradient-secondary: 44.56% 151.98% at 100% 100%, $color-secondary 0%, $color-secondary-dark 100%;
/* prettier-ignore */
@mixin gradient($attribute, $gradient) {
  #{$attribute}: -webkit-radial-gradient($gradient) !important;
  #{$attribute}: -moz-radial-gradient($gradient) !important;
  #{$attribute}: -ms-radial-gradient($gradient) !important;
  #{$attribute}: -o-radial-gradient($gradient) !important;
  #{$attribute}: radial-gradient($gradient) !important;
}

@mixin gradient-primary($attribute) {
    @include gradient($attribute, $gradient-primary);
}

@mixin gradient-secondary($attribute) {
    @include gradient($attribute, $gradient-secondary);
}

//@see ~bootstrap/scss/_variables.css

// Fonts
$font-family-primary: 'Inter Tight', sans-serif;
$font-family-secondary: 'Inter Tight', sans-serif;

// Heading font
$font-family-heading: $font-family-primary;

// Font sizes
$font-size-default: $font-size-base; // $font-size-base is set in ../helpers/functions.scss
$font-size-xs: rem(12px);
$font-size-sm: rem(14px);
$font-size-md: rem(18px);
$font-size-lg: rem(22px);
$font-size-xl: rem(24px);
$font-size-xxl: rem(32px);
$font-size-lg-mobile: rem(20px);

// Font weights
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semi-bold: 600;
$font-weight-bold: 700;

$line-height-base: 1.5;

$text-align-default: left;

// Bootstrap override
$font-family-base: $font-family-primary;

// Also declare all variables as CSS variables for usage outside of scss
:root {
    --pn-color-primary: #{$color-primary};
    --pn-color-primary-light: #{$color-primary-light};
    --pn-color-primary-dark: #{$color-primary-dark};
    --pn-color-secondary: #{$color-secondary};
    --pn-color-secondary-light: #{$color-secondary-light};
    --pn-color-secondary-dark: #{$color-secondary-dark};
    --pn-color-dark: #{$color-shade-dark};
    --pn-color-light: #{$color-shade-light};
    --pn-color-black: #{$color-shade-darkest};
    --pn-color-white: #{$color-shade-lightest};
    --pn-gradient-primary: #{$gradient-primary};
    --pn-gradient-secondary: #{$gradient-secondary};

    // Bootstrap overrides
    --bs-body-color: #{$color-text-dark};
    --bs-body-bg: #{$color-body};

    --pn-font-family-primary: #{$font-family-primary};
    --pn-font-family-secondary: #{$font-family-secondary};
    --pn-font-family-heading: #{$font-family-heading};

    --pn-font-size-body: #{$font-size-default};
    --pn-font-size-body-md: #{$font-size-md};
    --pn-font-size-body-lg: #{$font-size-lg};
    --pn-font-size-body-xl: #{$font-size-xl};

    --pn-font-weight-regular: #{$font-weight-regular};
    --pn-font-weight-medium: #{$font-weight-medium};
    --pn-font-weight-semi-bold: #{$font-weight-semi-bold};
    --pn-font-weight-bold: #{$font-weight-bold};

    // Override Bootstrap variables
    --bs-body-font-family: #{$font-family-primary};
    --bs-body-font-size: #{$font-size-default};
    --bs-body-font-weight: #{$font-weight-regular};
    --bs-body-line-height: #{$line-height-base};
    --bs-body-text-align: #{$text-align-default};
    --nav-offset: 98px;

    @include media-breakpoint-down(md) {
        --nav-offset: 60px;
    }
}

// Menu - burger menu width
$side-menu-width: 430px;

// Content wrapper nav - offset
$nav-offset: var(--nav-offset);

// Z indexes
$z-index-header: 10; // base z-index for the header
$z-index-menu: $z-index-header; // for the menu
$z-index-side-menu: calc($z-index-header + 2);
$z-index-side-menu-overlay: calc($z-index-header + 1);
$z-index-header-md: calc($z-index-side-menu + 2); // for the header on mobile devices when menu is opened
$z-index-search-popup-bg: calc($z-index-side-menu + 3);
$z-index-search-popup: calc($z-index-side-menu + 4);
