/**
 * Copyright (C) 2025 Brainformatik GmbH (info@brainformatik.com)
 *
 * This file is part of brainX.
 * All Rights Reserved.
 *
 * This part of brainX can not be copied and/or distributed without the
 * express permission of Brainformatik GmbH.
 */

:root {
  --theme-color-primary: 255 60 0;
  --theme-color-primary-50: 255 228 219;
  --theme-color-primary-100: 255 201 183;
  --theme-color-primary-200: 255 167 140;

  --theme-color-secondary: 0 180 143;
  --theme-color-secondary-100: 224 244 239;
  --theme-color-secondary-300: 102 210 188;
  --theme-color-secondary-600: 0 161 136;
  --theme-color-secondary-700: 0 117 93;

  --theme-color-tertiary: 30 40 80;
  --theme-color-supporting: 126 47 141;
  --theme-color-supporting-100: 242 234 244;

  --theme-color-grey-default: 37 38 39;
  --theme-color-grey-10: 249 250 251;
  --theme-color-grey-20: 249 249 249;
  --theme-color-grey-30: 243 244 247;
  --theme-color-grey-50: 244 244 246;
  --theme-color-grey-100: 233 234 238;
  --theme-color-grey-200: 210 212 220;
  --theme-color-grey-500: 142 147 167;
  --theme-color-grey-600: 124 125 129;
  --theme-color-grey-700: 83 88 106;
  --theme-color-grey-800: 76 78 82;
  --theme-color-grey-200-40: 244 244 246;

  --theme-color-info: 13 157 221;
  --theme-color-info-50: 231 245 252;

  --theme-color-success: 0 180 143;
  --theme-color-success-50: 242 251 249;
  --theme-color-success-100: 224 244 239;

  --theme-color-warning: 255 200 48;
  --theme-color-warning-50: 255 249 234;
  --theme-color-warning-700: 204 137 0;

  --theme-color-error: 220 51 51;
  --theme-color-error-50: 253 245 245;
}

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: var(--viewport-height, 100vh);
}

html {
  font-family: 'Roboto', ui-sans-serif, system-ui;
  color: rgb(var(--theme-color-grey-default));
  background-color: rgb(var(--theme-color-grey-10));
  height: var(--viewport-height, 100vh);
}

body {
  margin: 0;
  height: var(--viewport-height, 100vh);
  overflow: hidden;
}

#__nuxt {
  height: var(--viewport-height, 100vh);
}

#__nuxt > div {
  height: var(--viewport-height, 100vh);
}

.app-shell {
  height: var(--viewport-height, 100vh);
  overflow: hidden;
}

@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 150ms ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local('Roboto Regular'),
    local('Roboto-Regular'),
    url('/fonts/roboto/roboto-v49-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    local('Roboto SemiBold'),
    local('Roboto-SemiBold'),
    url('/fonts/roboto/roboto-v49-latin-600.woff2') format('woff2');
}
