/* Pong Hội Họa: style riêng của trang.
   Màu, chữ, nút, ô nhập gốc nằm trong modernist.css (hệ thiết kế Modernist).
   File này đổi màu nhấn sang xanh chàm của Pong và thêm hiệu ứng rê chuột. */

/* Màu nhấn (xanh chàm) */
html:root {
  --color-accent:oklch(0.45 0.2 268);
  --color-accent-2:oklch(0.45 0.2 268);
  --color-accent-100:oklch(0.965 0.018 268);
  --color-accent-200:oklch(0.92 0.04 268);
  --color-accent-300:oklch(0.85 0.075 268);
  --color-accent-400:oklch(0.72 0.13 268);
  --color-accent-500:oklch(0.56 0.18 268);
  --color-accent-600:oklch(0.39 0.19 269);
  --color-accent-700:oklch(0.34 0.17 270);
  --color-accent-800:oklch(0.28 0.14 272);
  --color-accent-900:oklch(0.22 0.1 274);
  --color-accent-2-100:oklch(0.965 0.018 268);
  --color-accent-2-800:oklch(0.28 0.14 272);
}

html { scroll-behavior: smooth; }
body { margin: 0; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hiệu ứng rê chuột: thêm class hover-… vào phần tử trong các file sections */
.hover-tint:hover { background: var(--color-accent-100) !important; color: var(--color-text) !important; }
.hover-accent:hover { background: var(--color-accent-600) !important; color: var(--color-bg) !important; }
.hover-underline:hover { text-decoration: underline !important; color: var(--color-text) !important; }
.hover-glass:hover { background: color-mix(in srgb, white 22%, transparent) !important; }
.hover-ink:hover { background: var(--color-text) !important; color: #86BDEB !important; }
.hover-paper:hover { background: var(--color-bg) !important; color: var(--color-text) !important; }
.hover-yellow:hover { background: #EBB445 !important; color: var(--color-text) !important; }
.hover-orange:hover { background: #DD8052 !important; color: var(--color-text) !important; }
.hover-sky:hover { background: #86BDEB !important; color: var(--color-text) !important; }
.hover-sage:hover { background: #9FCBAA !important; color: var(--color-text) !important; }