/*
 * Страницы ошибок nginx (404, 429, 500, 502, 503, 504) — см. README.md рядом.
 *
 * Токены — копия дизайн-системы МЗР из mzr_js_app:
 *   ui/src/less/CommonCSS/mzr-common.less (цвета, радиусы, отступы, темы, тёмная тема)
 *   ui/src/less/core/button.less (кнопка: высота 40, радиус = высота/2, 16px/600)
 * Имена переменных те же, что в приложении. Меняешь токен там — поправь и здесь.
 * Внешних ресурсов нет: страница должна открываться, даже когда PHP лежит.
 */

:root {
  --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-scale: 1;

  --radius--small: 8px;
  --radius--medium: 15px;

  --margin--xsmall: 5px;
  --margin--small: 10px;
  --margin--medium: 15px;
  --margin--xmedium: 20px;
  --margin--large: 25px;
  --margin--xlarge: 30px;

  --global-height: 40px;

  --color--primary-midtone: #ED6963;
  --color--primary-lightest: #FFC7C5;
  --color--primary-light: #F88D88;
  --color--primary-dark: #E0504A;

  --color--third-light: #CAE0EE;
  --color--third-lightest: #E7F4FD;
  --color--third-midtone: #8CC0E1;

  --color--shade-black: #1C1E20;
  --color--shade-midtone: #A7ACB1;
  --color--shade-dark: #6E757D;
  --color--shade-darkest: #3D4348;
  --color--shade-light: #D6D9DC;
  --color--shade-lightest: #F1F2F3;
  --color--white: white;

  --color-text: var(--color--shade-black);
  --background-color: var(--color--shade-lightest);

  --color-button-primary: var(--color--primary-midtone);
  --color-button-primary-lighten: var(--color--primary-light);
}

/* Темы: как в mzr-common.less, только то, что видно на странице ошибки */
html[data-theme^=zozhnik] {
  --radius--small: 12px;
  --radius--medium: 20px;
  --color--primary-midtone: #16DE7E;
  --color--primary-lightest: #C1E9D1;
  --color--primary-light: #85E5AC;
  --color--primary-dark: #04BD64;
  --color--third-light: #D6E9ED;
  --color--third-lightest: #EEF7F8;
  --color--third-midtone: #AEDADE;
  --background-color: var(--color--third-lightest);
}

html[data-theme=default-measuringApp],
html[data-theme=default-measuringAppPro] {
  --color--primary-midtone: #377FD0;
  --color--primary-lightest: #ABD3FF;
  --color--primary-light: #6CA7EB;
  --color--primary-dark: #2666AE;
}

html[data-theme=default-green] {
  --color--primary-midtone: #67D271;
  --color--primary-lightest: #C2EFC6;
  --color--primary-light: #9FE3A6;
  --color--primary-dark: #3CB046;
}

html[data-theme=default-redwhite] {
  --color--primary-midtone: #FF4C4D;
  --color--primary-lightest: #FFDBDB;
  --color--primary-light: #FE8787;
  --color--primary-dark: #DB4343;
}

html[data-theme=cream-terracotta] {
  --color--primary-midtone: #D97757;
  --color--primary-lightest: #F5DDD0;
  --color--primary-light: #E8906E;
  --color--primary-dark: #B85E40;
  --color--shade-lightest: #FAF9F5;
  --color--shade-light: #E8E6DC;
}

html[data-theme=spring-fresh] {
  --color--primary-midtone: #8EDB98;
  --color--primary-lightest: #DDF5E1;
  --color--primary-light: #B5E9BC;
  --color--primary-dark: #5FBF6D;
  --color--shade-black: #2C2B2B;
  --color--shade-light: #DAE0E9;
  --color--shade-lightest: #F2F4F6;
}

/*
 * Тёмная тема — последней, как в mzr-common.less (перебивает цвета тем).
 * Выбор пользователя приходит из errors.js (data-theme-dark), иначе — системная настройка.
 */
html[data-theme-dark=dark] {
  --color--primary-midtone: #40EFFF;
  --color--primary-lightest: #213D41;
  --color--primary-light: #8AF5FF;
  --color--primary-dark: #11DCEE;
  --color--third-light: var(--color--shade-smoky);
  --color--third-lightest: var(--color--shade-lightest);
  --color--third-midtone: var(--color--shade-midtone);
  --color--shade-black: white;
  --color--shade-midtone: #ECECEC;
  --color--shade-dark: #F4F4F4;
  --color--shade-darkest: white;
  --color--shade-light: #6E757D;
  --color--shade-lightest: #1C1E20;
  --color--shade-smoky: #6E757D;
  --color--white: #3D4348;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme-dark]) {
    --color--primary-midtone: #40EFFF;
    --color--primary-lightest: #213D41;
    --color--primary-light: #8AF5FF;
    --color--primary-dark: #11DCEE;
    --color--third-light: #6E757D;
    --color--third-lightest: #1C1E20;
    --color--third-midtone: #ECECEC;
    --color--shade-black: white;
    --color--shade-midtone: #ECECEC;
    --color--shade-dark: #F4F4F4;
    --color--shade-darkest: white;
    --color--shade-light: #6E757D;
    --color--shade-lightest: #1C1E20;
    --color--white: #3D4348;
  }
}

