/*
=========================================================
LADA monochrome foundation
---------------------------------------------------------
Shared by:
1) optional accessibility mode;
2) future memorial / national-event mode.

Do not add font scaling here. This file changes colour only.
=========================================================
*/

html.accessibility-mode,
html.memorial-mode {
    --color-text: #111111;
    --color-text-light: #333333;
    --color-primary: #222222;
    --color-primary-strong: #000000;
    --color-primary-light: #eeeeee;
}

html.accessibility-mode body,
html.memorial-mode body {
    color: #111111;
    background-color: #ffffff;
}

/* Convert visual media to grayscale without maintaining duplicate assets. */
html.accessibility-mode img,
html.accessibility-mode picture,
html.accessibility-mode video,
html.memorial-mode img,
html.memorial-mode picture,
html.memorial-mode video {
    filter: grayscale(1);
}

/* Remove colour from common decorative surfaces while preserving layout. */
html.accessibility-mode .hero,
html.accessibility-mode .site-header,
html.accessibility-mode .site-footer,
html.accessibility-mode [class*="card"],
html.accessibility-mode [class*="panel"],
html.memorial-mode .hero,
html.memorial-mode .site-header,
html.memorial-mode .site-footer,
html.memorial-mode [class*="card"],
html.memorial-mode [class*="panel"] {
    filter: grayscale(1);
}

/* Controls stay recognisable in monochrome. */
html.accessibility-mode .btn,
html.accessibility-mode button,
html.memorial-mode .btn,
html.memorial-mode button {
    border-color: #333333;
}

html.accessibility-mode .site-nav__accessibility-button.is-active {
    color: #ffffff;
    border-color: #000000;
    background-color: #000000;
}