/* Tracium website: the hover states every page shares. Interactive text eases to the accent, never snaps and never
   greys out: indigo on paper, indigo 300 on charcoal. On indigo the accent is white, so text there eases to the
   second text colour. Buttons ease their light. One curve for all of it. */
:root { --hv: 0.35s cubic-bezier(0.25, 1, 0.5, 1); }
/* On touch the states above answer a tap: no grey box from the system over them. */
:where(a, button, summary, label) { -webkit-tap-highlight-color: transparent; }

/* Links, the nav, the menu, the contents of an article */
.tr-link, .tr-nav__item, .kick-l, .mnav-l a, .mnav-sl a, .toc ol a, .src a { transition: color var(--hv), border-color var(--hv); }
.tr-link:hover, .tr-nav__item:hover, a.kick-l:hover, .mnav-l a:hover, .mnav-sl a:hover, .toc ol a:hover, .src a:hover { color: var(--tr-color-accent); border-color: currentColor; }
[data-theme="indigo"] .tr-link:hover, [data-theme="indigo"] .tr-nav__item:hover { color: var(--tr-color-text-2); }

/* Cards and rows that are one link: their title and their link line take the accent */
.post .t-h4, .feat .t-h2, .feat-go, .role-n, .role-go { transition: color var(--hv), border-color var(--hv); }
.post:hover .t-h4, .feat:hover .t-h2, .feat:hover .feat-go, .role:hover .role-n, .role:hover .role-go { color: var(--tr-color-accent); border-color: currentColor; }

/* Buttons */
.tr-button { transition: filter var(--hv), background-color var(--hv), box-shadow var(--hv); }
.tr-button:hover { filter: brightness(1.12); }
.pg .btn-2:hover { filter: none; background: var(--tr-color-fill); }