html[data-text-size=small] { --font-scale: 0.9; }
html[data-text-size=large] { --font-scale: 1.15; }
html[data-text-size=xlarge] { --font-scale: 1.3; }

html[data-font^=Arial] { --font-family: 'Arial', sans-serif; }
html[data-font^=Montserrat] { --font-family: 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif; }
html[data-font^=Roboto] { --font-family: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif; }

/* Раскладка */

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margin--xmedium) var(--margin--medium);
  background: var(--background-color);
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

.mzr-error__wrap {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
 * Логотип сайта (logos.svg). В приложении цвета логотипа рассчитаны на шапку, залитую
 * цветом темы (текст белый); здесь логотип на фоне страницы — текст тёмный, как в zozhnik.
 */
.mzr-error__brand {
  --color-logo-color-text: var(--color--shade-black);
  --color-logo-color-circle: var(--color--primary-midtone);
  display: block;
  margin-bottom: var(--margin--medium);
  border-radius: var(--radius--small);
  line-height: 0;
}
.mzr-error__brand svg { width: 150px; height: 45px; }
html[data-theme^=zozhnik] .mzr-error__brand { --color-logo-color-circle: var(--color--third-midtone); }
html[data-theme=default-redwhite] .mzr-error__brand { --color-logo-color-text: var(--color--primary-midtone); }
html[data-theme-dark=dark] .mzr-error__brand { --color-logo-color-text: white; --color-logo-color-circle: white; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme-dark]) .mzr-error__brand { --color-logo-color-text: white; --color-logo-color-circle: white; }
}

/* Карточка — как mzr-block: белый фон, --radius--medium */
.mzr-error {
  width: 100%;
  padding: var(--margin--xlarge) var(--margin--xmedium) var(--margin--xmedium);
  background: var(--color--white);
  border-radius: var(--radius--medium);
  text-align: center;
}

/* Иконка в круге цвета primary-lightest */
.mzr-error__icon {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto var(--margin--xmedium);
  border-radius: 50%;
  background: var(--color--primary-lightest);
  color: var(--color--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mzr-error__icon svg.mzr-error__glyph { width: 40px; height: 40px; }

/* Типографика — классы mzr-font--* из mzr-common.less */
.mzr-font--body20sb {
  margin: 0 0 var(--margin--small);
  font-weight: 600;
  font-size: calc(20px * var(--font-scale));
  line-height: calc(26px * var(--font-scale));
}
.mzr-font--body16reg {
  margin: 0 0 var(--margin--small);
  font-size: calc(16px * var(--font-scale));
  line-height: calc(21.8px * var(--font-scale));
  color: var(--color--shade-dark);
}
.mzr-font--body13reg {
  margin: var(--margin--xmedium) 0 0;
  font-size: calc(13px * var(--font-scale));
  line-height: calc(16px * var(--font-scale));
  color: var(--color--shade-midtone);
}

/* Блок «напишите нам» — как mzr-font--body14reg, приглушённый */
.mzr-error__support {
  margin: var(--margin--xmedium) 0 0;
  padding-top: var(--margin--medium);
  border-top: 1px solid var(--color--shade-light);
  font-size: calc(14px * var(--font-scale));
  line-height: calc(18px * var(--font-scale));
  color: var(--color--shade-dark);
}
.mzr-error__support p { margin: 0; }

/* Адрес почты — отдельной строкой и целиком, без переноса посередине */
.mzr-error__email {
  display: inline-block;
  margin: var(--margin--xsmall) 0;
  color: var(--color-button-primary);
  font-size: calc(16px * var(--font-scale));
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.mzr-error__email:hover,
.mzr-error__email:focus {
  color: var(--color--primary-dark);
  text-decoration: underline;
}

/* Кнопки — как uk-button / uk-button-primary / uk-button-link */
.mzr-error__actions {
  display: flex;
  flex-direction: column;
  gap: var(--margin--small);
  margin-top: var(--margin--xmedium);
}
.uk-button {
  display: block;
  width: 100%;
  height: var(--global-height);
  padding: 0 var(--margin--medium);
  border: 1px solid transparent;
  border-radius: calc(var(--global-height) / 2);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: calc(var(--global-height) - 2px);
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
}
.uk-button-primary {
  background: var(--color-button-primary);
  color: var(--color--white);
}
.uk-button-primary:hover,
.uk-button-primary:focus {
  background: var(--color-button-primary-lighten);
}
.uk-button-link {
  background: transparent;
  color: var(--color-button-primary);
}
.uk-button-link:hover,
.uk-button-link:focus {
  color: var(--color--primary-dark);
}

/* Фокус с клавиатуры: видимое кольцо цвета акцента (мышью не появляется) */
.uk-button:focus-visible,
.mzr-error__email:focus-visible,
.mzr-error__brand:focus-visible {
  outline: 2px solid var(--color--primary-midtone);
  outline-offset: 3px;
}
.uk-button:focus:not(:focus-visible) { outline: none; }