/*
 * Дизайн-токены. Палитра монохромная: единственный «акцент» — инвертированная
 * кнопка (светлая на тёмном фоне, тёмная на светлом). Значения взяты из
 * референса emoji.wivvi.net: фон, поверхности, текст, приглушённый текст,
 * hairline-линии и шрифты Unbounded / JetBrains Mono. Цветных статусов нет.
 * Толщина шрифта зависит от важности текста: заголовки 800, названия 700,
 * кнопки и подписи 600, пункты списков и реакции 500, основной текст 400,
 * вторичный и мелкий текст 300.
 */

:root {
  --bg: #fafaf9;
  --raised: #ffffff;
  --surface: #f2f2f0;
  --surface-2: #eaeae7;
  --text: #0b0b0c;
  --text-2: #3c3c40;
  --muted: #86868b;
  --line: rgba(11, 11, 12, .08);
  --line-2: rgba(11, 11, 12, .14);
  --hit: #e1e1dd;
  --focus: rgba(11, 11, 12, .28);
  --shadow: 0 1px 2px rgba(11, 11, 12, .04), 0 12px 32px -16px rgba(11, 11, 12, .18);
  --scrim: rgba(0, 0, 0, .45);

  --sans: "Unbounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Движение: кривые и длительности. Выход — плавный, вход — с лёгким перелётом */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.64, 0, .78, 0);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --d-fast: .16s;
  --d-base: .28s;
  --d-slow: .45s;
  --t: .2s;

  --header-h: 64px;
  --side-w: 300px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0b;
    --raised: #0f0f11;
    --surface: #0e0e10;
    --surface-2: #161619;
    --text: #f5f5f4;
    --text-2: #c7c7cc;
    --muted: #8a8a90;
    --line: rgba(255, 255, 255, .07);
    --line-2: rgba(255, 255, 255, .13);
    --hit: #222226;
    --focus: rgba(255, 255, 255, .26);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -20px rgba(0, 0, 0, .8);
    --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* Тёмная тема, выбранная в настройках, когда в системе светлая */
:root[data-theme="dark"] {
  --bg: #0a0a0b;
  --raised: #0f0f11;
  --surface: #0e0e10;
  --surface-2: #161619;
  --text: #f5f5f4;
  --text-2: #c7c7cc;
  --muted: #8a8a90;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --hit: #222226;
  --focus: rgba(255, 255, 255, .26);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -20px rgba(0, 0, 0, .8);
  --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* Повышенная контрастность: линии и границы заметнее */
@media (prefers-contrast: more) {
  :root {
    --line: rgba(11, 11, 12, .22);
    --line-2: rgba(11, 11, 12, .38);
    --muted: #55555a;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --line: rgba(255, 255, 255, .22);
      --line-2: rgba(255, 255, 255, .38);
      --muted: #b0b0b6;
    }
  }
}