/* Interaction states. Components are inline-styled so they can paint instantly;
   hover, active and focus can only be expressed in CSS, so they live here and
   attach through data attributes the components emit. */

[data-i2="button"] { transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease; }
[data-i2="button"]:hover:not(:disabled) { opacity: 0.92; }
[data-i2="button"][data-variant="ghost"]:hover:not(:disabled),
[data-i2="button"][data-variant="secondary"]:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); opacity: 1; }
[data-i2="button"][data-variant="text"]:hover:not(:disabled) { color: var(--accent); opacity: 1; }
[data-i2="button"]:active:not(:disabled) { opacity: 0.86; }

[data-i2="chip"] { transition: background-color 160ms ease, border-color 160ms ease; }
[data-i2="chip"]:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-text); }

[data-i2="row"] { transition: background-color 160ms ease; }
[data-i2="row"]:hover { background: var(--surface-2); }

[data-i2="nav-item"] { transition: background-color 160ms ease, color 160ms ease; }
[data-i2="nav-item"]:hover { background: var(--surface-2); color: var(--ink); }
[data-i2="nav-item"][data-active="true"]:hover { background: var(--accent-soft); color: var(--accent-text); }

[data-i2="tab"]:hover span { color: var(--accent-text); }

[data-i2] :focus-visible,
[data-i2]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }