/* Девяностые (1991–2000).
 *
 * Не «Мемфис» и не поздний совмодерн: в России девяностых визуальный язык
 * задали три вещи — интерфейс Windows 95 с его серыми панелями и синими
 * заголовками, кислотная полиграфия ларьков и вкладышей, и первые самодельные
 * макеты в CorelDRAW с градиентами и «хромом». Отсюда серебро, объёмные рамки,
 * тёмно-синие плашки заголовков и ядовитая маджента в акцентах.
 */
@import url("../fonts/fonts.css");

html[data-era="nineties"] {
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "PT Sans", Tahoma, Arial, sans-serif;
  --weight-display: 500;
  --case-display: uppercase;
  --tracking-display: 0.01em;

  /* Рабочий стол Windows 95: серо-бежевый фон, белые окна, серебро панелей. */
  --c-bg: #d4d0c8;
  --c-surface: #ffffff;
  --c-surface-2: #c0c0c0;
  --c-text: #000000;
  --c-muted: #4a4a4a;
  --c-accent: #000080;
  --c-accent-2: #e5007d;
  --c-on-accent: #ffffff;
  --c-link: #0000a8;
  --c-border: #808080;
  --c-read: #6e6e6e;

  --radius: 0;
  --radius-sm: 0;
  --rule: 2px solid #808080;
  --rule-strong: 3px solid var(--c-accent);

  /* Объёмная рамка тех лет: светлая сверху слева, тёмная снизу справа. */
  --shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #404040,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
  --shadow-sm: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;

  --photo-filter: saturate(1.1) contrast(1.05);
  /* Дизеринг 16 цветов: точки через одну, как в палитре тех лет. */
  --texture-bg:
    repeating-linear-gradient(0deg, rgba(0, 0, 128, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 128, 0.05) 0 1px, transparent 1px 3px);

  /* Тёмный вариант эпохи: переключение — в src/styles/tokens.css. */
  --d-bg: #16161c;
  --d-surface: #1e1e26;
  --d-surface-2: #2a2a34;
  --d-text: #f2f2f5;
  --d-muted: #a0a0ad;
  --d-accent: #8189ff;
  --d-accent-2: #ff5cb8;
  --d-on-accent: #16161c;
  --d-link: #9ea6ff;
  --d-border: #3d3d4a;
  --d-read: #80808f;
}

/* Заголовок раздела — заголовок окна: синий градиент и белый текст. */
html[data-era="nineties"] main h2 {
  background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
  color: var(--c-on-accent);
  padding: 0.22em 0.6em;
  margin-top: 2rem;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
}

html[data-era="nineties"] main h3 {
  color: var(--c-accent);
  border-bottom: 2px solid var(--c-border);
  padding-bottom: 0.15em;
}

/* Панели и карточки — объёмные, как кнопки и окна той поры. */
html[data-era="nineties"] .card {
  background: var(--c-surface-2);
  border: 0;
  border-radius: 0;
  box-shadow: var(--shadow);
}

html[data-era="nineties"] table {
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}

html[data-era="nineties"] th {
  background: var(--c-surface-2);
  color: var(--c-accent);
}

/* Кнопки: та самая объёмная рамка, которая «вдавливается» при нажатии. */
html[data-era="nineties"] .chip,
html[data-era="nineties"] button {
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 0;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}

html[data-era="nineties"] .chip[aria-pressed="true"] {
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #8080c0;
}

html[data-era="nineties"] button:active {
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

/* Ядовитая маджента — от вкладышей и кислотных афиш: только в мелких деталях,
   чтобы не мешать читать. */
html[data-era="nineties"] .lead::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 0.8rem;
  background: linear-gradient(90deg, #e5007d 0%, #00c2ff 50%, #ffe400 100%);
}

html[data-era="nineties"] a:hover {
  background: var(--c-accent);
  color: #ffffff;
  text-decoration: none;
}