/*
 * Форма входа в духе остальных инструментов студии.
 *
 * Токены — те же пятнадцать значений, что в happy-features, перенесённые как
 * есть, а не подобранные на глаз: страница входа стоит перед каждым
 * инструментом, и «почти такой же» тёмный заметен именно здесь.
 *
 * Стиль подмешивается в страницу Authelia плагином Caddy: своего механизма для
 * произвольного CSS у Authelia нет, в её бинаре только favicon и logo.
 *
 * Шрифты лежат у нас, а не на Google Fonts, и не по идейным соображениям:
 * CSP Authelia разрешает стили только с 'self', так что внешний @import
 * молча не сработал бы. Заодно страница входа не ходит наружу вовсе.
 */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/studio-assets/fonts/archivo-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/studio-assets/fonts/archivo-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/studio-assets/fonts/archivo-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('/studio-assets/fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2'),
    url('/studio-assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}

/*
 * Тёмная палитра трекера. Светлой здесь нет намеренно: в конфиге Authelia
 * стоит theme: 'dark', то есть база всегда тёмная, и вторая схема была бы
 * мёртвым кодом.
 */
:root {
  --background: 228 9% 9%;
  --foreground: 220 14% 91%;
  --surface-1: 228 9% 11%;
  --surface-2: 228 8% 14%;
  --secondary: 228 8% 19%;
  --muted-foreground: 220 8% 66%;
  --rule: 228 7% 22%;
  --rule-strong: 228 7% 32%;
  --input: 228 7% 44%;
  --pine: 168 42% 56%;
  --oxide: 4 78% 68%;
  --radius: 4px;
}

body,
#root {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground));
  font-family: Archivo, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#root .MuiTypography-root,
#root .MuiButton-root,
#root .MuiInputBase-root {
  font-family: Archivo, 'Segoe UI', system-ui, sans-serif;
}

/* Карточка формы: приподнятая поверхность и волосяная граница вместо тени. */
#root .MuiPaper-root {
  background: hsl(var(--surface-1)) !important;
  background-image: none;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--rule));
  border-radius: calc(var(--radius) * 2);
  box-shadow: none;
}

#root .MuiTypography-h5,
#root .MuiTypography-h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}

#root .MuiTypography-body2,
#root .MuiFormHelperText-root,
#root .MuiInputLabel-root {
  color: hsl(var(--muted-foreground));
}

/* Поля ввода. */
#root .MuiOutlinedInput-root {
  background: hsl(var(--surface-2));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
}

/* Поле обязано читаться полем: в трекере его границу задаёт --input, а не
   --rule-strong, и разница между ними здесь как раз та, что делает рамку
   заметной на приподнятой поверхности. */
#root .MuiOutlinedInput-notchedOutline {
  border-color: hsl(var(--input)) !important;
}

#root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: hsl(var(--pine)) !important;
}

#root .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: hsl(var(--input));
}

#root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: hsl(var(--pine));
  border-width: 1px;
}

#root .MuiInputLabel-root.Mui-focused {
  color: hsl(var(--pine));
}

#root .MuiInputBase-input {
  color: hsl(var(--foreground));
}

/*
 * Одна залитая кнопка на экран — ровно как в трекере. Хвойный здесь и в
 * ссылках, и больше нигде.
 */
#root .MuiButton-contained,
#root .MuiButton-containedPrimary {
  background: hsl(var(--pine)) !important;
  color: hsl(var(--background)) !important;
  border-radius: var(--radius);
  box-shadow: none;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

#root .MuiButton-contained:hover {
  background: hsl(var(--pine) / 0.88) !important;
  box-shadow: none;
}

#root .MuiButton-text,
#root .MuiLink-root,
#root a {
  color: hsl(var(--pine));
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
}

#root a:hover,
#root .MuiLink-root:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

#root .MuiCheckbox-root.Mui-checked,
#root .MuiSvgIcon-colorSuccess {
  color: hsl(var(--pine)) !important;
}

/* Оксид только про необратимое и про ошибку — больше нигде. */
#root .MuiAlert-standardError,
#root .MuiAlert-filledError,
#root .MuiFormHelperText-root.Mui-error {
  background: hsl(var(--oxide) / 0.12);
  color: hsl(var(--oxide)) !important;
  border: 1px solid hsl(var(--oxide) / 0.35);
  border-radius: var(--radius);
}

/* Служебные строки и коды — тем же моно, что в трекере. */
#root code,
#root .MuiTypography-caption {
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}