/*
 * Hệ thiết kế dùng chung cho trang công khai và trang quản trị.
 *
 * Cùng bảng màu với ứng dụng desktop (desktop/src/renderer/app.css): nền đen
 * ngả ấm, một màu nhấn hổ phách duy nhất. Lý do chọn đã ghi trong README —
 * tông xanh tím là dấu vân tay của mọi sản phẩm AI dựng vội.
 *
 * Tách ra file riêng để trang chủ và trang quản trị không trôi khỏi nhau mỗi
 * lần một bên sửa màu.
 */
:root {
  --ink-0: #100f0e;
  --ink-1: #1a1816;
  --ink-2: #232019;
  --line: #322d27;
  --line-soft: #26221d;

  --text: #f3efe8;
  --text-dim: #a49c90;
  --text-faint: #6f675d;

  --accent: #e3a04b;
  --accent-press: #cc8c3a;
  --accent-ink: #1a1206;

  --danger: #e0705c;
  --ok: #86b36a;

  --r-sm: 8px;
  --r-md: 12px;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  position: relative;
  min-height: 100dvh;
  font: 400 15px/1.65 'Be Vietnam Pro', system-ui, sans-serif;
  color: var(--text);
  background: var(--ink-0);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Lối tắt cho người dùng bàn phím, chỉ hiện khi được focus. */
.skip {
  position: absolute; left: 0; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: var(--r-sm);
  color: var(--accent-ink); background: var(--accent); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

/*
 * Người bật "giảm chuyển động" trong hệ điều hành đã nói rõ ý; tắt hết, không
 * chừa ngoại lệ nào.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}