/* homepage — shares colour + type tokens with blog-minimal (src/styles/global.css).
   Change a token there, mirror it here. Layout stays homepage's own (terminal voice). */

:root {
  /* colour — same values as blog-minimal */
  --paper: #f7f8fa;
  --ink: #171a26;
  --ink-2: #3a4055;
  --muted: #5a6072;
  --rule: #dde1e8;
  --rule-strong: #b9c0cc;
  --accent: #2c3e6b;
  --select: #d6ddec;
  /* homepage-only surfaces */
  --surface: #ffffff;
  --surface-2: #eceff5;   /* = blog --code-bg */

  /* type — CJK shared with blog; mono is homepage's voice */
  --sans: "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Noto Sans SC", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--select); }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

.lk { transition: border-color .15s, box-shadow .15s; }
.lk:hover { border-color: var(--accent) !important; box-shadow: 0 2px 0 var(--rule); }
.lk:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.cur { animation: blink 1.1s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cur { animation: none; }
}