/*
 * Fargene her er kopiert manuelt fra design-tokens i frontend/src/index.css
 * (:root og .dark). MkDocs bygges separat fra frontend-appen og kan ikke lese
 * CSS-variablene direkte, så verdiene må holdes i sync for hånd når
 * designsystemet endres. Se doc/product/design-system.md.
 */

:root {
  --md-primary-fg-color: #285cbb;
  --md-primary-fg-color--light: #204b9b;
  --md-primary-fg-color--dark: #193d80;
  --md-accent-fg-color: #285cbb;

  --ompa-warning-fg: #91530d;
  --ompa-warning-bg: #fff5df;
  --ompa-warning-border: #c78b34;
  --ompa-success-fg: #25704a;
  --ompa-success-bg: #eaf6ef;
  --ompa-success-border: #559875;
  --ompa-danger-fg: #b02e48;
}

[data-md-color-scheme='slate'] {
  --md-hue: 220;
  --md-default-bg-color: #17191d;
  --md-default-bg-color--light: #202328;
  --md-code-bg-color: #202328;
  --md-primary-fg-color: #a2c2ff;
  --md-primary-fg-color--light: #a2c2ff;
  --md-primary-fg-color--dark: #a2c2ff;
  --md-accent-fg-color: #a2c2ff;

  --ompa-warning-fg: #f0d29c;
  --ompa-warning-bg: #3a2e15;
  --ompa-warning-border: #c78b34;
  --ompa-success-fg: #a9d9bd;
  --ompa-success-bg: #16261d;
  --ompa-success-border: #559875;
  --ompa-danger-fg: #f09cab;
}

.md-header,
.md-tabs {
  color: var(--md-primary-bg-color);
}

/* Søkefeltet er nesten firkantet i Material sitt standardtema (0.1rem radius). */
.md-search__form {
  border-radius: 0.875rem;
}
[data-md-toggle='search']:checked ~ .md-header .md-search__form {
  border-radius: 0.875rem 0.875rem 0 0;
}
.md-search__output {
  border-radius: 0 0 0.875rem 0.875rem;
}

.md-content img {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.875rem;
  box-shadow: 0 0.4rem 1.4rem rgb(15 23 42 / 0.12);
}

.md-typeset h1 {
  letter-spacing: -0.025em;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.6rem;
}

/* Semantiske admonition-typer på Ompas farger i stedet for Materials standardpalett. */
.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.abstract,
.md-typeset details.abstract {
  border-color: var(--ompa-success-border);
}
.md-typeset .tip > .admonition-title,
.md-typeset .abstract > .admonition-title {
  background-color: var(--ompa-success-bg);
  color: var(--ompa-success-fg);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .abstract > .admonition-title::before {
  background-color: var(--ompa-success-fg);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--ompa-warning-border);
}
.md-typeset .warning > .admonition-title {
  background-color: var(--ompa-warning-bg);
  color: var(--ompa-warning-fg);
}
.md-typeset .warning > .admonition-title::before {
  background-color: var(--ompa-warning-fg);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--ompa-danger-fg);
}
.md-typeset .danger > .admonition-title {
  color: var(--ompa-danger-fg);
}
.md-typeset .danger > .admonition-title::before {
  background-color: var(--ompa-danger-fg);
}

/* Skjermbilde-faner (mobil/iPad/desktop): egen radius og luft, som kort i designsystemet. */
.md-typeset .tabbed-set {
  border-radius: 0.875rem;
}

/*
 * Plassholderbilder tegner sin egen ramme/bakgrunn (nøytral kort-bakgrunn + varsel-merke),
 * så de skal ikke få samme ramme/skygge som ekte skjermbilder (.md-content img over), og
 * skal vises kompakt fremfor i full innholdsbredde inntil et ekte bilde erstatter dem.
 */
.md-typeset img.placeholder-shot {
  display: block;
  margin: 1rem auto;
  max-height: 220px;
  width: auto;
  max-width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.md-typeset .tabbed-content em {
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
}