/*
* This file is used for generating the global styles for the Tegel Light package.
* It is a copy of the global.scss file in the core package, buwithout the web component styles.
* Once the Web Components imports are removed from the global.scss file, that file can be used for Tegel Light as well. 
*/

/* Multibrand tokens: Scania colors */
@import '../../../../color/scania-color-primitives';
@import '../../../../color/scania-brand-usage';

/* Multibrand tokens: Scania typography */
@import '../../../../typography/tokens/typography-scania';

/* Multibrand tokens: Scania spacing */
@import '../../../../spacing/units';
@import '../../../../spacing/radius';
@import '../../../../spacing/scania-units';

// Motion
@import '../../../../motion/';

// Colors
@import '../../../../color/color';

// Grid (Deprecated - will be removed in version 2.0)
@import '../../../../grid-deprecated/grid-deprecated';

// Grid new
@import '../../../../grid/grid';

// Typography
@import '../../../../typography/scania-fonts';
@import '../../../../typography/scania-fonts-vars';
@import '../../../../typography/scania-fonts-selectors';

// Logos
@import '../../../../logotype/logotype-scania';

// Vars
@import '_variables';
@import 'scrollbar-vars';
@import 'focus-vars';

// Utility classes
@import '_utility-classes';

// Beta components
@import '../components/_beta/date-picker/date-picker-single/date-picker-vars';

body {
  font-family: 'Scania Sans Semi Condensed', 'Scania Sans Condensed', Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin: 0;
  flex: 1;
}

:root,
.tds-mode-light {
  color: var(--tds-grey-958);
  background-color: var(--tds-white);

  &.tds-mode-variant-primary,
  & .tds-mode-variant-primary {
    color: var(--tds-grey-958);
    background-color: var(--tds-white);
  }

  &.tds-mode-variant-secondary,
  & .tds-mode-variant-secondary {
    color: var(--tds-grey-958);
    background-color: var(--tds-grey-50);
  }
}

.tds-mode-dark {
  color: var(--tds-grey-100);
  background-color: var(--tds-grey-958);

  &.tds-mode-variant-primary,
  & .tds-mode-variant-primary {
    color: var(--tds-grey-100);
    background-color: var(--tds-grey-958);
  }

  &.tds-mode-variant-secondary,
  & .tds-mode-variant-secondary {
    color: var(--tds-grey-100);
    background-color: var(--tds-grey-900);
  }
}

@import 'shame';