/* css/primitives.css */
/* Reusable primitives used by the header */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  border:0.8px solid var(--border);
  border-radius:999px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.hoverable{transition:border-color .18s, box-shadow .18s, background .18s}
.hoverable:hover,.glass:hover{
  /* Original desktop hover effect */
  border-color: color-mix(in oklab, var(--accent) 16%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 10%, transparent), 0 6px 18px rgba(0,0,0,.12);
}
[data-theme="light"] .hoverable:hover,[data-theme="light"] .glass:hover{
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  background: color-mix(in oklab, #fff 94%, var(--glass-strong));
}