// Copyright 2020 Energinet DataHub A/S
//
// Licensed under the Apache License, Version 2.0 (the "License2");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
:root {
  // Primary
  --watt-color-primary: #00898a;
  --watt-color-primary-contrast: var(--watt-color-neutral-white);
  --watt-color-primary-light: #b2d0d2;
  --watt-color-primary-light-contrast: var(--watt-color-neutral-black);
  --watt-color-primary-dark: #005d5c;
  --watt-color-primary-dark-contrast: var(--watt-color-neutral-white);
  --watt-color-primary-darker: #02525e;
  --watt-color-primary-darker-contrast: var(--watt-color-neutral-white);
  --watt-color-primary-ultralight: #ebf5f5;
  --watt-color-primary-ultralight-contrast: var(--watt-color-neutral-black);
  --mitid-color: #0061e9;
  --mitid-color-hover: #176ee9;
  // Secondary
  --watt-color-secondary: #f8ad3c;
  --watt-color-secondary-dark: #ee9331;
  --watt-color-secondary-light: #f9dba7;
  --watt-color-secondary-ultralight: #fff4de;
  --watt-color-secondary-ultralight-contrast: var(--watt-color-neutral-black);
  // Data Visualization
  --watt-color-data-1: #9fcd91;
  --watt-color-data-2: #a0c1c2;
  --watt-color-data-3: #00a58d;
  // Neutrals
  --watt-color-neutral-black: #000;
  --watt-color-neutral-black-contrast: var(--watt-color-neutral-white);
  --watt-color-neutral-white: #fff;
  --watt-color-neutral-white-contrast: var(--watt-color-neutral-black);
  --watt-color-neutral-grey-50: #fafafa;
  --watt-color-neutral-grey-50-contrast: var(--watt-color-neutral-black);
  --watt-color-neutral-grey-100: #f5f5f5;
  --watt-color-neutral-grey-100-contrast: var(--watt-color-neutral-black);
  --watt-color-neutral-grey-200: #eeeeee;
  --watt-color-neutral-grey-200-contrast: var(--watt-color-neutral-black);
  --watt-color-neutral-grey-300: #e0e0e0;
  --watt-color-neutral-grey-300-contrast: var(--watt-color-neutral-black);
  --watt-color-neutral-grey-400: #bdbdbd;
  --watt-color-neutral-grey400--contrast: var(--watt-color-neutral-black);
  --watt-color-neutral-grey-500: #9e9e9e;
  --watt-color-neutral-grey-500-contrast: var(--watt-color-neutral-black);
  --watt-color-neutral-grey-600: #757575;
  --watt-color-neutral-grey-600-contrast: var(--watt-color-neutral-white);
  --watt-color-neutral-grey-700: #616161;
  --watt-color-neutral-grey-700-contrast: var(--watt-color-neutral-white);
  --watt-color-neutral-grey-800: #424242;
  --watt-color-neutral-grey-800-contrast: var(--watt-color-neutral-white);
  --watt-color-neutral-grey-900: #212121;
  --watt-color-neutral-grey-900-contrast: var(--watt-color-neutral-white);
  // States
  --watt-color-state-danger: #d12923;
  --watt-color-state-danger-contrast: var(--watt-color-neutral-white);
  --watt-color-state-danger-light: #f4c9c8;
  --watt-color-state-danger-light-contrast: var(--watt-color-neutral-black);
  --watt-color-state-warning: var(--watt-color-secondary-dark);
  --watt-color-state-warning-contrast: var(--watt-color-neutral-black);
  --watt-color-state-warning-light: #fef5d5;
  --watt-color-state-warning-light-contrast: var(--watt-color-neutral-black);
  --watt-color-state-success: #7fb069;
  --watt-color-state-success-contrast: var(--watt-color-neutral-black);
  --watt-color-state-success-light: #dfebda;
  --watt-color-state-success-light-contrast: var(--watt-color-neutral-black);
  --watt-color-state-info: #00a6bc;
  --watt-color-state-info-contrast: var(--watt-color-neutral-black);
  --watt-color-state-info-light: #d6f1f4;
  --watt-color-state-info-light-contrast: var(--watt-color-neutral-black);
  // Typography
  --watt-typography-headline-color: var(--watt-on-light-high-emphasis);
  --watt-typography-text-color: var(--watt-on-light-high-emphasis);
  --watt-typography-button-color: var(--watt-color-primary);
  --watt-typography-label-color: var(--watt-on-light-high-emphasis);
  --watt-typography-link-color: var(--watt-color-primary-dark);
  // Text Color Emphasis
  --watt-on-light-high-emphasis: rgba(0, 0, 0, 0.87);
  --watt-on-light-medium-emphasis: rgba(0, 0, 0, 0.62);
  --watt-on-light-low-emphasis: rgba(0, 0, 0, 0.38);
  --watt-on-dark-high-emphasis: rgba(255, 255, 255, 1);
  --watt-on-dark-medium-emphasis: rgba(255, 255, 255, 0.62);
  --watt-on-dark-low-emphasis: rgba(255, 255, 255, 0.38);
  // Surface overlays
  --watt-on-light-surface-overlay: rgba(33, 33, 33, 0.08);

  // ripple
  // based on primary color
  --watt-ripple-color: rgba(0, 137, 138, 0.1);

  // shadows
  --watt-bottom-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08);

  // Components
  --watt-sidenav-background-color: #09505d;
  --watt-nav-list-hover-background-color: #07404a;
}
