/* FONTS
*/
@font-face {
    font-family: "sh-icons";
    font-style: normal;
    font-weight: 500;
    src:
        url("./fonts/sh-icons.woff") format("woff")
}
@font-face {
    font-family: 'siemens sans';
    font-style: normal;
    font-weight: 500;
    src:
        url("./fonts/sisan03.woff") format("woff"),
        url("./fonts/sisan03.woff2") format("woff2")
}
@font-face {
    font-family: 'siemens sans';
    font-style: normal;
    font-weight: 900;
    src:
        url("./fonts/sisan08.woff") format("woff"),
        url("./fonts/sisan08.woff2") format("woff2")
}
@font-face {
    font-family: 'bree-headline';
    font-style: normal;
    font-weight: 500;
    src:
        url('./fonts/Bree-SH-Headline-Regular.woff') format('woff'),
        url('./fonts/Bree-SH-Headline-Regular.woff2') format('woff2')
}
/* Reset margins and paddings for our custom classes */
[class^="display-"],
[class^="title-"],
[class^="body-"],
.caption {
  margin: 0;
  padding: 0;
}

/* Reset for native elements when using our classes */
h1[class^="display-"],
h2[class^="display-"],
h3[class^="display-"],
h4[class^="display-"],
h5[class^="display-"],
h6[class^="display-"],
h1[class^="title-"],
h2[class^="title-"],
h3[class^="title-"],
h4[class^="title-"],
h5[class^="title-"],
h6[class^="title-"],
p[class^="body-"],
span[class^="body-"],
span.caption {
  margin: 0;
  padding: 0;
}

a{
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: underline;
}
a:focus-visible{
  outline-color: var(--focus-color);
}

a:hover, a.hover{
  color: var(--text-highlight) !important; 
}

/* Typography Classes – Font family, default weight, style and color */
.display-500, .display-400, .display-300, .display-200, .display-100 {
  font-family: var(--font-family-display);
  font-weight: var(--text-font-weight-normal);
  font-style: var(--text-font-style-normal);
  color: var(--color-text-strong);
}

.title-300, .title-200, .title-100 {
  font-family: var(--font-family-text);
  font-weight: var(--text-font-weight-bold);
  font-style: var(--text-font-style-normal);
  color: var(--color-text-strong);
}

.body-300, .body-200, .body-100 {
  font-family: var(--font-family-text);
  font-weight: var(--text-font-weight-normal);
  font-style: var(--text-font-style-normal);
  color: var(--color-text-moderate);
}

.caption {
  font-family: var(--font-family-text);
  font-weight: var(--text-font-weight-bold);
  font-style: var(--text-font-style-normal);
  color: var(--color-text-strong);
}


/* Individual class definitions for font-size and line-height */
.display-500 {
  font-size: var(--text-font-size-display-500);
  line-height: var(--text-line-height-display-500);
}

.display-400 {
  font-size: var(--text-font-size-display-400);
  line-height: var(--text-line-height-display-400);
}

.display-300 {
  font-size: var(--text-font-size-display-300);
  line-height: var(--text-line-height-display-300);
}

.display-200 {
  font-size: var(--text-font-size-display-200);
  line-height: var(--text-line-height-display-200);
}

.display-100 {
  font-size: var(--text-font-size-display-100);
  line-height: var(--text-line-height-display-100);
}

.title-300 {
  font-size: var(--text-font-size-title-300);
  line-height: var(--text-line-height-title-300);
}

.title-200 {
  font-size: var(--text-font-size-title-200);
  line-height: var(--text-line-height-title-200);
}

.title-100 {
  font-size: var(--text-font-size-title-100);
  line-height: var(--text-line-height-title-100);
}

.body-300 {
  font-size: var(--text-font-size-body-300);
  line-height: var(--text-line-height-body-300);
}

.body-200 {
  font-size: var(--text-font-size-body-200);
  line-height: var(--text-line-height-body-200);
}

.body-100 {
  font-size: var(--text-font-size-body-100);
  line-height: var(--text-line-height-body-100);
}

.caption {
  font-size: var(--text-font-size-caption);
  line-height: var(--text-line-height-caption);
}

/* Color override classes */
.color-disabled { color: var(--color-text-disabled); }
.color-subtle { color: var(--color-text-subtle); }
.color-moderate { color: var(--color-text-moderate); }
.color-strong { color: var(--color-text-strong); }


/* Enforcing certain Colors and Styles*/

/* Display headings must use strong color */
[class^="display-"].color-subtle,
[class^="display-"].color-moderate {
  color: var(--color-text-strong);
}

/* Title headings can use strong or moderate color, not subtle */
[class^="title-"].color-subtle{
  color: var(--color-text-moderate);
}

/* Display headings must not adopt bold or italic styling */
[class^="display-"] i, [class^="display-"] em, [class^="display-"] b, [class^="display-"] strong {
  font-style: normal;
  font-weight: inherit;
}

.caption i, .caption em{
  font-style: normal;
}

/* Allow italic for title and body styles */
[class^="title-"] i, [class^="title-"] em,
[class^="body-"] i, [class^="body-"] em {
  font-style: italic;
}
.distance-display {
  font-family: var(--font-family-display);
  font-weight: var(--text-font-weight-normal);
  font-size: calc(var(--text-font-size-distance-display) * var(--sh-public-distance-text-scaling));
  line-height: calc(var(--text-line-height-distance-display) * var(--sh-public-distance-text-scaling));
}

.distance-title-200 {
  font-family: var(--font-family-text);
  font-weight: var(--text-font-weight-bold);
  font-size: calc(var(--text-font-size-distance-title-200) * var(--sh-public-distance-text-scaling));
  line-height: calc(var(--text-line-height-distance-title-200) * var(--sh-public-distance-text-scaling));
}

.distance-title-100 {
  font-family: var(--font-family-text);
  font-weight: var(--text-font-weight-bold);
  font-size: calc(var(--text-font-size-distance-title-100) * var(--sh-public-distance-text-scaling));
  line-height: calc(var(--text-line-height-distance-title-100) * var(--sh-public-distance-text-scaling));
}

.distance-body {
  font-family: var(--font-family-text);
  font-weight: var(--text-font-weight-normal);
  font-size: calc(var(--text-font-size-distance-body) * var(--sh-public-distance-text-scaling));
  line-height: calc(var(--text-line-height-distance-body) * var(--sh-public-distance-text-scaling));
}

[class^="parameter-"] {
  font-family: var(--font-family-paramteter);
  font-weight: var(--text-font-weight-normal);
  font-style: var(--text-font-style-normal);
  line-height: var(--text-line-height-parameter);
  color: var(--color-text-strong);
}

.parameter-700 {
  font-size: var(--text-font-size-parameter-700);
}

.parameter-600 {
  font-size: var(--text-font-size-parameter-600);
}

.parameter-500 {
  font-size: var(--text-font-size-parameter-500);
}

.parameter-400 {
  font-size: var(--text-font-size-parameter-400);
}

.parameter-300 {
  font-size: var(--text-font-size-parameter-300);
}

.parameter-200 {
  font-size: var(--text-font-size-parameter-200);
}

.parameter-100 {
  font-size: var(--text-font-size-parameter-100);
}